Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Understanding Product Design Workshop - Presentation at LBS (Heart Atelier)

23,969 views

Published on

http://www.atelierheart.com/LBS-Workshop

Workshop slides presented by Heart at the London Business School on the 25th of August 2015

Published in: Software, Design
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Nice !! Download 100 % Free Ebooks, PPts, Study Notes, Novels, etc @ https://www.ThesisScientist.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Nice !! Download 100 % Free Ebooks, PPts, Study Notes, Novels, etc @ https://www.ThesisScientist.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Finally i found something that changed my life, if you need to change yours just watch the video here http://bit.ly/changesvideo Hope it helps you as it helped me!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Understanding Product Design Workshop - Presentation at LBS (Heart Atelier)

  1. Understanding Product Design Edward Wydler | Luciana Lattanzi @heartstudiouk
  2. What we see as Product Design Surface Visual Design 10%
  3. Surface Visual Design Prototype Look & Feel Research & Validation Plan & Discovery 10% 90%
  4. 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
  5. 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
  6. INTRODUCTIONP0 H E A R T Your Toolkit
  7. ● 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
  8. Plan & Discovery I PLAN & DISCOVERY 1P1 H E A R T
  9. 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
  10. PLAN & DISCOVERY 1P1 Consider your impact H E A R T Competition Customer risk
  11. A B. . . . . PLAN & DISCOVERY 1P1 Define a persona H E A R T
  12. PLAN & DISCOVERY 1P1 H E A R T
  13. ● 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
  14. Exercise #1 Persona development
  15. Plan & Discovery II PLAN & DISCOVERY 2P2 H E A R T
  16. PLAN & DISCOVERY 2P2 User journey H E A R T
  17. PLAN & DISCOVERY 2P2 Sticky note session H E A R T PAIN POINT POSSIBLE SOLUTION POSSIBLE SOLUTION
  18. 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
  19. Typeform Google forms MeetUp Facebook Guerrilla research PLAN & DISCOVERY 2P2 Test your ideas H E A R T
  20. PLAN & DISCOVERY 2P2 Steal my idea, I dare you H E A R T
  21. 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.
  22. Exercise #2 Map the user journey
  23. Design and testing DESIGN AND TESTINGP3 H E A R T
  24. DESIGN AND TESTINGP3 Brainstorming a solution H E A R T
  25. DESIGN AND TESTINGP3 H E A R T Core flows
  26. DESIGN AND TESTINGP3 H E A R T Red route analysis
  27. Paper UX Pin Balsamiq Wireframe CC Wireframes DESIGN AND TESTINGP3 H E A R T
  28. Invisionapp.com Marvelapp.com Proto.io DESIGN AND TESTINGP3 H E A R T Design flows, not screen
  29. 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
  30. Exercise #3 Brainstorm a solution
  31. Look & feel LOOK & FEELP4 H E A R T
  32. Branding UI design Landing page Social media graphics Style guide Visual language LOOK & FEELP4 H E A R T
  33. LOOK & FEELP4 H E A R T The value proposition is your customer’s first contact with your product. Proposition site
  34. Proposition site
  35. Proposition site
  36. Proposition site
  37. Proposition site
  38. Style guide LOOK & FEELP4 H E A R T
  39. Wireframes Final UI
  40. 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.
  41. User testing USER TESTINGP5 H E A R T
  42. Fivesecondtest.com Usertesting.com Usability testing USER TESTINGP5 H E A R T
  43. www.talkingtohumans.com
  44. Validate your assumptions USER TESTINGP5 H E A R T
  45. Get valuable feedback USER TESTINGP5 H E A R T
  46. Refine the product USER TESTINGP5 H E A R T
  47. 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
  48. Exercise #4 Test assumptions
  49. Wrap up WRAP UPP6 H E A R T
  50. ● 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
  51. Suggested reading WRAP UPP6 H E A R T
  52. More resources www.atelierheart.com/resources
  53. Thank You! Eduardo Wydler | Luciana Lattanzi @heartstudiouk

×