Understanding Product Design UX / UI / v.3
•
3 likes•361 views
The document provides an overview of the product design process from understanding the problem, ideating solutions, designing and testing, establishing visual design and style, and user testing. It emphasizes the importance of understanding users through personas and user journeys before coming up with solutions. Various tools are suggested for wireframing, prototyping, and testing designs with users. The key takeaways stress designing for user flows rather than screens, sharing ideas early for feedback, and making incremental improvements based on testing.
Report
Share
Understanding Product Design UX / UI / v.3
- 1. Understanding Product Design Eduardo Wydler | Luciana Lattanzi hello@madebyheart.co.uk
- 2. Our work includes art direction, brand identity, web and mobile applications, and packaging. We like to approach every project from a human-centred perspective. We pride ourselves on being research-lead. A strong understanding of your audience is our base for creating meaningful and effective designs. About us PRODUCT DESIGN madebyheart.co.uk
- 3. What we see as Product Design Surface Visual Design
- 4. Surface Visual Design Prototype Look & Feel Research & Validation Plan & Discovery 10% 90%
- 5. What is Product Design? 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. madebyheart.co.uk
- 6. Product Design Cycle PRODUCT DESIGN madebyheart.co.uk
- 8. What is UX and UI? PRODUCT DESIGN 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. madebyheart.co.uk
- 10. 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 Takeaways: PRODUCT DESIGN madebyheart.co.uk
- 12. Defining the problem PRODUCT DESIGN madebyheart.co.uk Three little words on a slide belittle what is actually the hardest thing you will have to do.
- 13. Defining the problem PRODUCT DESIGN madebyheart.co.uk
- 14. Defining the problem PRODUCT DESIGN madebyheart.co.uk
- 15. Competition Customer risk Consider your impact Understand PRODUCT DESIGN madebyheart.co.uk
- 16. Define a persona, not a target demographic PRODUCT DESIGN madebyheart.co.uk What do they want to achieve? What have they already tried? Where are they now? Where are they dealing with the problem? And what obstacles stand in between them.
- 19. Personas are better than target demographics If you don’t have your persona nailed you will just create something that no one will be interested in. Skipping this point will create something for anyone and no one. Mapping out pain points will help you and your team come up with more solutions. Takeaways: PRODUCT DESIGN madebyheart.co.uk
- 20. Exercise #1 PRODUCT DESIGN madebyheart.co.uk Persona development
- 22. User Journey PRODUCT DESIGN madebyheart.co.uk A user journey it’s a timeline of your customers experience. To cater for their needs, you need to have a deep understanding of their perspective. This is a quick way to put yourself into your customer's shoes.
- 24. Sticky note session PRODUCT DESIGN madebyheart.co.uk PAIN POINT POSSIBLE SOLUTION POSSIBLE SOLUTION
- 25. Define your users goals PRODUCT DESIGN madebyheart.co.uk 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”
- 26. Test your ideas PRODUCT DESIGN madebyheart.co.uk ➢ Typeform ➢ Google forms ➢ MeetUp ➢ Facebook ➢ Guerrilla research
- 27. Steal my idea, I dare you PRODUCT DESIGN madebyheart.co.uk
- 28. A better understanding of the problem will generate multiple solutions. See all of the steps a user is taking - which might be too many. User journeys visualise the vision for the project Higher level of what’s involved when achieving a goal. Takeaways: PRODUCT DESIGN madebyheart.co.uk
- 29. Exercise #2 PRODUCT DESIGN madebyheart.co.uk Map the user journey
- 30. 03. Design and testing PRODUCT DESIGN madebyheart.co.uk
- 31. Brainstorming a solution PRODUCT DESIGN madebyheart.co.uk Now that you understand your user's needs and behaviours, it's time to brainstorm a solution. It could be an app, a website, a physical product?
- 33. Wireframes PRODUCT DESIGN madebyheart.co.uk ➢ Paper ➢ UX Pin ➢ Balsamiq ➢ Wireframe CC
- 34. Design flows, not screen PRODUCT DESIGN madebyheart.co.uk ➢ Invisionapp.com ➢ Marvelapp.com ➢ Proto.io
- 35. Tease out requirements and visualise the flows Personas have different goals and different flows Prototypes help to crystallise the experience Takeaways: PRODUCT DESIGN madebyheart.co.uk
- 36. Exercise #3 PRODUCT DESIGN madebyheart.co.uk Brainstorm a solution
- 37. 04. Look & feel PRODUCT DESIGN madebyheart.co.uk
- 38. Visual language PRODUCT DESIGN madebyheart.co.uk ➢ Branding ➢ UI design ➢ Landing page ➢ Social media graphics ➢ Style guide
- 40. Proposition website PRODUCT DESIGN The value proposition is your customer’s first contact with your product. The less known your company is or the more revolutionary your product is, the better explained your value proposition should be. madebyheart.co.uk
- 46. Be consistent throughout your communications People buy on value not on features Get users excited with a landing page Takeaways: PRODUCT DESIGN Have a clear proposition and call to action. madebyheart.co.uk
- 47. 05. User testing PRODUCT DESIGN madebyheart.co.uk
- 50. Usability testing PRODUCT DESIGN ➢ Fivesecondtest.com ➢ Usertesting.com ➢ Luckyorange.com ➢ inspectlet.com madebyheart.co.uk
- 54. Refine the product PRODUCT DESIGN madebyheart.co.uk
- 55. Some testing is better than no testing. What do you want to learn? Interview in person and one user at a time. Takeaways: PRODUCT DESIGN madebyheart.co.uk Look out for patterns.
- 56. Exercise #4 PRODUCT DESIGN madebyheart.co.uk Test assumptions
- 57. 05. Key take aways PRODUCT DESIGN madebyheart.co.uk
- 58. 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.
- 60. Thank You! Eduardo Wydler | Luciana Lattanzi hello@madebyheart.co.uk