Updated version of Product Design workshop we run every year at London Business School

1. Understanding Product Design
Eduardo Wydler | Luciana Lattanzi
hello@madebyheart.co.uk

2. Our work includes art direction, brand identity, web and mobile applications, and packaging. We like to
approach every project from a human-centred perspective. We pride ourselves on being research-lead.
A strong understanding of your audience is our base for creating meaningful and effective designs.
About us
PRODUCT DESIGN
madebyheart.co.uk

3. What we see as Product Design
Surface
Visual Design

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

5. What is
Product Design?
PRODUCT DESIGN
Great products are understandable (set
expectations and live up to them) and
meaningful (help people solve problems or
accomplish goals) and, hopefully, delightful.
madebyheart.co.uk

6. Product Design Cycle
PRODUCT DESIGN
madebyheart.co.uk

7. PRODUCT DESIGN
madebyheart.co.uk

8. What is
UX and UI?
PRODUCT DESIGN
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.
madebyheart.co.uk

9. Your toolkit
PRODUCT DESIGN
madebyheart.co.uk

10. 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
Takeaways:
PRODUCT DESIGN
madebyheart.co.uk

11. 01. Define
PRODUCT DESIGN
madebyheart.co.uk

12. Defining the
problem
PRODUCT DESIGN
madebyheart.co.uk
Three little words on a slide belittle
what is actually the hardest thing
you will have to do.

13. Defining the problem
PRODUCT DESIGN
madebyheart.co.uk

14. Defining the problem
PRODUCT DESIGN
madebyheart.co.uk

15. Competition
Customer risk
Consider
your impact Understand
PRODUCT DESIGN
madebyheart.co.uk

16. Define a persona,
not a target
demographic
PRODUCT DESIGN
madebyheart.co.uk
What do they want to achieve? What
have they already tried? Where are they
now? Where are they dealing with the
problem? And what obstacles stand in
between them.

18. PRODUCT DESIGN
madebyheart.co.uk

19. Personas are
better than target
demographics
If you don’t have your
persona nailed you will just
create something that no
one will be interested in.
Skipping this point
will create
something for
anyone and no one.
Mapping out pain
points will help you
and your team
come up with more
solutions.
Takeaways:
PRODUCT DESIGN
madebyheart.co.uk

20. Exercise #1
PRODUCT DESIGN
madebyheart.co.uk
Persona development

21. 02. Ideate
PRODUCT DESIGN
madebyheart.co.uk

22. User Journey
PRODUCT DESIGN
madebyheart.co.uk
A user journey it’s a timeline of your
customers experience. To cater for
their needs, you need to have a deep
understanding of their perspective.
This is a quick way to put yourself
into your customer's shoes.

24. Sticky note
session
PRODUCT DESIGN
madebyheart.co.uk
PAIN
POINT
POSSIBLE
SOLUTION
POSSIBLE
SOLUTION

25. Define your users goals
PRODUCT DESIGN
madebyheart.co.uk
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”

26. Test your ideas
PRODUCT DESIGN
madebyheart.co.uk
➢ Typeform
➢ Google forms
➢ MeetUp
➢ Facebook
➢ Guerrilla research

27. Steal my idea,
I dare you
PRODUCT DESIGN
madebyheart.co.uk

28. A better
understanding of
the problem will
generate multiple
solutions.
See all of the steps a user is
taking - which might be too
many.
User journeys
visualise the vision
for the project
Higher level of
what’s involved
when achieving
a goal.
Takeaways:
PRODUCT DESIGN
madebyheart.co.uk

29. Exercise #2
PRODUCT DESIGN
madebyheart.co.uk
Map the user journey

30. 03. Design and testing
PRODUCT DESIGN
madebyheart.co.uk

31. Brainstorming
a solution
PRODUCT DESIGN
madebyheart.co.uk
Now that you understand your user's needs
and behaviours, it's time to brainstorm a
solution. It could be an app, a website, a
physical product?

32. Core flows
PRODUCT DESIGN

33. Wireframes
PRODUCT DESIGN
madebyheart.co.uk
➢ Paper
➢ UX Pin
➢ Balsamiq
➢ Wireframe CC

34. Design flows,
not screen
PRODUCT DESIGN
madebyheart.co.uk
➢ Invisionapp.com
➢ Marvelapp.com
➢ Proto.io

35. Tease out
requirements and
visualise the flows
Personas have
different goals and
different flows
Prototypes help
to crystallise the
experience
Takeaways:
PRODUCT DESIGN
madebyheart.co.uk

36. Exercise #3
PRODUCT DESIGN
madebyheart.co.uk
Brainstorm a solution

37. 04. Look & feel
PRODUCT DESIGN
madebyheart.co.uk

38. Visual
language
PRODUCT DESIGN
madebyheart.co.uk
➢ Branding
➢ UI design
➢ Landing page
➢ Social media graphics
➢ Style guide

39. Wireframes Final UI

40. Proposition
website
PRODUCT DESIGN
The value proposition is your customer’s first
contact with your product. The less known
your company is or the more revolutionary
your product is, the better explained your
value proposition should be.
madebyheart.co.uk

45. Style guide
PRODUCT DESIGN
madebyheart.co.uk

46. Be consistent
throughout your
communications
People buy on
value not on
features
Get users
excited with a
landing page
Takeaways:
PRODUCT DESIGN
Have a clear proposition and
call to action.
madebyheart.co.uk

47. 05. User testing
PRODUCT DESIGN
madebyheart.co.uk

48. BeforePRODUCT DESIGN
madebyheart.co.uk

49. AfterPRODUCT DESIGN
madebyheart.co.uk

50. Usability testing
PRODUCT DESIGN
➢ Fivesecondtest.com
➢ Usertesting.com
➢ Luckyorange.com
➢ inspectlet.com
madebyheart.co.uk

51. Resources
PRODUCT DESIGN
madebyheart.co.uk

52. Validate your
assumptions
PRODUCT DESIGN
madebyheart.co.uk

53. Get valuable
feedback
PRODUCT DESIGN
madebyheart.co.uk

54. Refine the product
PRODUCT DESIGN
madebyheart.co.uk

55. Some testing is
better than no
testing.
What do you want
to learn?
Interview in
person and one
user at a time.
Takeaways:
PRODUCT DESIGN
madebyheart.co.uk
Look out for patterns.

56. Exercise #4
PRODUCT DESIGN
madebyheart.co.uk
Test assumptions

57. 05. Key take aways
PRODUCT DESIGN
madebyheart.co.uk

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

59. Suggested reading
PRODUCT DESIGN
madebyheart.co.uk

60. Thank You!
Eduardo Wydler | Luciana Lattanzi
hello@madebyheart.co.uk