http://www.atelierheart.com/LBS-Workshop Workshop slides presented by Heart at the London Business School on the 25th of August 2015

1. Understanding Product Design
Edward Wydler | Luciana Lattanzi
@heartstudiouk

2. What we see as Product Design
Surface
Visual Design
10%

3. Surface
Visual Design
Prototype
Look & Feel
Research & Validation
Plan & Discovery
10%
90%

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

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

7. INTRODUCTIONP0 H E A R T
Your Toolkit

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

9. Plan & Discovery I
PLAN & DISCOVERY 1P1 H E A R T

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

11. PLAN & DISCOVERY 1P1
Consider your impact
H E A R T
Competition
Customer risk

12. A B. . . . .
PLAN & DISCOVERY 1P1
Define a persona
H E A R T

13. PLAN & DISCOVERY 1P1 H E A R T

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

16. Exercise #1
Persona development

17. Plan & Discovery II
PLAN & DISCOVERY 2P2 H E A R T

18. PLAN & DISCOVERY 2P2
User journey
H E A R T

20. PLAN & DISCOVERY 2P2
Sticky note session
H E A R T
PAIN
POINT
POSSIBLE
SOLUTION
POSSIBLE
SOLUTION

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

22. Typeform
Google forms
MeetUp
Facebook
Guerrilla research
PLAN & DISCOVERY 2P2
Test your ideas
H E A R T

23. PLAN & DISCOVERY 2P2
Steal my idea, I dare you
H E A R T

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

25. Exercise #2
Map the user journey

26. Design and testing
DESIGN AND TESTINGP3 H E A R T

27. DESIGN AND TESTINGP3
Brainstorming
a solution
H E A R T

28. DESIGN AND TESTINGP3 H E A R T
Core flows

29. DESIGN AND TESTINGP3 H E A R T
Red route analysis

30. Paper
UX Pin
Balsamiq
Wireframe CC
Wireframes
DESIGN AND TESTINGP3 H E A R T

31. Invisionapp.com
Marvelapp.com
Proto.io
DESIGN AND TESTINGP3 H E A R T
Design flows, not screen

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

33. Exercise #3
Brainstorm a solution

34. Look & feel
LOOK & FEELP4 H E A R T

35. Branding
UI design
Landing page
Social media graphics
Style guide
Visual language
LOOK & FEELP4 H E A R T

36. LOOK & FEELP4 H E A R T
The value proposition is your customer’s first
contact with your product.
Proposition site

37. Proposition site

38. Proposition site

39. Proposition site

40. Proposition site

41. Style guide
LOOK & FEELP4 H E A R T

42. Wireframes Final UI

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

44. User testing
USER TESTINGP5 H E A R T

45. Fivesecondtest.com
Usertesting.com
Usability testing
USER TESTINGP5 H E A R T

46. www.talkingtohumans.com

47. Validate your
assumptions
USER TESTINGP5 H E A R T

48. Get valuable
feedback
USER TESTINGP5 H E A R T

49. Refine the product
USER TESTINGP5 H E A R T

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

51. Exercise #4
Test assumptions

52. Wrap up
WRAP UPP6 H E A R T

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

54. Suggested reading
WRAP UPP6 H E A R T

55. More resources
www.atelierheart.com/resources

56. Thank You!
Eduardo Wydler | Luciana Lattanzi
@heartstudiouk