This was a presentation I gave about how to design a product people will love. My goal was to keep it concise, practical, and include real examples.
Note: I found this on my hard drive and decided to upload it, some day I'll actually put some time into making it look nice :)
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:
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
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:
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:
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
29.
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
41. Delete post
Delete post
Delete post
Potentially unwanted wall posts
are highlighted, with an option
to delete them.
This interface is self-evident.
55. The Moral:
Attention is precious, so get to the point
quickly without flowery language and
break ideas into bullet points.
56.
57.
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:
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.
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!
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:
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: