FROM IDEA

TO REALITY

Glen Lipka

Vice President, User eXperience

Marketo

Google Images

% Complete

De

sign

Gra

nu

lari

ty

The Long Tail Part

The Design Part

The Idea Part

Stages of Design

THE IDEA PART

I GOTS AN IDEA!

UH OH

Executive Sponsor UX Designer

2 WORD IDEAS

• Dynamic Content

• Purposeful Duplicates

• Archive Folders

• Spend Management

• Nurture Module

• Scoring Module

• Analytics Home

DISCOVERY

• Listen

• Explore

• Imagine

• Empathize

Understand the current UX

Define the requirements

Not the solution

Sketch on paper

Sketch on whiteboard

Talk it out

Let the conversation flow

Converge Ideas

Conceptual Design

THE LONG TAIL PART

Computer Time

Prototypes

OmniGraffle

Dynamic Content StoryboardDesign SpecificationLast Updated: October 27, 2011

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

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

Lead Database

Lead Database

Segmentations

New Smart List

New List

Import List

New Lead

New Segmentation

Notes:

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

THE DECISIONS PART

All the Decisions!

Other decisions

Decisionsthat matter

Why we disagree

Different Data

Different Assumptions

Optimization Difference

Its Personal

Don’t wait until its too late

The cutting room floor

Pick your battles

Lay on the tracks

DESIGN PRINCIPLES

Don’t move the cheese

Strive for consistency

Strive for consistency

Don’t ask the user

UX Eng

PM

UX sits with Eng

Design is the details

% Complete

De

sign

Gra

nu

lari

ty

The Long Tail Part

The Design Part

The Idea Part

Stages of Design

QUESTIONS?

Glen Lipka

Vice President, User eXperience

Marketo

• http://commadot.com

• @glenlipka

• http://linkedin.com/in/glenlipka