UXD OMG WTF BBQ Eric Bell Director of Product Design, Rakuten Manga @ericthebell | #createTogether Oct 6, 2015
UXD OMG WTF BBQEric Bell
Director of Product Design, Rakuten Manga
@ericthebell | #createTogether
Oct 6, 2015
@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
Words 1 ಠ_ಠ
@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
@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)
@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
@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
The UX Umbrella2 ☂
@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
@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
@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
@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
@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
@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
@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
@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
Human Centered Design3
@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
@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
@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
@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
Frameworks4 ⚓
@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
@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
Thanks
Go forth and iterate
@ericthebell | #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