Guide to Developing Product Design

Понравилась презентация – покажи это...

Слайд 0

Understanding Product Design Edward Wydler | Luciana Lattanzi @heartstudiouk

Слайд 1

What we see as Product Design Surface 10% Visual Design

Слайд 2

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

Слайд 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

Слайд 4

Слайд 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.”

Слайд 6


Слайд 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

Слайд 8

P1 PLAN & DISCOVERY 1 HEART Plan & Discovery I

Слайд 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

Слайд 10

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

Слайд 11

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

Слайд 12


Слайд 13

Слайд 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.

Слайд 15

Exercise #1 Persona development

Слайд 16

P2 PLAN & DISCOVERY 2 HEART Plan & Discovery II

Слайд 17

P2 PLAN & DISCOVERY 2 User journey HEART

Слайд 18

Слайд 19


Слайд 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

Слайд 21

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

Слайд 22

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

Слайд 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

Слайд 24

Exercise #2 Map the user journey

Слайд 25

P3 DESIGN AND TESTING HEART Design and testing

Слайд 26

P3 DESIGN AND TESTING Brainstorming a solution HEART

Слайд 27


Слайд 28

P3 DESIGN AND TESTING Red route analysis HEART

Слайд 29

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

Слайд 30

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

Слайд 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

Слайд 32

Exercise #3 Brainstorm a solution

Слайд 33

P4 LOOK & FEEL HEART Look & feel

Слайд 34

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

Слайд 35

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

Слайд 36

Proposition site

Слайд 37

Proposition site

Слайд 38

Proposition site

Слайд 39

Proposition site

Слайд 40

P4 LOOK & FEEL Style guide HEART

Слайд 41

Wireframes Final UI

Слайд 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

Слайд 43


Слайд 44

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

Слайд 45


Слайд 46

P5 USER TESTING Validate your assumptions HEART

Слайд 47

P5 USER TESTING Get valuable feedback HEART

Слайд 48

P5 USER TESTING Refine the product HEART

Слайд 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

Слайд 50

Exercise #4 Test assumptions

Слайд 51


Слайд 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

Слайд 53

P6 WRAP UP Suggested reading HEART

Слайд 54

More resources www.atelierheart.com/resources

Слайд 55

Thank You! Eduardo Wydler | Luciana Lattanzi @heartstudiouk

Слайд 56