how to design a web app people love
Post on 20-Sep-2014
390 views
DESCRIPTION
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 :)TRANSCRIPT
![Page 1: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/1.jpg)
How to Design a Web App People LoveBy Pete Kistler
Co-Founder & Lead Product Designer | BrandYourself.com
![Page 2: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/2.jpg)
What We’ll Cover Today
1. Identify a real problem 2. Define your minimum viable product3. Design your interface4. Usability test your interface – and iterate5. Inject humanity into it
To design a web app people love:
![Page 3: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/3.jpg)
What We’ll Cover Today
1. Identify a real problem 2. Define your minimum viable product3. Design your interface4. Usability test your interface – and iterate5. Inject humanity into it
To design a web app people love:
![Page 4: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/4.jpg)
Real problem: Migraines
![Page 5: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/5.jpg)
“Excedrin Migraine returned my life to me. I absolutely love this product.”
Solution:
![Page 6: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/6.jpg)
Real Problem: employers were Googling me and finding…
![Page 7: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/7.jpg)
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
![Page 8: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/8.jpg)
Luckily my friend Patrick had a background in search engines, and helped me fix my Google results...
![Page 9: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/9.jpg)
… but I knew there were tons of other people with the same problem I had.
![Page 10: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/10.jpg)
So I set out to create a DIY product anyone could use to improve their own Google results.
![Page 11: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/11.jpg)
What We’ll Cover Today
To design a product people love:
![Page 12: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/12.jpg)
Minimum Viable Product:
The version of a new product which allows you to collect the most
validated learning about customers with the least effort.
![Page 13: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/13.jpg)
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.
![Page 14: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/14.jpg)
Most Web Apps Take Too Long to Release
Version 1Design
Develop
Release
6 months of wasted time
![Page 15: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/15.jpg)
A Minimum Viable Product With More Iterations is Better
Design Develo
p
1 month
Release
![Page 16: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/16.jpg)
Design Develo
p
1 month
Release
Design Develo
p
1 month
Release
A Minimum Viable Product With More Iterations is Better
![Page 17: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/17.jpg)
Design Develo
p
1 month
Release
Design Develo
p
1 month
Release
Design Develo
p
1 month
Release
A Minimum Viable Product With More Iterations is Better
![Page 18: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/18.jpg)
Twitter’s Minimum Viable Product
Sketch By Jack Dorsey, Founder of Twitter
![Page 19: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/19.jpg)
What We’ll Cover Today
To design a product people love:
![Page 20: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/20.jpg)
Interface Tip #1:
Get Users to Your “Aha” Moment Immediately
![Page 21: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/21.jpg)
“Aha” moment:When a user takes an action that causes them to inherently get how your product works.
![Page 22: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/22.jpg)
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.”
![Page 23: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/23.jpg)
1 Year Ago We Asked Users:
How Does BrandYourself Work?
![Page 24: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/24.jpg)
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:
![Page 25: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/25.jpg)
They were correctly naming features, but less than half had our
“aha” answer.
Why?
![Page 26: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/26.jpg)
Our interface had too much crap in the way of the “aha”
moment, so many people never fully understood it.
![Page 27: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/27.jpg)
BrandYourself’s Old Flow
1. Create an account2. Get Your Search Score3. Create a BrandYourself profile4. Choose links you want to show up high
in Google5. Boost those links higher in Google
![Page 28: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/28.jpg)
BrandYourself’s Old Flow
1. Create an account2. Get Your Search Score3. Create a BrandYourself profile4. Choose links you want to show up high
in Google5. Boost those links higher in Google
Our “aha” moment was buried under less important features
![Page 29: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/29.jpg)
![Page 30: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/30.jpg)
BrandYourself’s New Flow:
1. Create an account2. Boost links you want higher in Google3. Get Your Search Score4. Create a BrandYourself profile
Our “aha” moment now happens immediately for all users
![Page 31: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/31.jpg)
![Page 32: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/32.jpg)
Interface Tip #2: Make Your
Interface Self-Evident
![Page 33: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/33.jpg)
Let’s compare two products that help you clean your Facebook profile by removing unwanted
posts…
![Page 34: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/34.jpg)
![Page 35: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/35.jpg)
What would you do on the next
screen…
![Page 36: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/36.jpg)
![Page 37: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/37.jpg)
They’ve completely hidden their most important feature, which scans your Facebook wall for unwanted posts.
This interface is NOT self-evident.
![Page 38: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/38.jpg)
![Page 39: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/39.jpg)
What would you do on the next
screen…
![Page 40: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/40.jpg)
Delete post
Delete post
Delete post
![Page 41: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/41.jpg)
Delete post
Delete post
Delete post
Potentially unwanted wall posts are highlighted, with an option to delete them.
This interface is self-evident.
![Page 42: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/42.jpg)
Interface Tip #3: Remove All
Unnecessary Interface Elements
![Page 43: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/43.jpg)
![Page 44: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/44.jpg)
![Page 45: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/45.jpg)
Interface Tip #4: Digestibility
![Page 46: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/46.jpg)
Fact of life:We don’t read webpages.
we scan them.
![Page 47: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/47.jpg)
![Page 48: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/48.jpg)
Your interface must be easily scannable and simply to digest at a
glance.
![Page 49: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/49.jpg)
Let’s start with a block of text and
see how scannable we can make it.
![Page 50: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/50.jpg)
![Page 51: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/51.jpg)
58% more readable
![Page 52: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/52.jpg)
58% more readable
47% more readable
![Page 53: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/53.jpg)
58% more readable
47% more readable
27% more readable
![Page 54: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/54.jpg)
58% more readable
47% more readable
27% more readable
124% more readable
![Page 55: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/55.jpg)
The Moral:
Attention is precious, so get to the point quickly without flowery
language and break ideas into bullet points.
![Page 56: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/56.jpg)
![Page 57: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/57.jpg)
![Page 58: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/58.jpg)
What We’ll Cover Today
To design a product people love:
![Page 59: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/59.jpg)
“No design survives contact with the
user.”
“Usability testing is debugging design.”
![Page 60: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/60.jpg)
What is Usability Testing?Watching someone who’s never used your
product to see if it works as intended.
![Page 61: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/61.jpg)
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.
![Page 62: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/62.jpg)
Usability Testing Is Actually Easy and Fun
![Page 63: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/63.jpg)
During usability tests, you’ll be shocked to learn many things that are clear to you are not clear to others.
![Page 64: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/64.jpg)
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.”
![Page 65: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/65.jpg)
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!
![Page 66: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/66.jpg)
Design Develo
p
Release
Design Develo
p
Release
Design Develo
p
Release
Usability Test Every Release
Usability test
Usability test
Usability test
![Page 67: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/67.jpg)
Guiding Mantras for Usability Testing:
1. Set aside one morning a month to test2. Start earlier than you think makes sense3. Recruit loosely (anyone can be a tester)4. Make it a spectator sport5. Focus on a small number of the most important problems6. When fixing problems, always do the least you can do, then re-test
![Page 68: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/68.jpg)
What We’ll Cover Today
To design a product people love:
![Page 69: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/69.jpg)
Humanity Tip #1:Give your product personality
![Page 70: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/70.jpg)
When we implemented this automated email, our users
loved it:
![Page 71: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/71.jpg)
Humanity Tip #2:Connect emotionally about why you
built it
![Page 72: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/72.jpg)
Our emotional backstory makes users
feel “on our side”:
![Page 73: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/73.jpg)
Be A Real Person (Not a Faceless
Corporation)
![Page 74: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/74.jpg)
We Don’t Have “Support”… We Have Trevor.
![Page 75: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/75.jpg)
And is Trevor Consistently Part of the Product Experience,
Including Emails
![Page 76: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/76.jpg)
What We’ll Cover Today
To design a product people love:
![Page 77: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/77.jpg)
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:
![Page 78: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/78.jpg)
Hopefully, you’re now on your way to creating a web app
people love!
![Page 79: How to Design a Web App People Love](https://reader033.vdocument.in/reader033/viewer/2022052819/541c679e7bef0abf718b4ebb/html5/thumbnails/79.jpg)
A quick comic before we go to questions: