How to Design a Web App People Love
Download as PPT, PDF0 likes2,011 views
The document outlines a guide on designing a web app that resonates with users, emphasizing the importance of identifying real problems and developing a minimum viable product (MVP) quickly. Key strategies include creating an intuitive interface, conducting usability tests for iterative improvement, and injecting a sense of humanity into the product experience. Ultimately, the goal is to launch a product that not only solves a problem but also fosters emotional connections with users.
How to Design a Web App People Love
- 1. How to Design a Web App People Love By Pete Kistler Co-Founder & Lead Product Designer | BrandYourself.com
- 2. What Weβll Cover Today 1. Identify a real problem 2. Define your minimum viable product 3. Design your interface 4. Usability test your interface β and iterate 5. Inject humanity into it To design a web app people love:
- 3. What Weβll Cover Today 1. Identify a real problem 2. Define your minimum viable product 3. Design your interface 4. Usability test your interface β and iterate 5. Inject humanity into it To design a web app people love:
- 5. βExcedrin Migraine returned my life to me. I absolutely love this product.β Solution:
- 6. Real Problem: employers were Googling me and findingβ¦
- 7. I couldnβt fix my problem, because I wasnβt: A tech genius who could do it myself Wealthy enough to pay thousands for a reputation firm to do it or
- 8. Luckily my friend Patrick had a background in search engines, and helped me fix my Google results...
- 9. β¦ but I knew there were tons of other people with the same problem I had.
- 10. So I set out to create a DIY product anyone could use to improve their own Google results.
- 11. What Weβll Cover Today 1. Identify a real problem 2. Define your minimum viable product 3. Design your interface 4. Usability test your interface β and iterate 5. Inject humanity into it To design a product people love:
- 12. Minimum Viable Product: The version of a new product which allows you to collect the most validated learning about customers with the least effort.
- 13. The faster you get your Minimum Viable Product in the hands of real people, the faster you can make it better, and the faster you will turn into a product people love.
- 14. Most Web Apps Take Too Long to Release Version 1 Design Develo p Release 6 months of wasted time
- 15. A Minimum Viable Product With More Iterations is Better Design Develo p 1 month Releas e
- 16. Design Develo p 1 month Releas e Design Develo p 1 month Releas e A Minimum Viable Product With More Iterations is Better
- 17. Design Develo p 1 month Releas e Design Develo p 1 month Releas e Design Develo p 1 month Releas e A Minimum Viable Product With More Iterations is Better
- 18. Twitterβs Minimum Viable Product Sketch By Jack Dorsey, Founder of Twitter
- 19. What Weβll Cover Today 1. Identify a real problem 2. Define your minimum viable product 3. Design your interface 4. Usability test your interface β and iterate 5. Inject humanity into it To design a product people love:
- 20. Interface Tip #1: Get Users to Your βAhaβ Moment Immediately
- 21. βAhaβ moment: When a user takes an action that causes them to inherently get how your product works.
- 22. BrandYourselfβs βAhaβ Moment: When you choose a link you want to show up in your first page of Google, then follow our steps to boost it higherβ¦ βAha! This product helps me boost links I want people to find up to the top of my own Google results.β
- 23. 1 Year Ago We Asked Users: How Does BrandYourself Work?
- 24. 1 Year Ago We Asked Users: How Does BrandYourself Work? 1. βIt grades how good you look in Google.β 2. βIt lets you create create a profile like LinkedIn.β 3. βIt alerts you when new things show up in Google.β 4. And a bunch of other things Very few people had our βahaβ moment:
- 25. They were correctly naming features, but less than half had our βahaβ answer. Why?
- 26. Our interface had too much crap in the way of the βahaβ moment, so many people never fully understood it.
- 27. BrandYourselfβs Old Flow 1. Create an account 2. Get Your Search Score 3. Create a BrandYourself profile 4. Choose links you want to show up high in Google 5. Boost those links higher in Google
- 28. BrandYourselfβs Old Flow 1. Create an account 2. Get Your Search Score 3. Create a BrandYourself profile 4. Choose links you want to show up high in Google 5. Boost those links higher in Google Our βahaβ moment was buried under less important features
- 30. BrandYourselfβs New Flow: 1. Create an account 2. Boost links you want higher in Google 3. Get Your Search Score 4. Create a BrandYourself profile Our βahaβ moment now happens immediately for all users
- 32. Interface Tip #2: Make Your Interface Self-Evident
- 33. Letβs compare two products that help you clean your Facebook profile by removing unwanted postsβ¦
- 35. What would you do on the next screenβ¦
- 37. Theyβve completely hidden their most important feature, which scans your Facebook wall for unwanted posts. This interface is NOT self- evident.
- 39. What would you do on the next screenβ¦
- 40. Delete post Delete post Delete post
- 41. Delete post Delete post Delete post Potentially unwanted wall posts are highlighted, with an option to delete them. This interface is self-evident.
- 42. Interface Tip #3: Remove All Unnecessary Interface Elements
- 46. Fact of life: We donβt read webpages. we scan them.
- 48. Your interface must be easily scannable and simply to digest at a glance.
- 49. Letβs start with a block of text and see how scannable we can make it.
- 53. 58% more readable 47% more readable 27% more readable
- 54. 58% more readable 47% more readable 27% more readable 124% more readable
- 55. The Moral: Attention is precious, so get to the point quickly without flowery language and break ideas into bullet points.
- 58. What Weβll Cover Today 1. Identify a real problem 2. Define your minimum viable product 3. Design your interface 4. Usability test your interface β and iterate 5. Inject humanity into it To design a product people love:
- 59. βNo design survives contact with the user.β βUsability testing is debugging design.β
- 60. What is Usability Testing? Watching someone whoβs never used your product to see if it works as intended.
- 61. Why Do Usability Tests? After youβve worked on a product for even a few weeks, you canβt see it freshly anymore. You know too much. The only way to find out if it really works is to test it.
- 62. Usability Testing Is Actually Easy and Fun
- 63. During usability tests, youβll be shocked to learn many things that are clear to you are not clear to others.
- 64. Use this script to begin your usability test: βWeβre asking people to try a product weβre working on so we can see whether it works as intended. I want to make it clear that weβre testing the site, not you. You canβt do anything wrong here! As you use the site, think out loud: say what youβre looking at, what youβre trying to do, and what youβre thinking. Also, please donβt worry that youβre going to hurt our feelings. Weβre doing this to improve the site, so we need to hear your honest reactions.β
- 65. Test early, and test often. Testing one user early in the project is better than testing 50 near the end. Do it while you still have time to make changes based on what you learn!
- 66. Design Develo p Releas e Design Develo p Releas e Design Develo p Releas e Usability Test Every Release Usability test Usability test Usability test
- 67. Guiding Mantras for Usability Testing: 1. Set aside one morning a month to test 2. Start earlier than you think makes sense 3. Recruit loosely (anyone can be a tester) 4. Make it a spectator sport 5. Focus on a small number of the most important problems 6. When fixing problems, always do the least you can do, then re-test
- 68. What Weβll Cover Today 1. Identify a real problem 2. Define your minimum viable product 3. Design your interface 4. Usability test your interface β and iterate 5. Inject humanity into it To design a product people love:
- 69. Humanity Tip #1: Give your product personality
- 70. When we implemented this automated email, our users loved it:
- 71. Humanity Tip #2: Connect emotionally about why you built it
- 72. Our emotional backstory makes users feel βon our sideβ:
- 73. Be A Real Person (Not a Faceless Corporation)
- 74. We Donβt Have βSupportββ¦ We Have Trevor.
- 75. And is Trevor Consistently Part of the Product Experience, Including Emails
- 76. What Weβll Cover Today 1. Identify a real problem 2. Define your minimum viable product 3. Design your interface 4. Usability test your interface β and iterate 5. Inject humanity into it To design a product people love:
- 77. Solve a problem by launching a minimum viable product. Then design a self-evident interface thatβs been usability tested and creates a human connection. To recap:
- 78. Hopefully, youβre now on your way to creating a web app people love!
- 79. A quick comic before we go to questions:
- 80. Questions? Pete Kistler Co-Founder & Head of Product, BrandYourself pete@brandyourself.com Twitter: @pete_kistler