How to Design a Web App People Love

How to Design a Web App People LoveBy Pete Kistler

Co-Founder & Lead Product Designer | BrandYourself.com

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:

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:

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

reputation firm to do it

or

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

To design a product people love:

Minimum Viable Product:

The version of a new product which allows you to collect the most

validated learning about customers with the least effort.

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.

Most Web Apps Take Too Long to Release

Version 1Design

Develop

Release

6 months of wasted time

A Minimum Viable Product With More Iterations is Better

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

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

Twitter’s Minimum Viable Product

Sketch By Jack Dorsey, Founder of Twitter

What We’ll Cover Today

To design a product people love:

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 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.”

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

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

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

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

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 is NOT self-evident.

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 interface is self-evident.

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

To design a product people love:

“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 too much. The only way to find out if it really works is to test it.

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 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.”

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!

Design Develo

p

Release

Design Develo

p

Release

Design Develo

p

Release

Usability Test Every Release

Usability test

Usability test

Usability test

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

What We’ll Cover Today

To design a product people love:

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

To design a product people love:

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:

Hopefully, you’re now on your way to creating a web app

people love!

A quick comic before we go to questions:

Questions?

Pete KistlerCo-Founder & Head of Product, BrandYourselfpete@brandyourself.comTwitter: @pete_kistler