Presentation given to the UX Eye for the Developer Guy Meetup on June 21, 2012

1. FROM IDEA
TO REALITY
Glen Lipka
Vice President, User eXperience
Marketo

2. Google Images

3. Design Granularity
Stages of Design
The Long Tail Part
The Design Part
The Idea Part
% Complete

4. THE IDEA PART

5. I GOTS
AN IDEA!
UH OH
Executive Sponsor UX Designer

6. 2 WORD IDEAS
• Dynamic Content
• Purposeful Duplicates
• Archive Folders
• Spend Management
• Nurture Module
• Scoring Module
• Analytics Home

7. DISCOVERY
• Listen
• Explore
• Imagine
• Empathize

8. Understand the current UX

9. Define the requirements
Not the solution

10. Sketch on paper

12. Sketch on whiteboard

14. Talk it out

15. Let the conversation flow

16. Converge Ideas

17. Conceptual Design

18. THE LONG TAIL PART

19. Computer Time

20. Prototypes
OmniGraffle

25. Dynamic Content Storyboard
Design Specification
Last Updated: October 27, 2011

26. Change Log
Date 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

27. Change Log – Page 2
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

28. Lead Database
New Smart List
Lead Database
New List
Import List
New Lead
New Segmentation
Segmentations
Notes:

29. New Segmentation
Name: Industry
Define By: Rules
Description: Core industry segments
Should add row at the top
Segments
Add Segment
Order Segment
Resolve overlapping Validation:
1. Health
segments. Cannot have ties. Names unique w/i segmentation.
2. Big Finance Must have ONE minimum
3. Small Finance
Default Default
Start with one
empty choice +
default
No warning for rename of
segments; update label Save Cancel
wherever used

31. THE DECISIONS PART

32. All the Decisions!

33. Decisions
that matter
Other decisions

34. Why we disagree

35. Different Data

36. Different Assumptions

37. Optimization Difference

38. Its Personal

39. Don’t wait until its too late

40. The cutting room floor

41. Pick your battles

42. Lay on the tracks

43. DESIGN PRINCIPLES

44. Don’t move the cheese

45. Strive for consistency

46. Strive for consistency

47. Don’t ask the user

48. UX sits with Eng
UX Eng
PM

49. Design is the details

50. Design Granularity
Stages of Design
The Long Tail Part
The Design Part
The Idea Part
% Complete

51. QUESTIONS?
Glen Lipka
Vice President, User eXperience
Marketo
• http://commadot.com
• @glenlipka
• http://linkedin.com/in/glenlipka