UXD OMG WTF BBQ

Eric Bell
Director of Product Design, Rakuten Manga

@ericthebell | #createTogether

Oct 6, 2015
What are you doing here?
No seriously what is this talk about

What is User Experience Design process

1 So many words ಠ_ಠ 3 Breaking it down

Skills and roles Frameworks

2 Balancing the umbrella
4 Where does it fit

@ericthebell #createTogether > ROI of Design

1 Words ಠ_ಠ
Terms & Titles
Semantics
Lean Content Strategist
Service Designer Product Design
Information Architecture
HCI UX Designer
Service Design
Interaction Design
Cross-channel Interaction Designer
UX Researcher
Graphic Design Agile
UX Architect Visual Designer UCD Information Architect
User Research Content Strategy Product Designer
@ericthebell #createTogether > Designer roles in tech
Terms & Titles
In a nutshell
Lean Content Strategist
Service Designer Product Design
Information Architecture
These do all have meaning…
HCI UX Designer
Service Design
Interaction Design …they also vary by organization,
Cross-channel Interaction Designer
industry, geography, and time period.
UX Researcher
Graphic Design Agile
UX Architect Visual Designer UCD
(And you could spend days debating the finer distinctions)
Information Architect
User Research Content Strategy Product Designer
@ericthebell #createTogether > Designer roles in tech
Terms & Titles
In a nutshell
Lean Content Strategist
Service Designer Product Design
Information Architecture
HCI UX Designer
Service Design
So don’t worry too much* about the words
Interaction Design
Cross-channel Interaction Designer
UX Researcher
Graphic Design *Worry about them just a little bit Agile
UX Architect Visual Designer UCD Information Architect
User Research Content Strategy Product Designer
@ericthebell #createTogether > Designer roles in tech
Terms & Titles
Here’s what to remember

design = problem solving

_____ design = solving ____
interaction design = solving intuitive behavior, flows
UI design = solving appearance of the
structure and flow

information architecture = intuitive terms, organization,

findability

@ericthebell #createTogether > Titles and levels of experience

2 The UX Umbrella ☂
What do you do?
I’m glad you asked
I design digital* products and services.

“You mean graphic design?”

Front End Dev Well, that’s a piece of it.

Visual Design “Oh, so then you program?”

Not very often.

“So…what else is there?”

@ericthebell #createTogether > This is how design works

Elements of UX
What else indeed

Implementation How should we build it? Front End

Look & Feel What does it look like? Visual Design

Interactions How will it work? Interaction Design

Structure How is everything organized? Information Architecture

Content What are we communicating? Content Strategy

Users & Business Who is this for…and why? User Research

@ericthebell #createTogether > @JJG's Elements of User Experience

 Product Strategy User Research Information Architecture Interaction Design Visual Design Analytics & Optimization

Front end
> UI is not UX

Web analytics
Attrition flows
A/B/n tests
Graphic design
High fidelity mockup
Scenarios
User flows
Structured brainstorming
Interactive prototype
Paper prototype
Interaction model
Heuristic evaluation
Content inventory
Card sorting
Affinity diagramming
Skills & Teams

Domain model
Ontology
Taxonomy
Wireframes
Content matrix
Personas
Usability testing
Workflow model

@ericthebell #createTogether
Physical model
Skinning a cat
Contextual inquiry
Cultural model
Content strategy
Business goals
Project planning
 Interaction Designer Visual Designer Data scientist Dev

Front end
> Job postings: UI vs UX

Web analytics
Attrition flows
A/B/n tests
Graphic design
High fidelity mockup
Scenarios
User flows
Structured brainstorming
Interactive prototype
Paper prototype
Interaction model
Heuristic evaluation
Content inventory
Card sorting
Information Architect

Affinity diagramming
Skills & Teams

Domain model
Ontology
Taxonomy
Wireframes
Content matrix
Personas
Usability testing

User Researcher
Workflow model

@ericthebell #createTogether
Distributing roles

Physical model
Contextual inquiry
Cultural model

Project Manager
Content strategy
Business goals
Project planning
 Front End Dev

Front end
> Job postings: UI vs UX

Web analytics
Attrition flows
A/B/n tests
Graphic design
High fidelity mockup
Scenarios
User flows
Structured brainstorming
Interactive prototype
Paper prototype
Interaction model
Product Designer

Heuristic evaluation
Content inventory
Card sorting
Affinity diagramming
Skills & Teams

Domain model
Ontology
Taxonomy
Wireframes
Content matrix
Personas
Usability testing
Workflow model

@ericthebell #createTogether
Distributing roles

Physical model
Contextual inquiry
Cultural model

Product Manager
Content strategy
Business goals
Project planning
 Visual Designer Dev

Front end
> Designer salaries

Graphic design
High fidelity mockup
Web analytics
Attrition flows
A/B/n tests
Scenarios
User flows
Structured brainstorming
Interactive prototype
Paper prototype
Interaction model
Heuristic evaluation
Content inventory
Card sorting
Product Manager

Affinity diagramming
Skills & Teams

Domain model
Ontology
Taxonomy
Wireframes
Content matrix
Personas
Usability testing
Workflow model

@ericthebell #createTogether
Distributing roles

Physical model
Contextual inquiry
Cultural model
Content strategy
Business goals
Project planning
 Visual Designer Dev

Front end
> Designer salaries

Graphic design
High fidelity mockup
Web analytics
Attrition flows
A/B/n tests
Scenarios
User flows
Structured brainstorming
Interactive prototype
Paper prototype
Interaction model
Heuristic evaluation
Content inventory
UX Architect

Card sorting
Affinity diagramming
Skills & Teams

Domain model
Ontology
Taxonomy
Wireframes
Content matrix
Personas
Usability testing
Workflow model

@ericthebell #createTogether
Distributing roles

Physical model
Contextual inquiry
Cultural model

Product Manager
Content strategy
Business goals
Project planning
 UX Developer

Front end
> Balanced Team and Holacracy

Web analytics
Attrition flows
A/B/n tests
Graphic design
High fidelity mockup
Scenarios
User flows
Structured brainstorming
Interactive prototype
Paper prototype
Interaction model
Heuristic evaluation
Content inventory
Card sorting
Affinity diagramming
Skills & Teams

Domain model
Ontology
Taxonomy
Wireframes
Content matrix
Personas
Usability testing
Workflow model

@ericthebell #createTogether
Distributing roles

Physical model
Contextual inquiry
Cultural model

Product Manager
Content strategy
Business goals
Project planning
3 Human Centered Design
Design Process
Okay but what does this look like?
scope
plan
observe ideate prototype
observe
feedback / evaluate generate / refine sketch / polish investigate
ideate
narrow
broaden
sketch
contextual inquiry structured brainstorm paper
prototype
personas, scenarios affinity diagram wireframe
feedback
usability test card sort interactive prototype
build
user flow
test
learn build measure
@ericthebell #createTogether > Problem of design
Observe
Watch and learn

Scoping your market

Personas
Who is your audience? Whose problems are you going
to solve? Contextual inquiry
System map
What are your business goals? What are your
motivations and constraints for solving this problem.

Go observe your audience. Wherever they are. Talk to

them and ask questions. Observe their behavior Where
do they have problems and annoyances? This is where
you will find your opportunities.
Heuristic evaluation
@ericthebell #createTogether > Research tactics and tools
Hypothesize
Ideate and evaluate
Sketching
The ideation diamond
Structured brainstorming
How could the system be better? What breakdowns
and frustrations did you find? These pain points are
your opportunities.

How many possible solutions can you think of? Now

Storyboards
take these ideas, group them, and evaluate…which are
most promising? Do it again.

What assumptions do your best ideas make? Each

potential solution is a hypothesis. Identify your biggest
assumptions. User flows
@ericthebell #createTogether > Structured brainstorming
Prototype & Measure
Rinse and repeat

Fast cheap testing Guerrilla user test (3-5 ppl)

What is the simplest way to test the most promising

ideas? Make the quickest and dirtiest prototype to test
your promising solutions. Sketch it on paper. Or maybe
it’s an online form. Or a role-play. Go show it to people.
Prototype (paper, wire, code)
What feedback did you receive? Did the users Qualitative feedback
understand your solution? What problems did they
have, and why? Quantitative analytics

Do it again. Improve your guesses. Make a slightly

higher fidelity prototype. Show it to new people.

@ericthebell #createTogether > Prototyping over documentation

4 Frameworks ⚓
Agile + UX
IANA scrum master

Tenets of Agile. Co-locate, collaboration, sprint

planning, retrospective, repeat. experiment
backlog
Integrating design. Separate research/design/test
sprint ahead of development. (NB: Risk of becoming validated

waterfall.)
delivery
backlog
Dual track scrum. One track focuses on discovery and
prototyping, to create a backlog of validated ideas/
features/products. Parallel delivery track implements new learnings
production. Design works in tandem with both.

@ericthebell #createTogether > Dual track scrum

Lean Startup
Small cheap quick iterations

Tenets of Lean. Identify your biggest assumptions/risks, build, measure, learn

and devise the smallest experiment (MVP) to test,
measure, and validate each hypothesis. Repeat this
build-measure-learn cycle with further experiments as
you develop a product.

Integrating design. Lean itself is a solid design process iterate or new experiment
applied to the whole company. Preach.

@ericthebell #createTogether > Lean UX

 Thanks

Go forth and iterate

@ericthebell | #createTogether
Appendix: Quick reading
Why design https://medium.com/@monteiro/why-you-need- You only need 5 users http://www.nngroup.com/articles/why-you-only-need-to-
design-77dce41e0e0c test-with-5-users/
Designer roles in tech https://bold.pixelapse.com/minming/recruiting-a- Structured brainstorming http://www.fastcompany.com/3033567/agendas/
designer-heres-what-you-should-know brainstorming-doesnt-work-try-this-technique-instead
Design titles and experience http://www.kickerstudio.com/2010/10/design- Ideation double diamond http://www.slideshare.net/peterme/doublediamond-
titles-and-levels-of-experience/ stage
How design works https://startupsthisishowdesignworks.com/ Prototyping over documentation https://uxmag.com/articles/how-prototyping-
Elements of User Experience http://www.jjg.net/elements/pdf/elements.pdf is-replacing-documentation
UI is not UX (roles and skills) http://www.helloerik.com/ux-is-not-ui Prototyping tools chart http://www.cooper.com/prototyping-tools
UI vs UX (semantic hierarchy) http://alexpoole.info/blog/ui-vs-ux/ Dual track agile (case study) https://www.scrumalliance.org/community/articles/
Figuring out designer salaries http://www.gv.com/lib/how-top-startups-pay- 2014/december/dual-track-scrum
designers Dual track agile (diagram) http://productwarrior.com/blog/2015/4/9/eliminate-
Balanced Team http://www.balancedteam.org/ waste-in-your-development-pipeline
Holocracy Holacracy http://www.holacracy.org/ Lean Startup in a nutshell http://theleanstartup.com/principles
Problem of design, process https://uxmag.com/articles/solving-the-problem-of- Lean UX http://www.smashingmagazine.com/2014/01/lean-ux-manifesto-
design-with-karl-ulrich principle-driven-design/
Google product design sprint https://developers.google.com/design-sprint/ Lean UX vs Agile UX http://www.andersramsay.com/2012/04/24/agile-ux-vs-
product/ lean-ux/
Research tactics and tools http://www.uxbooth.com/articles/guerrilla-research- #createTogether http://createtogether.am https://twitter.com/search?q=
tactics-tools/ %23createTogether

@ericthebell #createTogether > Ref