ux eye - from idea to reality
DESCRIPTION
Presentation given to the UX Eye for the Developer Guy Meetup on June 21, 2012TRANSCRIPT
![Page 1: UX Eye - From Idea to Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052909/559759971a28ab9e3c8b47da/html5/thumbnails/1.jpg)
FROM IDEA
TO REALITY
Glen Lipka
Vice President, User eXperience
Marketo
![Page 2: UX Eye - From Idea to Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052909/559759971a28ab9e3c8b47da/html5/thumbnails/2.jpg)
Google Images
![Page 3: UX Eye - From Idea to Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052909/559759971a28ab9e3c8b47da/html5/thumbnails/3.jpg)
% Complete
De
sign
Gra
nu
lari
ty
The Long Tail Part
The Design Part
The Idea Part
Stages of Design
![Page 4: UX Eye - From Idea to Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052909/559759971a28ab9e3c8b47da/html5/thumbnails/4.jpg)
THE IDEA PART
![Page 5: UX Eye - From Idea to Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052909/559759971a28ab9e3c8b47da/html5/thumbnails/5.jpg)
I GOTS AN IDEA!
UH OH
Executive Sponsor UX Designer
![Page 6: UX Eye - From Idea to Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052909/559759971a28ab9e3c8b47da/html5/thumbnails/6.jpg)
2 WORD IDEAS
• Dynamic Content
• Purposeful Duplicates
• Archive Folders
• Spend Management
• Nurture Module
• Scoring Module
• Analytics Home
![Page 7: UX Eye - From Idea to Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052909/559759971a28ab9e3c8b47da/html5/thumbnails/7.jpg)
DISCOVERY
• Listen
• Explore
• Imagine
• Empathize
![Page 8: UX Eye - From Idea to Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052909/559759971a28ab9e3c8b47da/html5/thumbnails/8.jpg)
Understand the current UX
![Page 9: UX Eye - From Idea to Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052909/559759971a28ab9e3c8b47da/html5/thumbnails/9.jpg)
Define the requirements
Not the solution
![Page 10: UX Eye - From Idea to Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052909/559759971a28ab9e3c8b47da/html5/thumbnails/10.jpg)
Sketch on paper
![Page 11: UX Eye - From Idea to Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052909/559759971a28ab9e3c8b47da/html5/thumbnails/11.jpg)
![Page 12: UX Eye - From Idea to Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052909/559759971a28ab9e3c8b47da/html5/thumbnails/12.jpg)
Sketch on whiteboard
![Page 13: UX Eye - From Idea to Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052909/559759971a28ab9e3c8b47da/html5/thumbnails/13.jpg)
![Page 14: UX Eye - From Idea to Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052909/559759971a28ab9e3c8b47da/html5/thumbnails/14.jpg)
Talk it out
![Page 15: UX Eye - From Idea to Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052909/559759971a28ab9e3c8b47da/html5/thumbnails/15.jpg)
Let the conversation flow
![Page 16: UX Eye - From Idea to Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052909/559759971a28ab9e3c8b47da/html5/thumbnails/16.jpg)
Converge Ideas
![Page 17: UX Eye - From Idea to Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052909/559759971a28ab9e3c8b47da/html5/thumbnails/17.jpg)
Conceptual Design
![Page 18: UX Eye - From Idea to Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052909/559759971a28ab9e3c8b47da/html5/thumbnails/18.jpg)
THE LONG TAIL PART
![Page 19: UX Eye - From Idea to Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052909/559759971a28ab9e3c8b47da/html5/thumbnails/19.jpg)
Computer Time
![Page 20: UX Eye - From Idea to Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052909/559759971a28ab9e3c8b47da/html5/thumbnails/20.jpg)
Prototypes
OmniGraffle
![Page 21: UX Eye - From Idea to Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052909/559759971a28ab9e3c8b47da/html5/thumbnails/21.jpg)
![Page 22: UX Eye - From Idea to Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052909/559759971a28ab9e3c8b47da/html5/thumbnails/22.jpg)
![Page 23: UX Eye - From Idea to Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052909/559759971a28ab9e3c8b47da/html5/thumbnails/23.jpg)
![Page 24: UX Eye - From Idea to Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052909/559759971a28ab9e3c8b47da/html5/thumbnails/24.jpg)
![Page 25: UX Eye - From Idea to Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052909/559759971a28ab9e3c8b47da/html5/thumbnails/25.jpg)
Dynamic Content StoryboardDesign SpecificationLast Updated: October 27, 2011
![Page 26: UX Eye - From Idea to Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052909/559759971a28ab9e3c8b47da/html5/thumbnails/26.jpg)
Change LogDate Designer Change
7-1-2011 Divya Ramachandran Started document
7-5-2011 Divya Ramachandran Worked out first case – extending tokens
7-8-2011 Divya Ramachandran Add rules, languages to tokens; edit tokens from within landing page/email
7-12-2011 Divya Ramachandran Token editor (separate window)
7-15-2011 Divya Ramachandran Previewer, Clone
7-26-2011 Divya Ramachandran Started over and split my.tokens from dynamic content
7-27-2011 Divya Ramachandran Add versions and languages
7-28-2011 Divya Ramachandran Version rules; changed back to dynamic content set (no tracks).
8-2-2011 Divya Ramachandran Creating new dynamic content from within local asset email use case
8-3-2011 Divya Ramachandran Dynamic content editor in separate window launched from email
8-4-2011 Divya Ramachandran Updated dynamic content editor to have two tabs – one for set and second for selected token
8-8-2011 Divya Ramachandran Added landing page editor
8-9-2011 Divya Ramachandran Added details on global dynamic content sets (design studio), and validation on clone/activate campaigns
8-10-2011 Divya Ramachandran Eliminated 3rd window; navigate main window to dynamic content editor area when editing from email/lp
8-11-2011 Divya Ramachandran Redesign of previewer
8-11-2011 Divya Ramachandran Split previewer into separate document
8-12-2011 Divya Ramachandran Clean up
8-19-2011 Divya Ramachandran Changed everything
8-22-2011 Divya Ramachandran Changed right panel to check boxes
8-23-2011 Divya Ramachandran Cleaned up right panel; added previewing options
8-24-2011 Divya Ramachandran Added flobule validation rules
8-25-2011 Divya Ramachandran Changed to add rules only to mkteditable sections
8-26-2011 Divya Ramachandran Added options to edit inside of TinyMCE; changed right side to tree
8-29-2011 Divya Ramachandran Added header, text version; previewer modes
![Page 27: UX Eye - From Idea to Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052909/559759971a28ab9e3c8b47da/html5/thumbnails/27.jpg)
Date Designer Change
8-30-2011 Divya Ramachandran Global dynamic content, using global from email
8-31-2011 Divya Ramachandran Landing page editor
9-1-2011 Divya Ramachandran More on landing page editor
9-2-2011 Divya Ramachandran Clean up
9-6-2011 Divya Ramachandran clean up
9-7-2011 Divya Ramachandran More detail and clean up on flobule, tree
9-13-2011 Divya Ramachandran Changed text version to be on a per section basis
9-16-2011 Divya Ramachandran Updated text version and header fields; clean up
9-19-2011 Divya Ramachandran Finished details for email editor
10-3-2011 Divya Ramachandran Incorporated segmentation and segments; replaced rule sets
10-12-2011 Divya Ramachandran Updated segmentation design
10-17-2011 Divya Ramachandran Details for approval/drafts/edits; workspace behavior
10-18-2011 Divya Ramachandran Added detail
10-24-2011 Divya Ramachandran Updated names/icons
10-27-2011 Divya Ramachandran New segmentation UI with field/smart list types
11-1-2011 Divya Ramachandran Cleaned up icons/terminology through email editor
11-15-2011 Divya Ramachandran Updated segmentation edit modal; segmentation summary page
11-17-2011 Divya Ramachandran Deleted segment behavior
2-15-2012 Divya Ramachandran Added segment triggers/filters
6-1-2012 Divya Ramachandran Enhancement to Segmentation summary page to account for approx count
6-12-2012 Divya Ramachandran Clean up options for dynamic content report
Change Log – Page 2
![Page 28: UX Eye - From Idea to Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052909/559759971a28ab9e3c8b47da/html5/thumbnails/28.jpg)
Lead Database
Lead Database
Segmentations
New Smart List
New List
Import List
New Lead
New Segmentation
Notes:
![Page 29: UX Eye - From Idea to Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052909/559759971a28ab9e3c8b47da/html5/thumbnails/29.jpg)
New Segmentation
CancelSave
Order SegmentAdd Segment
Segments
Resolve overlapping segments. Cannot have ties.
Start with one empty choice + default
Validation:Names unique w/i segmentation. Must have ONE minimum
No warning for rename of segments; update label wherever used
Name: Industry
Description:Core industry segments
Define By: Rules
2. Big Finance
3. Small Finance
Default Default
Health1.
Should add row at the top
![Page 30: UX Eye - From Idea to Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052909/559759971a28ab9e3c8b47da/html5/thumbnails/30.jpg)
![Page 31: UX Eye - From Idea to Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052909/559759971a28ab9e3c8b47da/html5/thumbnails/31.jpg)
THE DECISIONS PART
![Page 32: UX Eye - From Idea to Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052909/559759971a28ab9e3c8b47da/html5/thumbnails/32.jpg)
All the Decisions!
![Page 33: UX Eye - From Idea to Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052909/559759971a28ab9e3c8b47da/html5/thumbnails/33.jpg)
Other decisions
Decisionsthat matter
![Page 34: UX Eye - From Idea to Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052909/559759971a28ab9e3c8b47da/html5/thumbnails/34.jpg)
Why we disagree
![Page 35: UX Eye - From Idea to Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052909/559759971a28ab9e3c8b47da/html5/thumbnails/35.jpg)
Different Data
![Page 36: UX Eye - From Idea to Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052909/559759971a28ab9e3c8b47da/html5/thumbnails/36.jpg)
Different Assumptions
![Page 37: UX Eye - From Idea to Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052909/559759971a28ab9e3c8b47da/html5/thumbnails/37.jpg)
Optimization Difference
![Page 38: UX Eye - From Idea to Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052909/559759971a28ab9e3c8b47da/html5/thumbnails/38.jpg)
Its Personal
![Page 39: UX Eye - From Idea to Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052909/559759971a28ab9e3c8b47da/html5/thumbnails/39.jpg)
Don’t wait until its too late
![Page 40: UX Eye - From Idea to Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052909/559759971a28ab9e3c8b47da/html5/thumbnails/40.jpg)
The cutting room floor
![Page 41: UX Eye - From Idea to Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052909/559759971a28ab9e3c8b47da/html5/thumbnails/41.jpg)
Pick your battles
![Page 42: UX Eye - From Idea to Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052909/559759971a28ab9e3c8b47da/html5/thumbnails/42.jpg)
Lay on the tracks
![Page 43: UX Eye - From Idea to Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052909/559759971a28ab9e3c8b47da/html5/thumbnails/43.jpg)
DESIGN PRINCIPLES
![Page 44: UX Eye - From Idea to Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052909/559759971a28ab9e3c8b47da/html5/thumbnails/44.jpg)
Don’t move the cheese
![Page 45: UX Eye - From Idea to Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052909/559759971a28ab9e3c8b47da/html5/thumbnails/45.jpg)
Strive for consistency
![Page 46: UX Eye - From Idea to Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052909/559759971a28ab9e3c8b47da/html5/thumbnails/46.jpg)
Strive for consistency
![Page 47: UX Eye - From Idea to Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052909/559759971a28ab9e3c8b47da/html5/thumbnails/47.jpg)
Don’t ask the user
![Page 48: UX Eye - From Idea to Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052909/559759971a28ab9e3c8b47da/html5/thumbnails/48.jpg)
UX Eng
PM
UX sits with Eng
![Page 49: UX Eye - From Idea to Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052909/559759971a28ab9e3c8b47da/html5/thumbnails/49.jpg)
Design is the details
![Page 50: UX Eye - From Idea to Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052909/559759971a28ab9e3c8b47da/html5/thumbnails/50.jpg)
% Complete
De
sign
Gra
nu
lari
ty
The Long Tail Part
The Design Part
The Idea Part
Stages of Design
![Page 51: UX Eye - From Idea to Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052909/559759971a28ab9e3c8b47da/html5/thumbnails/51.jpg)
QUESTIONS?
Glen Lipka
Vice President, User eXperience
Marketo
• http://commadot.com
• @glenlipka
• http://linkedin.com/in/glenlipka