'

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

P0 INTRODUCTION Your Toolkit HEART


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

P1 PLAN & DISCOVERY 1 HEART


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

P2 PLAN & DISCOVERY 2 HEART Sticky note session PAIN POINT POSSIBLE SOLUTION POSSIBLE SOLUTION


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

P3 DESIGN AND TESTING Core flows HEART


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

P5 USER TESTING HEART User testing


Слайд 44

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


Слайд 45

www.talkingtohumans.com


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

P6 WRAP UP Wrap up HEART


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


×

HTML:





Ссылка: