ux design breakdown and q&a session @ #createtogether

26
UXD OMG WTF BBQ Eric Bell Director of Product Design, Rakuten Manga @ericthebell | #createTogether Oct 6, 2015

Upload: eric-bell

Post on 23-Feb-2017

2.355 views

Category:

Design


3 download

TRANSCRIPT

Page 1: UX Design breakdown and Q&A session @ #createTogether

UXD OMG WTF BBQEric Bell

Director of Product Design, Rakuten Manga

@ericthebell | #createTogether

Oct 6, 2015

Page 2: UX Design breakdown and Q&A session @ #createTogether

@ericthebell #createTogether

Roboto skill lists Economica skill headers

What are you doing here?No seriously what is this talk about

> ROI of Design

What is User Experience So many words ಠ_ಠ

Skills and roles Balancing the umbrella

Design processBreaking it down1

2

3

Frameworks Where does it fit4

Page 3: UX Design breakdown and Q&A session @ #createTogether

Words 1 ಠ_ಠ

Page 4: UX Design breakdown and Q&A session @ #createTogether

@ericthebell #createTogether

Roboto skill lists Economica skill headers

Terms & TitlesSemantics

> Designer roles in tech

HCI

UCD

Lean

AgileInteraction Designer

Information Architect

UX Designer

Product Designer

Visual Designer

Content StrategistService Designer

UX Researcher

UX Architect

Cross-channel

Service Design

Content StrategyUser Research

Information Architecture

Graphic Design

Product Design

Interaction Design

Page 5: UX Design breakdown and Q&A session @ #createTogether

@ericthebell #createTogether

Roboto skill lists Economica skill headers

HCI

UCD

Lean

AgileInteraction Designer

Information Architect

UX Designer

Product Designer

Visual Designer

Content StrategistService Designer

UX Researcher

UX Architect

Cross-channel

Service Design

Content StrategyUser Research

Information Architecture

Graphic Design

Product Design

Interaction Design

Terms & TitlesIn a nutshell

> Designer roles in tech

These do all have meaning…

…they also vary by organization, industry, geography, and time period.

(And you could spend days debating the finer distinctions)

Page 6: UX Design breakdown and Q&A session @ #createTogether

@ericthebell #createTogether

Roboto skill lists Economica skill headers

HCI

UCD

Lean

AgileInteraction Designer

Information Architect

UX Designer

Product Designer

Visual Designer

Content StrategistService Designer

UX Researcher

UX Architect

Cross-channel

Service Design

Content StrategyUser Research

Information Architecture

Graphic Design

Product Design

Interaction Design

Terms & TitlesIn a nutshell

> Designer roles in tech

*Worry about them just a little bit

So don’t worry too much* about the words

Page 7: UX Design breakdown and Q&A session @ #createTogether

@ericthebell #createTogether

Roboto skill lists Economica skill headers

Terms & TitlesHere’s what to remember

design = problem solving

> Titles and levels of experience

=_____ design solving ____

=interaction design solving intuitive behavior, flows

=UI design solving appearance of the structure and flow

=information architecture intuitive terms, organization, findability

Page 8: UX Design breakdown and Q&A session @ #createTogether

The UX Umbrella2 ☂

Page 9: UX Design breakdown and Q&A session @ #createTogether

@ericthebell #createTogether

Roboto skill lists Economica skill headers

Visual Design

What do you do?I’m glad you asked

> This is how design works

I design digital* products and services.

“You mean graphic design?”

Well, that’s a piece of it.

“Oh, so then you program?”

Not very often.

“So…what else is there?”

Front End Dev

Page 10: UX Design breakdown and Q&A session @ #createTogether

@ericthebell #createTogether

Roboto skill lists Economica skill headers

Users & Business

Content

Structure

Interactions

Elements of UXWhat else indeed

> @JJG's Elements of User Experience

Look & Feel

Implementation How should we build it?

What does it look like?

How will it work?

How is everything organized?

What are we communicating?

Front End

Visual Design

Interaction Design

Information Architecture

Content Strategy

Who is this for…and why? User Research

Page 11: UX Design breakdown and Q&A session @ #createTogether

@ericthebell #createTogether

Roboto skill lists Economica skill headers

Skills & TeamsSkinning a cat

> UI is not UX

Front end

Web analytics

Attrition flows

A/B/n tests

Graphic design

High fidelity m

ockup

Scenarios

User flows

Structured brainstorming

Interactive prototype

Paper prototype

Interaction model

Heuristic evaluation

Content inventory

Card sorting

Affinity diagramm

ing

Domain m

odel

Ontology

Taxonomy

Wirefram

es

Content matrix

Personas

Usability testing

Workflow

model

Physical model

Cultural model

Contextual inquiry

Content strategy

Business goals

Project planning

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

Page 12: UX Design breakdown and Q&A session @ #createTogether

@ericthebell #createTogether

Roboto skill lists Economica skill headers

Skills & TeamsDistributing roles

> Job postings: UI vs UX

Front end

Web analytics

Attrition flows

A/B/n tests

Graphic design

High fidelity m

ockup

Scenarios

User flows

Structured brainstorming

Interactive prototype

Paper prototype

Interaction model

Heuristic evaluation

Content inventory

Card sorting

Affinity diagramm

ing

Domain m

odel

Ontology

Taxonomy

Wirefram

es

Content matrix

Personas

Usability testing

Workflow

model

Physical model

Cultural model

Contextual inquiry

Content strategy

Business goals

Project planning

DevData scientistVisual DesignerInteraction DesignerInformation ArchitectUser ResearcherProject Manager

Page 13: UX Design breakdown and Q&A session @ #createTogether

@ericthebell #createTogether

Roboto skill lists Economica skill headers

Skills & TeamsDistributing roles

> Job postings: UI vs UX

Front end

Web analytics

Attrition flows

A/B/n tests

Graphic design

High fidelity m

ockup

Scenarios

User flows

Structured brainstorming

Interactive prototype

Paper prototype

Interaction model

Heuristic evaluation

Content inventory

Card sorting

Affinity diagramm

ing

Domain m

odel

Ontology

Taxonomy

Wirefram

es

Content matrix

Personas

Usability testing

Workflow

model

Physical model

Cultural model

Contextual inquiry

Content strategy

Business goals

Project planning

Front End DevProduct DesignerProduct Manager

Page 14: UX Design breakdown and Q&A session @ #createTogether

@ericthebell #createTogether

Roboto skill lists Economica skill headers

Skills & TeamsDistributing roles

> Designer salaries

Front end

Web analytics

Attrition flows

A/B/n tests

Graphic design

High fidelity m

ockup

Scenarios

User flows

Structured brainstorming

Interactive prototype

Paper prototype

Interaction model

Heuristic evaluation

Content inventory

Card sorting

Affinity diagramm

ing

Domain m

odel

Ontology

Taxonomy

Wirefram

es

Content matrix

Personas

Usability testing

Workflow

model

Physical model

Cultural model

Contextual inquiry

Content strategy

Business goals

Project planning

DevProduct Manager Visual Designer

Page 15: UX Design breakdown and Q&A session @ #createTogether

@ericthebell #createTogether

Roboto skill lists Economica skill headers

Skills & TeamsDistributing roles

> Designer salaries

Front end

Web analytics

Attrition flows

A/B/n tests

Graphic design

High fidelity m

ockup

Scenarios

User flows

Structured brainstorming

Interactive prototype

Paper prototype

Interaction model

Heuristic evaluation

Content inventory

Card sorting

Affinity diagramm

ing

Domain m

odel

Ontology

Taxonomy

Wirefram

es

Content matrix

Personas

Usability testing

Workflow

model

Physical model

Cultural model

Contextual inquiry

Content strategy

Business goals

Project planning

DevProduct Manager Visual DesignerUX Architect

Page 16: UX Design breakdown and Q&A session @ #createTogether

@ericthebell #createTogether

Roboto skill lists Economica skill headers

Skills & TeamsDistributing roles

> Balanced Team and Holacracy

Front end

Web analytics

Attrition flows

A/B/n tests

Graphic design

High fidelity m

ockup

Scenarios

User flows

Structured brainstorming

Interactive prototype

Paper prototype

Interaction model

Heuristic evaluation

Content inventory

Card sorting

Affinity diagramm

ing

Domain m

odel

Ontology

Taxonomy

Wirefram

es

Content matrix

Personas

Usability testing

Workflow

model

Physical model

Cultural model

Contextual inquiry

Content strategy

Business goals

Project planning

Product Manager UX Developer

Page 17: UX Design breakdown and Q&A session @ #createTogether

Human Centered Design3

Page 18: UX Design breakdown and Q&A session @ #createTogether

@ericthebell #createTogether

Roboto skill lists Economica skill headers

observe ideate prototype

feedback / evaluate generate / refine sketch / polish

contextual inquirypersonas, scenarios

usability test

structured brainstormaffinity diagram

card sortuser flow

paperwireframe

interactive prototype

measurebuildlearn

Design ProcessOkay but what does this look like?

> Problem of design

scope

investigateobserve

plan

ideate

sketch

broaden

narrow

prototype

testbuild

feedback

Page 19: UX Design breakdown and Q&A session @ #createTogether

@ericthebell #createTogether

Roboto skill lists Economica skill headers

ObserveWatch and learn

> Research tactics and tools

Scoping your market

Who is your audience? Whose problems are you going to solve?

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

Personas

System mapContextual inquiry

Page 20: UX Design breakdown and Q&A session @ #createTogether

@ericthebell #createTogether

Roboto skill lists Economica skill headers

HypothesizeIdeate and evaluate

> Structured brainstorming

The ideation diamond

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

Structured brainstorming

User flows

Storyboards

Sketching

Page 21: UX Design breakdown and Q&A session @ #createTogether

@ericthebell #createTogether

Roboto skill lists Economica skill headers

Prototype & MeasureRinse and repeat

> Prototyping over documentation

Fast cheap testing

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.

What feedback did you receive? Did the users understand your solution? What problems did they have, and why?

Do it again. Improve your guesses. Make a slightly higher fidelity prototype. Show it to new people.

Guerrilla user test (3-5 ppl)

Prototype (paper, wire, code)

Quantitative analytics

Qualitative feedback

Page 22: UX Design breakdown and Q&A session @ #createTogether

Frameworks4 ⚓

Page 23: UX Design breakdown and Q&A session @ #createTogether

@ericthebell #createTogether

Roboto skill lists Economica skill headers

Agile + UXIANA scrum master

> Dual track scrum

Tenets of Agile. Co-locate, collaboration, sprint planning, retrospective, repeat.

Integrating design. Separate research/design/test sprint ahead of development. (NB: Risk of becoming waterfall.)

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

experimentbacklog

delivery backlog

new learnings

validated

Page 24: UX Design breakdown and Q&A session @ #createTogether

@ericthebell #createTogether

Roboto skill lists Economica skill headers

Lean StartupSmall cheap quick iterations

> Lean UX

iterate or new experiment

Tenets of Lean. Identify your biggest assumptions/risks, 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 applied to the whole company. Preach.

build, measure, learn

Page 25: UX Design breakdown and Q&A session @ #createTogether

Thanks

Go forth and iterate

@ericthebell | #createTogether

Page 26: UX Design breakdown and Q&A session @ #createTogether

@ericthebell #createTogether

Roboto skill lists Economica skill headers

Appendix: Quick reading

> Ref

Why design https://medium.com/@monteiro/why-you-need-design-77dce41e0e0c

Designer roles in tech https://bold.pixelapse.com/minming/recruiting-a-designer-heres-what-you-should-know

Design titles and experience http://www.kickerstudio.com/2010/10/design-titles-and-levels-of-experience/

How design works https://startupsthisishowdesignworks.com/ Elements of User Experience http://www.jjg.net/elements/pdf/elements.pdf UI is not UX (roles and skills) http://www.helloerik.com/ux-is-not-ui UI vs UX (semantic hierarchy) http://alexpoole.info/blog/ui-vs-ux/ Figuring out designer salaries http://www.gv.com/lib/how-top-startups-pay-

designers Balanced Team http://www.balancedteam.org/ Holocracy Holacracy http://www.holacracy.org/ Problem of design, process https://uxmag.com/articles/solving-the-problem-of-

design-with-karl-ulrich Google product design sprint https://developers.google.com/design-sprint/

product/ Research tactics and tools http://www.uxbooth.com/articles/guerrilla-research-

tactics-tools/

You only need 5 users http://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/

Structured brainstorming http://www.fastcompany.com/3033567/agendas/brainstorming-doesnt-work-try-this-technique-instead

Ideation double diamond http://www.slideshare.net/peterme/doublediamond-stage

Prototyping over documentation https://uxmag.com/articles/how-prototyping-is-replacing-documentation

Prototyping tools chart http://www.cooper.com/prototyping-tools Dual track agile (case study) https://www.scrumalliance.org/community/articles/

2014/december/dual-track-scrum Dual track agile (diagram) http://productwarrior.com/blog/2015/4/9/eliminate-

waste-in-your-development-pipeline Lean Startup in a nutshell http://theleanstartup.com/principles Lean UX http://www.smashingmagazine.com/2014/01/lean-ux-manifesto-

principle-driven-design/ Lean UX vs Agile UX http://www.andersramsay.com/2012/04/24/agile-ux-vs-

lean-ux/ #createTogether http://createtogether.am https://twitter.com/search?q=

%23createTogether