INTRODUCTIONP0 “User Experience (UX) and Understanding Product Design Workshop - Presentation at LBS (Heart Atelier)

Understanding Product Design Edward Wydler | Luciana Lattanzi @heartstudiouk

What we see as Product Design Surface Visual Design 10%

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

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

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

INTRODUCTIONP0 H E A R T Your Toolkit

● 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

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

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

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

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

PLAN & DISCOVERY 1P1 H E A R T

● 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

Exercise #1 Persona development

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

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

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

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

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

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

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.

Exercise #2 Map the user journey

Design and testing DESIGN AND TESTINGP3 H E A R T

DESIGN AND TESTINGP3 Brainstorming a solution H E A R T

DESIGN AND TESTINGP3 H E A R T Core flows

DESIGN AND TESTINGP3 H E A R T Red route analysis

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

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

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

Exercise #3 Brainstorm a solution

Look & feel LOOK & FEELP4 H E A R T

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

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

Proposition site

Style guide LOOK & FEELP4 H E A R T

Wireframes Final UI

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.

User testing USER TESTINGP5 H E A R T

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

www.talkingtohumans.com

Validate your assumptions USER TESTINGP5 H E A R T

Get valuable feedback USER TESTINGP5 H E A R T

Refine the product USER TESTINGP5 H E A R T

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

Exercise #4 Test assumptions

Wrap up WRAP UPP6 H E A R T

● 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

Suggested reading WRAP UPP6 H E A R T

More resources www.atelierheart.com/resources

Thank You! Eduardo Wydler | Luciana Lattanzi @heartstudiouk