Post on 14-Dec-2015
description
Understanding Product Design
Edward Wydler | Luciana Lattanzi@heartstudiouk
What we see as Product Design
SurfaceVisual Design10%
SurfaceVisual Design
Prototype
Look & Feel
Research & Validation
Plan & Discovery
10%
90%
Great products are understandable (set expectations
and live up to them) and meaningful (help people solve
problems or accomplish goals) and, hopefully, delightful.
INTRODUCTIONP0
What is Product Design?
H E A R T
INTRODUCTIONP0
“User Experience (UX) and User Interface (UI) are some of the
most confused and misused terms in our field. A UI without UX is
like a painter slapping paint onto canvas without thought; while
UX without UI is like the frame of a sculpture with no paper mache
on it. A great product experience starts with UX followed by UI.
Both are essential for the product’s success.”
What’s the difference between UX and UI?
H E A R T
INTRODUCTIONP0 H E A R T
Your Toolkit
● Product design is the whole process: you’ve got the designer, the developer, the marketing cap on
● MVP works from the start● UX is not UI – but both are equally important● Simple tools
INTRODUCTIONP0
Key Takeaways
H E A R T
Plan & Discovery I
PLAN & DISCOVERY 1P1 H E A R T
Three little words on a slide belittle
what is actually the hardest thing
you will have to do.
PLAN & DISCOVERY 1P1
Defining the problem
H E A R T
PLAN & DISCOVERY 1P1
Consider your impact
H E A R T
Competition
Customer risk
A B. . . . .
PLAN & DISCOVERY 1P1
Define a persona
H E A R T
PLAN & DISCOVERY 1P1 H E A R T
● Personas are better than target demographics● Skipping this point will create something for anyone and no one. If you
don’t have your persona nailed you will just create something that no one will be interested in.
● Mapping out pain points will help you and your team come up with more solutions.
PLAN & DISCOVERY 1P1
Key takeaways
H E A R T
Exercise #1
Persona development
Plan & Discovery II
PLAN & DISCOVERY 2P2 H E A R T
USER JOURNEY
PLAN & DISCOVERY 2P2
User journey
H E A R T
USER JOURNEY
Sticky note session
PLAN & DISCOVERY 2P2
Sticky note session
H E A R T
PAINPOINT
POSSIBLE SOLUTION
POSSIBLE SOLUTION
Persona 1: Potential client
Key Goals
Book appointments quickly Push featured stylist and relevant services in their area
We Must
Behaviours
Search for stylist availability around my area
We Must Never
Overwhelm them with too many choices
“I don’t have time to get to the salon and need a stylist to work around my hours and the comfort of my home”
PLAN & DISCOVERY 2P2
Define your users goals
H E A R T
TEST YOUR IDEAS
Typeform
Google forms
MeetUp
Guerrilla research
PLAN & DISCOVERY 2P2
Test your ideas
H E A R T
STEAL MY IDEA, I DARE YOU
PLAN & DISCOVERY 2P2
Steal my idea, I dare you
H E A R T
Key takeaways
PLAN & DISCOVERY 2P2
Key takeaways
H E A R T
● A better understanding of the problem will generate
multiple solutions.
● User journeys visualise the vision for the project
● Higher level of what’s involved when achieving a goal
● See all of the steps a user is taking - which might be
too many.
Exercise #2
Map the user journey
Design and testing
DESIGN AND TESTINGP3 H E A R T
DESIGN AND TESTINGP3
Brainstorming a solution
H E A R T
DESIGN AND TESTINGP3 H E A R T
Core flows
Red route analysis
DESIGN AND TESTINGP3 H E A R T
Red route analysis
Paper
UX Pin
Balsamiq
Wireframe CC
Wireframes
DESIGN AND TESTINGP3 H E A R T
Invisionapp.com
Marvelapp.com
Proto.io
DESIGN AND TESTINGP3 H E A R T
Design flows, not screen
Key takeaways
DESIGN AND TESTINGP3 H E A R T
● Tease out requirements
● Visualise flows
● Personas have different goals and different flows
● Prototypes help to crystallise the experience
Exercise #3
Brainstorm a solution
Look & feel
LOOK & FEELP4 H E A R T
Branding
UI design
Landing page
Social media graphics
Style guide
Visual language
LOOK & FEELP4 H E A R T
BRAINSTORMING a solution
LOOK & FEELP4 H E A R T
The value proposition is your customer’s first contact with your product.
Proposition site
Proposition site
Proposition site
Proposition site
Proposition site
Value of a style guide
Style guideLOOK & FEELP4 H E A R T
Wireframes Final UI
Key takeaways
LOOK & FEELP4 H E A R T
● Be consistent throughout your communications
● People buy on value not on features
● Clear proposition and CTA
● Get users excited with a landing page.
User testing
USER TESTINGP5 H E A R T
Fivesecondtest.com
Usertesting.com
Usability testing
USER TESTINGP5 H E A R T
www.talkingtohumans.com
Validate yourassumptions
USER TESTINGP5 H E A R T
Get valuable feedback
USER TESTINGP5 H E A R T
Refine the product
Refine the product
USER TESTINGP5 H E A R T
Key takeaways
Key takeaways
USER TESTINGP5 H E A R T
● Some testing is better than no testing
● What do you want to learn?
● Look for patterns
● Observations is as powerful as interviews
● Interview in person 1 at a time
Exercise #4
Test assumptions
Wrap up
WRAP UPP6 H E A R T
KEY TAKEAWAYS
● Reimagine your product spec as a press release defining what the update is, who it is for and why it matters
● Watch and observe people because what they say they do is often very different from their actual behavior
● Design flows, not screens – when users complete a task (like signing up), make sure there are pathways for them to continue down (discover new products, find friends, etc)
● There are no silver bullets. It is the cumulative effect of lots of little improvements that create successful products.
● Share your ideas early and often – your designs don’t need to be saved for a big reveal
WRAP UPP6 H E A R T
Key takeaways
Suggested reading
WRAP UPP6 H E A R T
More resources
www.atelierheart.com/resources
Thank You!
Eduardo Wydler | Luciana Lattanzi@heartstudiouk