The document discusses integrating user experience design (UXD) into a company's DNA. It describes UXD as a discipline that should be incorporated at all levels, from strategy to development. The document provides examples of different models for incorporating UXD such as hiring designers, contracting consultants or studios, or working with agencies. It also presents a playbook for reducing churn, revealing opportunities, and planning resources for UXD.

1. UXD / DNA
#LEANUXSF #DMPLAYBOOK

2. Making UXD, part of
your company’s DNA.
(HOPEFULLY, I’M AT THE RIGHT MEETUP)
UXD / DNA August 8, 2013

3. Talk Q&AApply
30m 30m30m

4. DNA (noun)
The fundamental and distinctive
characteristics or qualities of
someone or something,
NEW OXFORD AMERICAN DICTIONARY
UXD / DNA August 8, 2013

5. DNA
esp. when regarded as
unchangeable: diversity is part
of the company’s DNA
NEW OXFORD AMERICAN DICTIONARY
UXD / DNA August 8, 2013

6. DNA
...men just don’t get shopping—
it’s not in our DNA.
NEW OXFORD AMERICAN DICTIONARY
UXD / DNA August 8, 2013

10. Buy $1.99$

11. Buy $0.99$50% OFF
TODAY ONLY!

12. Not a primer on UXD.
Not about Design Process.
UXD / DNA August 8, 2013

13. The Playbook (in progress...)
A method to reduce churn,
reveal opportunity, and plan
resources.
UXD / DNA August 8, 2013

14. As a designer...
we’ve pointed a way to
integrate design into your
organization.
(PREACHING TO THE CHOIR)
UXD / DNA August 8, 2013

15. 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

16. The Venn Diagram
User
Business
Technology
“the Product”
UXD / DNA August 8, 2013

17. The cycle of
frustration

18. A story about iteration.
(...or is it?)
UXD / DNA August 8, 2013

19. So basically, it’s like
Flickr for Pilots

20. we need a Flat UI like this
one on dribbble.com
So basically, it’s like
Flickr for Pilots

21. So basically, it’s like
Flickr for Pilots
we need a Flat UI like this
one on dribbble.com
we’re going mobile first

22. 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

23. 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

24. :-/

26. 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

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

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

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

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

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

33. “UX Design”
Surface
Skeleton
Structure
Scope
Strategy

35. Jeff Patton
“User Experience Distilled” 2008

36. Surface
Skeleton
Structure
Scope
Strategy
“UX Design”
Tools
Tasks
Goals

37. Tools
Tasks
Goals

38. Requirements
Features
Business model
Tools
Tasks
Goals
Product

39. Screen layoutRequirements
User flowFeatures
User researchBusiness model
Tools
Tasks
Goals
Product UX Design

40. Screen layoutRequirements Frontend framework
User flowFeatures Application logic
User researchBusiness model Technical architecture
Tools
Tasks
Goals
Product UX Design Development

41. Prototypes
Wireframes
Visuals
Guidelines
User Stories
Acceptance Criteria
Use Cases
Test Plans
CSS / JS Framework
Widget Library
User & Task Flows
Navigation
Interaction
Epics
Feature Prioritization
Application Logic
Sprints
Research
Personas & Scenarios
Mental & Task Models
Business Model
Release Schedule
Revenue Model
Platform Architecture
Scalability / Performance
Tools
Tasks
Goals
Product UX Design Development

42. Tools
Tasks
Goals

43. Back to ending the cycle of
frustration...
UXD / DNA August 8, 2013

44. Short!
1. Think!
2. Make!
3. Check!
1
2
3
UXD / DNA August 8, 2013

45. Jeff Patton
Change the World
Janice Fraser
Learning Loops

46. Goals
UXD / DNA August 8, 2013

47. Tasks
Goals
UXD / DNA August 8, 2013

48. Tools
Tasks
Goals
UXD / DNA August 8, 2013

49. Tools
Tasks
Goals
Product UX Design Development

50. Tools
Tasks
Goals
Product UX Design Development

52. Screen layout
User flow
User research
UX Design
User stories Frontend framework
Features Application logic
Business model Technical architecture
Tools
Tasks
Goals
Product Development

53. Incorporating
UX Design

54. A discipline, not just a position.
“User Experience Design”
“Product Management”
“Software Development”
“the Company”
UXD / DNA August 8, 2013

55. If you need a primer,
and only have 30
minutes, read this:
A guide for
non-designers by
Wells Riley.
startupsthisishow
designworks.com
UXD / DNA August 8, 2013

56. 78 CEOs,
marketers,
engineers, and
designers...
78% said their
product was well
designed.
81% said
designers belong
on the founding
team.

57. Hire.
Contract.
Studio.
Agency.

58. Hiring design staff:
Know what you’re looking for.
Get a design advisor.
Use multiple recruiters.

60. Advertising for the Unicorn will
prevent you from getting the
smart candidates, and attract
the wrong ones.
Hard Skills / Soft Skills
Braden Kowitz
designstaff.org/
Jared Spool
uie.com/articles/assessing_ux_teams/

61. “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.

63. Alex Cornell
theworstportfolioever.com

64. 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.

65. Hiring design staff:
Craft your UXD story.
Act fast: Review and Interview.
Commit: Product & Engineering
UXD / DNA August 8, 2013

69. if you have to choose between...
TALENTFIT
Emphasize overall personality fit.
EXPERIENCEFLEXIBILITY
Ability to adjust on-the-fly.
VISIONARYHUMILITY
Is this too obvious?

70. if you really can’t decide...

71. 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.

72. Hire.
Contract.
Studio.
Agency.

73. Design Contractors:
Tactical and narrow focus.
Low investment.
Non-contiguous activities.
UXD / DNA August 8, 2013

74. Prototypes
Wireframes
Visuals
Guidelines
User Stories
Acceptance Criteria
Use Cases
Test Plans
CSS / JS Framework
Widget Library
User & Task Flows
Navigation
Interaction
Epics
Feature Prioritization
Application Logic
Sprints
Research
Personas & Scenarios
Mental & Task Models
Business Model
Release Schedule
Revenue Model
Platform Architecture
Scalability / Performance
Tools
Tasks
Goals
Product UX Design Development
Contractor
Visuals

75. UX Consultants:
“One-person Band.”
Thin slice approach.
Committed, but only for so long.
UXD / DNA August 8, 2013

76. User Stories
Acceptance Criteria
Use Cases
Test Plans
CSS / JS Framework
Widget Library
Epics
Feature Prioritization
Application Logic
Sprints
Research
Personas & Scenarios
Mental & Task Models
Business Model
Release Schedule
Revenue Model
Platform Architecture
Scalability / Performance
Tools
Tasks
Goals
Product UX Design Development
UX Consultant
Prototypes
Wireframes
Visuals
Guidelines
User & Task Flows
Navigation
Interaction

77. Hire.
Contract.
Studio.
Agency.

78. Design Studio:
5–50 design staff.
Integrates into your team.
Outcome, not deliverable driven.
UXD / DNA August 8, 2013

79. User Stories
Acceptance Criteria
Use Cases
Test Plans
CSS / JS Framework
Widget Library
Epics
Feature Prioritization
Application Logic
Sprints
Business Model
Release Schedule
Revenue Model
Platform Architecture
Scalability / Performance
Tools
Tasks
Goals
Product Development
Prototypes
Wireframes
Visuals
Guidelines
User & Task Flows
Navigation
Interaction
Research
Personas & Scenarios
Mental & Task Models
UX Design
Studio

80. “Studio Effect”
100’s of tools & activities

81. Hire.
Contract.
Studio.
Agency.

82. Agency:
Multi-discipline staff.
Absolute industry expertise.
Lots of money, little time.
UXD / DNA August 8, 2013

83. Agency:
“All-in strategy”
They lead, you follow.
Replacement for UX, Biz, or Dev.
UXD / DNA August 8, 2013

84. Epics
Feature Prioritization
Business Model
Release Schedule
Revenue Model
Tools
Tasks
Goals
Prototypes
Wireframes
Visuals
Guidelines
User Stories
Acceptance Criteria
Use Cases
Test Plans
CSS / JS Framework
Widget Library
User & Task Flows
Navigation
Interaction
Application Logic
Sprints
Research
Personas & Scenarios
Mental & Task Models
Platform Architecture
Scalability / Performance
Product UX Design Development
Agency

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

86. Finally, the
Playbook!

87. :-/

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

89. Prototypes
Wireframes
Visuals
Guidelines
User Stories
Acceptance Criteria
Use Cases
Test Plans
CSS / JS Framework
Widget Library
User & Task Flows
Navigation
Interaction
Epics
Feature Prioritization
Application Logic
Sprints
Research
Personas & Scenarios
Mental & Task Models
Business Model
Release Schedule
Revenue Model
Platform Architecture
Scalability / Performance
Tools
Tasks
Goals
Product UX Design Development

90. Early stage
Pivot
Enhancement
Next generation

91. Tools
Tasks
Goals
Product UX Design Development

92. Tools
Tasks
Goals
Product UX Design Development

93. Tools
Tasks
Goals
Product UX Design Development
!

94. Tools
Tasks
Goals
Product UX Design Development
!

95. :-/

96. Tools
Tasks
Goals
Product UX Design Development

97. Tools
Tasks
Goals
Product UX Design Development

98. Tools
Tasks
Goals
Product UX Design Development

99. Tools
Tasks
Goals
Product UX Design Development

100. Tools
Tasks
Goals
Product UX Design Development

101. Tools
Tasks
Goals
Product UX Design Development

102. !
Tools
Tasks
Goals
Product UX Design Development

103. :-)

104. Q&A Roundtable
Try Your Own
Playbook!

105. Prototypes
Wireframes
Visuals
Guidelines
User Stories
Acceptance Criteria
Use Cases
Test Plans
CSS / JS Framework
Widget Library
User & Task Flows
Navigation
Interaction
Epics
Feature Prioritization
Application Logic
Sprints
Research
Personas & Scenarios
Mental & Task Models
Business Model
Release Schedule
Revenue Model
Platform Architecture
Scalability / Performance
Tools
Tasks
Goals
Product UX Design Development