Your SlideShare is downloading. ×
0
How to
Design a
Web App
People Love
By Pete Kistler
Co-Founder & Lead Product Designer | BrandYourself.com
What We’ll Cover Today
1. Identify a real problem
2. Define your minimum viable product
3. Design your interface
4. Usabil...
What We’ll Cover Today
1. Identify a real problem
2. Define your minimum viable product
3. Design your interface
4. Usabil...
Real problem:
Migraines
“Excedrin Migraine returned my life to me. I absolutely love this
product.”
Solution:
Real Problem: employers were Googling me and finding…
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 re...
Luckily my friend Patrick had a background in
search engines, and helped me fix my Google
results...
… but I knew there were tons of other
people with the same problem I had.
So I set out to create a
DIY product anyone could
use to improve their own
Google results.
What We’ll Cover Today
1. Identify a real problem
2. Define your minimum viable product
3. Design your interface
4. Usabil...
Minimum Viable
Product:
The version of a new product which allows
you to collect the most validated learning
about custome...
The faster you get your Minimum Viable
Product in the hands of real people, the
faster you can make it better, and the
fas...
Most Web Apps Take Too
Long to Release Version 1
Design
Develo
p
Release
6 months of wasted
time
A Minimum Viable Product
With More Iterations is
Better
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
Design
Develo
p
1 month
Releas
e
Design
Develo
p
1 month
Releas
e
Design
Develo
p
1 month
Releas
e
A Minimum Viable Produc...
Twitter’s Minimum Viable Product
Sketch By Jack Dorsey, Founder of Twitter
What We’ll Cover Today
1. Identify a real problem
2. Define your minimum viable product
3. Design your interface
4. Usabil...
Interface Tip #1:
Get Users to Your “Aha”
Moment Immediately
“Aha” moment:
When a user takes an action that causes
them to inherently get how your product
works.
BrandYourself’s “Aha”
Moment:
When you choose a link you want to show up in your
first page of Google, then follow our ste...
1 Year Ago We Asked Users:
How Does BrandYourself
Work?
1 Year Ago We Asked Users:
How Does BrandYourself
Work?
1. “It grades how good you look in Google.”
2. “It lets you create...
They were correctly
naming features, but less
than half had our “aha”
answer.
Why?
Our interface had too much crap in
the way of the “aha” moment, so
many people never fully
understood it.
BrandYourself’s Old Flow
1. Create an account
2. Get Your Search Score
3. Create a BrandYourself profile
4. Choose links y...
BrandYourself’s Old Flow
1. Create an account
2. Get Your Search Score
3. Create a BrandYourself profile
4. Choose links y...
BrandYourself’s New Flow:
1. Create an account
2. Boost links you want higher in Google
3. Get Your Search Score
4. Create...
Interface Tip #2:
Make Your Interface
Self-Evident
Let’s compare two products that help
you clean your Facebook profile by
removing unwanted posts…
What would you do
on the next
screen…
They’ve completely hidden their
most important feature, which
scans your Facebook wall for
unwanted posts.
This interface ...
What would you do
on the next
screen…
Delete post
Delete post
Delete post
Delete post
Delete post
Delete post
Potentially unwanted wall posts
are highlighted, with an option
to delete them.
This i...
Interface Tip #3:
Remove All Unnecessary
Interface Elements
Interface Tip #4:
Digestibility
Fact of life:
We don’t read webpages.
we scan them.
Your interface must be
easily scannable and
simply to digest at a
glance.
Let’s start with a
block of text and
see how scannable
we can make it.
58%
more readable
58%
more readable
47%
more readable
58%
more readable
47%
more readable
27%
more readable
58%
more readable
47%
more readable
27%
more readable
124%
more readable
The Moral:
Attention is precious, so get to the point
quickly without flowery language and
break ideas into bullet points.
What We’ll Cover Today
1. Identify a real problem
2. Define your minimum viable product
3. Design your interface
4. Usabil...
“No design survives
contact with the user.”
“Usability testing is
debugging design.”
What is Usability Testing?
Watching someone who’s never used your
product to see if it works as intended.
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 ...
Usability Testing Is Actually Easy and Fun
During usability tests, you’ll be shocked to learn many
things that are clear to you are not clear to others.
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...
Test early, and test often.
Testing one user early in the project is better than
testing 50 near the end. Do it while you ...
Design
Develo
p
Releas
e
Design
Develo
p
Releas
e
Design
Develo
p
Releas
e
Usability Test Every Release
Usability
test
Usa...
Guiding Mantras for Usability Testing:
1. Set aside one morning a month to test
2. Start earlier than you think makes sens...
What We’ll Cover Today
1. Identify a real problem
2. Define your minimum viable product
3. Design your interface
4. Usabil...
Humanity Tip #1:
Give your product personality
When we implemented this
automated email, our users loved
it:
Humanity Tip #2:
Connect emotionally about why you built it
Our emotional backstory
makes users feel “on our
side”:
Be A Real Person (Not a
Faceless Corporation)
We Don’t Have “Support”… We Have Trevor.
And is Trevor Consistently Part of the
Product Experience, Including Emails
What We’ll Cover Today
1. Identify a real problem
2. Define your minimum viable product
3. Design your interface
4. Usabil...
Solve a problem by launching a minimum
viable product.
Then design a self-evident interface that’s
been usability tested a...
Hopefully, you’re now
on your way to creating
a web app people love!
A quick comic before we go to
questions:
Questions?
Pete Kistler
Co-Founder & Head of Product, BrandYourself
pete@brandyourself.com
Twitter: @pete_kistler
How to Design a Web App People Love
How to Design a Web App People Love
How to Design a Web App People Love
How to Design a Web App People Love
How to Design a Web App People Love
How to Design a Web App People Love
How to Design a Web App People Love
How to Design a Web App People Love
How to Design a Web App People Love
How to Design a Web App People Love
How to Design a Web App People Love
Upcoming SlideShare
Loading in...5
×

How to Design a Web App People Love

1,325

Published on

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 :)

Published in: Internet, Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,325
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "How to Design a Web App People Love"

  1. 1. How to Design a Web App People Love By Pete Kistler Co-Founder & Lead Product Designer | BrandYourself.com
  2. 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. 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:
  4. 4. Real problem: Migraines
  5. 5. “Excedrin Migraine returned my life to me. I absolutely love this product.” Solution:
  6. 6. Real Problem: employers were Googling me and finding…
  7. 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. 8. Luckily my friend Patrick had a background in search engines, and helped me fix my Google results...
  9. 9. … but I knew there were tons of other people with the same problem I had.
  10. 10. So I set out to create a DIY product anyone could use to improve their own Google results.
  11. 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. 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. 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. 14. Most Web Apps Take Too Long to Release Version 1 Design Develo p Release 6 months of wasted time
  15. 15. A Minimum Viable Product With More Iterations is Better Design Develo p 1 month Releas e
  16. 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. 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. 18. Twitter’s Minimum Viable Product Sketch By Jack Dorsey, Founder of Twitter
  19. 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. 20. Interface Tip #1: Get Users to Your “Aha” Moment Immediately
  21. 21. “Aha” moment: When a user takes an action that causes them to inherently get how your product works.
  22. 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. 23. 1 Year Ago We Asked Users: How Does BrandYourself Work?
  24. 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. 25. They were correctly naming features, but less than half had our “aha” answer. Why?
  26. 26. Our interface had too much crap in the way of the “aha” moment, so many people never fully understood it.
  27. 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. 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. 29. 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
  30. 30. Interface Tip #2: Make Your Interface Self-Evident
  31. 31. Let’s compare two products that help you clean your Facebook profile by removing unwanted posts…
  32. 32. What would you do on the next screen…
  33. 33. They’ve completely hidden their most important feature, which scans your Facebook wall for unwanted posts. This interface is NOT self- evident.
  34. 34. What would you do on the next screen…
  35. 35. Delete post Delete post Delete post
  36. 36. Delete post Delete post Delete post Potentially unwanted wall posts are highlighted, with an option to delete them. This interface is self-evident.
  37. 37. Interface Tip #3: Remove All Unnecessary Interface Elements
  38. 38. Interface Tip #4: Digestibility
  39. 39. Fact of life: We don’t read webpages. we scan them.
  40. 40. Your interface must be easily scannable and simply to digest at a glance.
  41. 41. Let’s start with a block of text and see how scannable we can make it.
  42. 42. 58% more readable
  43. 43. 58% more readable 47% more readable
  44. 44. 58% more readable 47% more readable 27% more readable
  45. 45. 58% more readable 47% more readable 27% more readable 124% more readable
  46. 46. The Moral: Attention is precious, so get to the point quickly without flowery language and break ideas into bullet points.
  47. 47. 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:
  48. 48. “No design survives contact with the user.” “Usability testing is debugging design.”
  49. 49. What is Usability Testing? Watching someone who’s never used your product to see if it works as intended.
  50. 50. 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.
  51. 51. Usability Testing Is Actually Easy and Fun
  52. 52. During usability tests, you’ll be shocked to learn many things that are clear to you are not clear to others.
  53. 53. 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.”
  54. 54. 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!
  55. 55. 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
  56. 56. 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
  57. 57. 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:
  58. 58. Humanity Tip #1: Give your product personality
  59. 59. When we implemented this automated email, our users loved it:
  60. 60. Humanity Tip #2: Connect emotionally about why you built it
  61. 61. Our emotional backstory makes users feel “on our side”:
  62. 62. Be A Real Person (Not a Faceless Corporation)
  63. 63. We Don’t Have “Support”… We Have Trevor.
  64. 64. And is Trevor Consistently Part of the Product Experience, Including Emails
  65. 65. 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:
  66. 66. 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:
  67. 67. Hopefully, you’re now on your way to creating a web app people love!
  68. 68. A quick comic before we go to questions:
  69. 69. Questions? Pete Kistler Co-Founder & Head of Product, BrandYourself pete@brandyourself.com Twitter: @pete_kistler
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×