UXD / DNA - DesignMap, Inc.

105
UXD / DNA #LEANUXSF #DMPLAYBOOK

description

Making UXD part of your company's DNA

Transcript of UXD / DNA - DesignMap, Inc.

Page 1: UXD / DNA - DesignMap, Inc.

UXD / DNA#LEANUXSF #DMPLAYBOOK

Page 2: UXD / DNA - DesignMap, Inc.

Making UXD, part of your company’s DNA.

(HOPEFULLY, I’M AT THE RIGHT MEETUP)

UXD / DNA August 8, 2013

Page 3: UXD / DNA - DesignMap, Inc.

Talk Q&AApply

30m 30m30m

Page 4: UXD / DNA - DesignMap, Inc.

DNA (noun)

The fundamental and distinctive characteristics or qualities of someone or something,

NEW OXFORD AMERICAN DICTIONARY

UXD / DNA August 8, 2013

Page 5: UXD / DNA - DesignMap, Inc.

DNA

esp. when regarded as unchangeable: diversity is part of the company’s DNA

NEW OXFORD AMERICAN DICTIONARY

UXD / DNA August 8, 2013

Page 6: UXD / DNA - DesignMap, Inc.

DNA

...men just don’t get shopping— it’s not in our DNA.

NEW OXFORD AMERICAN DICTIONARY

UXD / DNA August 8, 2013

Page 7: UXD / DNA - DesignMap, Inc.
Page 8: UXD / DNA - DesignMap, Inc.
Page 9: UXD / DNA - DesignMap, Inc.
Page 10: UXD / DNA - DesignMap, Inc.

Buy $1.99$

Page 11: UXD / DNA - DesignMap, Inc.

Buy $0.99$50% OFFTODAY ONLY!

Page 12: UXD / DNA - DesignMap, Inc.

Not a primer on UXD.

Not about Design Process.

UXD / DNA August 8, 2013

Page 13: UXD / DNA - DesignMap, Inc.

The Playbook (in progress...)

A method to reduce churn, reveal opportunity, and plan resources.

UXD / DNA August 8, 2013

Page 14: UXD / DNA - DesignMap, Inc.

As a designer...

we’ve pointed a way to integrate design into your organization.

(PREACHING TO THE CHOIR)

UXD / DNA August 8, 2013

Page 15: UXD / DNA - DesignMap, Inc.

Founder / product / developer...

we’ve pointed a way to integrate design into your organization.

(YEP, IT’S THE SAME LESSON!)

UXD / DNA August 8, 2013

Page 16: UXD / DNA - DesignMap, Inc.

The Venn Diagram

User

Business

Technology

“the Product”

UXD / DNA August 8, 2013

Page 17: UXD / DNA - DesignMap, Inc.

The cycle of frustration

Page 18: UXD / DNA - DesignMap, Inc.

A story about iteration.

(...or is it?)

UXD / DNA August 8, 2013

Page 19: UXD / DNA - DesignMap, Inc.

So basically, it’s like Flickr for Pilots

Page 20: UXD / DNA - DesignMap, Inc.

we need a Flat UI like this one on dribbble.com

So basically, it’s like Flickr for Pilots

Page 21: UXD / DNA - DesignMap, Inc.

So basically, it’s like Flickr for Pilots

we need a Flat UI like this one on dribbble.com

we’re going mobile first

Page 22: UXD / DNA - DesignMap, Inc.

So basically, it’s like Flickr for Pilots

we need a Flat UI like this one on dribbble.com

Where’s the CSS? The team in Russia needs it.

we’re going mobile first

Page 23: UXD / DNA - DesignMap, Inc.

we need a Flat UI like this one on dribbble.com

Where’s the CSS? The team in Russia needs it.

we’re going mobile first

it’s like Instagram for Policemen who take Selfies

Page 24: UXD / DNA - DesignMap, Inc.

:-/

Page 25: UXD / DNA - DesignMap, Inc.
Page 26: UXD / DNA - DesignMap, Inc.

There has to be a better way...

“The User Experience” versus “User Experience Design”

(I’M ABOUT TO BRING IT OLD-SCHOOL)

UXD / DNA August 8, 2013

Page 27: UXD / DNA - DesignMap, Inc.
Page 28: UXD / DNA - DesignMap, Inc.

Strategy is where it all begins: What do we want to get out of the site? What do our users want?

Page 29: UXD / DNA - DesignMap, Inc.

Scope transforms strategy into requirements: What features will the site need to include?

Page 30: UXD / DNA - DesignMap, Inc.

Structure gives shape to scope: How will the pieces of the site fit together and behave?

Page 31: UXD / DNA - DesignMap, Inc.

Skeleton makes structure concrete: What components will enable people to use the site?

Page 32: UXD / DNA - DesignMap, Inc.

Surface brings everything together visually: What will the finished product look like?

Page 33: UXD / DNA - DesignMap, Inc.

“UX Design”

SurfaceSkeletonStructureScopeStrategy

Page 34: UXD / DNA - DesignMap, Inc.
Page 35: UXD / DNA - DesignMap, Inc.

Jeff Patton “User Experience Distilled” 2008

Page 36: UXD / DNA - DesignMap, Inc.

SurfaceSkeletonStructureScopeStrategy

“UX Design”

Tools

TasksGoals

Page 37: UXD / DNA - DesignMap, Inc.

Tools

Tasks

Goals

Page 38: UXD / DNA - DesignMap, Inc.

Requirements

Features

Business model

Tools

Tasks

Goals

Product

Page 39: UXD / DNA - DesignMap, Inc.

Screen layoutRequirements

User flowFeatures

User researchBusiness model

Tools

Tasks

Goals

Product UX Design

Page 40: UXD / DNA - DesignMap, Inc.

Screen layoutRequirements Frontend framework

User flowFeatures Application logic

User researchBusiness model Technical architecture

Tools

Tasks

Goals

Product UX Design Development

Page 41: UXD / DNA - DesignMap, Inc.

PrototypesWireframesVisualsGuidelines

User StoriesAcceptance Criteria

Use CasesTest PlansCSS / JS FrameworkWidget Library

User & Task FlowsNavigationInteraction

EpicsFeature Prioritization

Application LogicSprints

ResearchPersonas & ScenariosMental & Task Models

Business ModelRelease ScheduleRevenue Model

Platform ArchitectureScalability / Performance

Tools

Tasks

Goals

Product UX Design Development

Page 42: UXD / DNA - DesignMap, Inc.

Tools

Tasks

Goals

Page 43: UXD / DNA - DesignMap, Inc.

Back to ending the cycle of frustration...

UXD / DNA August 8, 2013

Page 44: UXD / DNA - DesignMap, Inc.

Short!

1. Think!2. Make!3. Check!1

2

3

UXD / DNA August 8, 2013

Page 45: UXD / DNA - DesignMap, Inc.

Jeff Patton Change the World

Janice Fraser Learning Loops

Page 46: UXD / DNA - DesignMap, Inc.

Goals

UXD / DNA August 8, 2013

Page 47: UXD / DNA - DesignMap, Inc.

Tasks

Goals

UXD / DNA August 8, 2013

Page 48: UXD / DNA - DesignMap, Inc.

Tools

Tasks

Goals

UXD / DNA August 8, 2013

Page 49: UXD / DNA - DesignMap, Inc.

Tools

Tasks

Goals

Product UX Design Development

Page 50: UXD / DNA - DesignMap, Inc.

Tools

Tasks

Goals

Product UX Design Development

Page 51: UXD / DNA - DesignMap, Inc.
Page 52: UXD / DNA - DesignMap, Inc.

Screen layout

User flow

User research

UX Design

User stories Frontend framework

Features Application logic

Business model Technical architecture

Tools

Tasks

Goals

Product Development

Page 53: UXD / DNA - DesignMap, Inc.

Incorporating UX Design

Page 54: UXD / DNA - DesignMap, Inc.

A discipline, not just a position.

“User Experience Design”

“Product Management”

“Software Development”

“the Company”

UXD / DNA August 8, 2013

Page 55: UXD / DNA - DesignMap, Inc.

If you need a primer, and only have 30 minutes, read this:

A guide for non-designers by Wells Riley.

startupsthisishowdesignworks.com

UXD / DNA August 8, 2013

Page 56: UXD / DNA - DesignMap, Inc.

78 CEOs, marketers, engineers, and designers...

78% said their product was well designed.

81% said designers belong on the founding team.

Page 57: UXD / DNA - DesignMap, Inc.

Hire.Contract.Studio.Agency.

Page 58: UXD / DNA - DesignMap, Inc.

Hiring design staff:

Know what you’re looking for.Get a design advisor.Use multiple recruiters.

Page 59: UXD / DNA - DesignMap, Inc.
Page 60: UXD / DNA - DesignMap, Inc.

Advertising for the Unicorn will prevent you from getting the smart candidates, and attract the wrong ones.

Hard Skills / Soft Skills

Braden Kowitzdesignstaff.org/

Jared Spooluie.com/articles/assessing_ux_teams/

Page 61: UXD / DNA - DesignMap, Inc.

“Hard skills” are UXD-specific competencies such as tools, methods, deliverables, and processes.

“Soft skills” are skills that might apply to any role or job. They include planning, working with others, empathy, principles, and being effective and efficient.

Page 62: UXD / DNA - DesignMap, Inc.
Page 63: UXD / DNA - DesignMap, Inc.

Alex Cornelltheworstportfolioever.com

Page 64: UXD / DNA - DesignMap, Inc.

Best worst portfolio ever.

Look for their personal story of design, approach to problem solving.

Bonus points for details. Minus for jargon. Pictures, not words.

Page 65: UXD / DNA - DesignMap, Inc.

Hiring design staff:

Craft your UXD story.Act fast: Review and Interview.Commit: Product & Engineering

UXD / DNA August 8, 2013

Page 66: UXD / DNA - DesignMap, Inc.
Page 67: UXD / DNA - DesignMap, Inc.
Page 68: UXD / DNA - DesignMap, Inc.
Page 69: UXD / DNA - DesignMap, Inc.

if you have to choose between...

TALENTFITEmphasize overall personality fit.

EXPERIENCEFLEXIBILITYAbility to adjust on-the-fly.

VISIONARYHUMILITY

Is this too obvious?

Page 70: UXD / DNA - DesignMap, Inc.

if you really can’t decide...

Page 71: UXD / DNA - DesignMap, Inc.

What you’re assessing:• how they solve problems.

• how they ask questions.

• how they make progress with limited information.

• their ability to create intuitive interfaces.

Page 72: UXD / DNA - DesignMap, Inc.

Hire.Contract.Studio.Agency.

Page 73: UXD / DNA - DesignMap, Inc.

Design Contractors:

Tactical and narrow focus.Low investment.Non-contiguous activities.

UXD / DNA August 8, 2013

Page 74: UXD / DNA - DesignMap, Inc.

PrototypesWireframesVisualsGuidelines

User StoriesAcceptance Criteria

Use CasesTest PlansCSS / JS FrameworkWidget Library

User & Task FlowsNavigationInteraction

EpicsFeature Prioritization

Application LogicSprints

ResearchPersonas & ScenariosMental & Task Models

Business ModelRelease ScheduleRevenue Model

Platform ArchitectureScalability / Performance

Tools

Tasks

Goals

Product UX Design Development

ContractorVisuals

Page 75: UXD / DNA - DesignMap, Inc.

UX Consultants:

“One-person Band.”Thin slice approach.Committed, but only for so long.

UXD / DNA August 8, 2013

Page 76: UXD / DNA - DesignMap, Inc.

User StoriesAcceptance Criteria

Use CasesTest PlansCSS / JS FrameworkWidget Library

EpicsFeature Prioritization

Application LogicSprints

ResearchPersonas & ScenariosMental & Task Models

Business ModelRelease ScheduleRevenue Model

Platform ArchitectureScalability / Performance

Tools

Tasks

Goals

Product UX Design Development

UX Consultant

PrototypesWireframesVisualsGuidelines

User & Task FlowsNavigationInteraction

Page 77: UXD / DNA - DesignMap, Inc.

Hire.Contract.Studio.Agency.

Page 78: UXD / DNA - DesignMap, Inc.

Design Studio:

5–50 design staff.Integrates into your team.Outcome, not deliverable driven.

UXD / DNA August 8, 2013

Page 79: UXD / DNA - DesignMap, Inc.

User StoriesAcceptance Criteria

Use CasesTest PlansCSS / JS FrameworkWidget Library

EpicsFeature Prioritization

Application LogicSprints

Business ModelRelease ScheduleRevenue Model

Platform ArchitectureScalability / Performance

Tools

Tasks

Goals

Product Development

PrototypesWireframesVisualsGuidelines

User & Task FlowsNavigationInteraction

ResearchPersonas & ScenariosMental & Task Models

UX Design

Studio

Page 80: UXD / DNA - DesignMap, Inc.

“Studio Effect”100’s of tools & activities

Page 81: UXD / DNA - DesignMap, Inc.

Hire.Contract.Studio.Agency.

Page 82: UXD / DNA - DesignMap, Inc.

Agency:

Multi-discipline staff.Absolute industry expertise.Lots of money, little time.

UXD / DNA August 8, 2013

Page 83: UXD / DNA - DesignMap, Inc.

Agency:

“All-in strategy” They lead, you follow.Replacement for UX, Biz, or Dev.

UXD / DNA August 8, 2013

Page 84: UXD / DNA - DesignMap, Inc.

EpicsFeature Prioritization

Business ModelRelease ScheduleRevenue Model

Tools

Tasks

Goals

PrototypesWireframesVisualsGuidelines

User StoriesAcceptance Criteria

Use CasesTest PlansCSS / JS FrameworkWidget Library

User & Task FlowsNavigationInteraction

Application LogicSprints

ResearchPersonas & ScenariosMental & Task Models

Platform ArchitectureScalability / Performance

Product UX Design Development

Agency

Page 85: UXD / DNA - DesignMap, Inc.

IDEO has deep expertise in healthcare, 7 years from start to hospital open, with disciplines across interior design, architecture, branding, contextual research, and more.

Page 86: UXD / DNA - DesignMap, Inc.

Finally, thePlaybook!

Page 87: UXD / DNA - DesignMap, Inc.

:-/

Page 88: UXD / DNA - DesignMap, Inc.

:-/:-/Phase 0 Phase 1 Phase 2 Phase 3

Page 89: UXD / DNA - DesignMap, Inc.

PrototypesWireframesVisualsGuidelines

User StoriesAcceptance Criteria

Use CasesTest PlansCSS / JS FrameworkWidget Library

User & Task FlowsNavigationInteraction

EpicsFeature Prioritization

Application LogicSprints

ResearchPersonas & ScenariosMental & Task Models

Business ModelRelease ScheduleRevenue Model

Platform ArchitectureScalability / Performance

Tools

Tasks

Goals

Product UX Design Development

Page 90: UXD / DNA - DesignMap, Inc.

Early stage PivotEnhancementNext generation

Page 91: UXD / DNA - DesignMap, Inc.

Tools

Tasks

Goals

Product UX Design Development

Page 92: UXD / DNA - DesignMap, Inc.

Tools

Tasks

Goals

Product UX Design Development

Page 93: UXD / DNA - DesignMap, Inc.

Tools

Tasks

Goals

Product UX Design Development

!

Page 94: UXD / DNA - DesignMap, Inc.

Tools

Tasks

Goals

Product UX Design Development

!

Page 95: UXD / DNA - DesignMap, Inc.

:-/

Page 96: UXD / DNA - DesignMap, Inc.

Tools

Tasks

Goals

Product UX Design Development

Page 97: UXD / DNA - DesignMap, Inc.

Tools

Tasks

Goals

Product UX Design Development

Page 98: UXD / DNA - DesignMap, Inc.

Tools

Tasks

Goals

Product UX Design Development

Page 99: UXD / DNA - DesignMap, Inc.

Tools

Tasks

Goals

Product UX Design Development

Page 100: UXD / DNA - DesignMap, Inc.

Tools

Tasks

Goals

Product UX Design Development

Page 101: UXD / DNA - DesignMap, Inc.

Tools

Tasks

Goals

Product UX Design Development

Page 102: UXD / DNA - DesignMap, Inc.

!

Tools

Tasks

Goals

Product UX Design Development

Page 103: UXD / DNA - DesignMap, Inc.

:-)

Page 104: UXD / DNA - DesignMap, Inc.

Q&A Roundtable

Try Your Own Playbook!

Page 105: UXD / DNA - DesignMap, Inc.

PrototypesWireframesVisualsGuidelines

User StoriesAcceptance Criteria

Use CasesTest PlansCSS / JS FrameworkWidget Library

User & Task FlowsNavigationInteraction

EpicsFeature Prioritization

Application LogicSprints

ResearchPersonas & ScenariosMental & Task Models

Business ModelRelease ScheduleRevenue Model

Platform ArchitectureScalability / Performance

Tools

Tasks

Goals

Product UX Design Development