Top Banner
FROM IDEA TO REALITY Glen Lipka Vice President, User eXperience Marketo
51

UX Eye - From Idea to Reality

Jul 04, 2015

Download

Design

Glen Lipka

Presentation given to the UX Eye for the Developer Guy Meetup on June 21, 2012
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: UX Eye - From Idea to Reality

FROM IDEA

TO REALITY

Glen Lipka

Vice President, User eXperience

Marketo

Page 2: UX Eye - From Idea to Reality

Google Images

Page 3: UX Eye - From Idea to Reality

% 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

THE IDEA PART

Page 5: UX Eye - From Idea to Reality

I GOTS AN IDEA!

UH OH

Executive Sponsor UX Designer

Page 6: UX Eye - From Idea to Reality

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

DISCOVERY

• Listen

• Explore

• Imagine

• Empathize

Page 8: UX Eye - From Idea to Reality

Understand the current UX

Page 9: UX Eye - From Idea to Reality

Define the requirements

Not the solution

Page 10: UX Eye - From Idea to Reality

Sketch on paper

Page 11: UX Eye - From Idea to Reality
Page 12: UX Eye - From Idea to Reality

Sketch on whiteboard

Page 13: UX Eye - From Idea to Reality
Page 14: UX Eye - From Idea to Reality

Talk it out

Page 15: UX Eye - From Idea to Reality

Let the conversation flow

Page 16: UX Eye - From Idea to Reality

Converge Ideas

Page 17: UX Eye - From Idea to Reality

Conceptual Design

Page 18: UX Eye - From Idea to Reality

THE LONG TAIL PART

Page 19: UX Eye - From Idea to Reality

Computer Time

Page 20: UX Eye - From Idea to Reality

Prototypes

OmniGraffle

Page 21: UX Eye - From Idea to Reality
Page 22: UX Eye - From Idea to Reality
Page 23: UX Eye - From Idea to Reality
Page 24: UX Eye - From Idea to Reality
Page 25: UX Eye - From Idea to Reality

Dynamic Content StoryboardDesign SpecificationLast Updated: October 27, 2011

Page 26: UX Eye - From Idea to Reality

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

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

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

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
Page 31: UX Eye - From Idea to Reality

THE DECISIONS PART

Page 32: UX Eye - From Idea to Reality

All the Decisions!

Page 33: UX Eye - From Idea to Reality

Other decisions

Decisionsthat matter

Page 34: UX Eye - From Idea to Reality

Why we disagree

Page 35: UX Eye - From Idea to Reality

Different Data

Page 36: UX Eye - From Idea to Reality

Different Assumptions

Page 37: UX Eye - From Idea to Reality

Optimization Difference

Page 38: UX Eye - From Idea to Reality

Its Personal

Page 39: UX Eye - From Idea to Reality

Don’t wait until its too late

Page 40: UX Eye - From Idea to Reality

The cutting room floor

Page 41: UX Eye - From Idea to Reality

Pick your battles

Page 42: UX Eye - From Idea to Reality

Lay on the tracks

Page 43: UX Eye - From Idea to Reality

DESIGN PRINCIPLES

Page 44: UX Eye - From Idea to Reality

Don’t move the cheese

Page 45: UX Eye - From Idea to Reality

Strive for consistency

Page 46: UX Eye - From Idea to Reality

Strive for consistency

Page 47: UX Eye - From Idea to Reality

Don’t ask the user

Page 48: UX Eye - From Idea to Reality

UX Eng

PM

UX sits with Eng

Page 49: UX Eye - From Idea to Reality

Design is the details

Page 50: UX Eye - From Idea to Reality

% 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

QUESTIONS?

Glen Lipka

Vice President, User eXperience

Marketo

• http://commadot.com

• @glenlipka

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