Guide to Developing Product Design

If you like this presentation – show it...

Slide 0

Understanding Product Design Edward Wydler | Luciana Lattanzi @heartstudiouk

Slide 1

What we see as Product Design Surface 10% Visual Design

Slide 2

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

Slide 3

P0 INTRODUCTION What is 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. HEART

Slide 4

Slide 5

P0 INTRODUCTION HEART What’s the difference between UX and UI? “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.”

Slide 6


Slide 7

P0 INTRODUCTION Key Takeaways ● ● ● ● 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 HEART

Slide 8

P1 PLAN & DISCOVERY 1 HEART Plan & Discovery I

Slide 9

P1 PLAN & DISCOVERY 1 Defining the problem Three little words on a slide belittle what is actually the hardest thing you will have to do. HEART

Slide 10

P1 PLAN & DISCOVERY 1 Consider your impact Competition Customer risk HEART

Slide 11

P1 PLAN & DISCOVERY 1 HEART Define a persona A . . . . . B

Slide 12


Slide 13

Slide 14

P1 PLAN & DISCOVERY 1 HEART Key takeaways ● ● ● 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.

Slide 15

Exercise #1 Persona development

Slide 16

P2 PLAN & DISCOVERY 2 HEART Plan & Discovery II

Slide 17

P2 PLAN & DISCOVERY 2 User journey HEART

Slide 18

Slide 19


Slide 20

P2 PLAN & DISCOVERY 2 HEART Define your users goals Persona 1: Potential client “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” Key Goals We Must Book appointments quickly Push featured stylist and relevant services in their area Behaviours We Must Never Search for stylist availability around my area Overwhelm them with too many choices

Slide 21

P2 PLAN & DISCOVERY 2 Test your ideas Typeform Google forms MeetUp Facebook Guerrilla research HEART

Slide 22

P2 PLAN & DISCOVERY 2 Steal my idea, I dare you HEART

Slide 23

P2 PLAN & DISCOVERY 2 Key takeaways ● 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. HEART

Slide 24

Exercise #2 Map the user journey

Slide 25

P3 DESIGN AND TESTING HEART Design and testing

Slide 26

P3 DESIGN AND TESTING Brainstorming a solution HEART

Slide 27


Slide 28

P3 DESIGN AND TESTING Red route analysis HEART

Slide 29

P3 DESIGN AND TESTING Wireframes Paper UX Pin Balsamiq Wireframe CC HEART

Slide 30

P3 DESIGN AND TESTING Design flows, not screen Invisionapp.com Marvelapp.com Proto.io HEART

Slide 31

P3 DESIGN AND TESTING Key takeaways ● ● ● ● Tease out requirements Visualise flows Personas have different goals and different flows Prototypes help to crystallise the experience HEART

Slide 32

Exercise #3 Brainstorm a solution

Slide 33

P4 LOOK & FEEL HEART Look & feel

Slide 34

P4 LOOK & FEEL Visual language Branding UI design Landing page Social media graphics Style guide HEART

Slide 35

P4 LOOK & FEEL Proposition site The value proposition is your customer’s first contact with your product. HEART

Slide 36

Proposition site

Slide 37

Proposition site

Slide 38

Proposition site

Slide 39

Proposition site

Slide 40

P4 LOOK & FEEL Style guide HEART

Slide 41

Wireframes Final UI

Slide 42

P4 LOOK & FEEL Key takeaways ● ● ● ● Be consistent throughout your communications People buy on value not on features Clear proposition and CTA Get users excited with a landing page. HEART

Slide 43


Slide 44

P5 USER TESTING Usability testing Fivesecondtest.com Usertesting.com HEART

Slide 45


Slide 46

P5 USER TESTING Validate your assumptions HEART

Slide 47

P5 USER TESTING Get valuable feedback HEART

Slide 48

P5 USER TESTING Refine the product HEART

Slide 49

P5 USER TESTING Key takeaways ● ● ● ● ● 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 HEART

Slide 50

Exercise #4 Test assumptions

Slide 51


Slide 52

P6 WRAP UP HEART 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

Slide 53

P6 WRAP UP Suggested reading HEART

Slide 54

More resources www.atelierheart.com/resources

Slide 55

Thank You! Eduardo Wydler | Luciana Lattanzi @heartstudiouk

Slide 56