Story Duration: 5 min
Â
I just want to have a quick look at some airplane ticket prices.
My psych is fairly lowâI want to go back to enjoying the lake as soon as possible!
Psych Level: 30%
Ohhh... This screen {POPS} ;)
No but seriously, this is some serious visual priming, with the airport landscape.
Priming consists of subtle visuals that influence how we respond.
The friendly-looking airport landscape lets the users dream about their next trip  increasing the chances of a positive experience. 1 Wikipedia, Priming Psychology (2019)
Encouraging users to move from completing simple actions to executing more complex ones lowers the chances that users will feel overwhelmed. 1
In this case, Hopper offers simple actions to start with: Where from? And where to?
1 Prototypr.io, Designing for Progressive Disclosure (2019)Plus, it's one of the simplest travel booking home screens I've seen...
Compared to Kayak which has 2 extra fields to think about: Trip type & Dates.
And for which the default choices are somehow more confusing than not.
Â
They also have multiple CTAs clutter the home with important visual weight.
Let's do this... {TAP}
Hmm... Where did the dreamy airport go?!
Oh... That was quick. Nope.
Â
If you need information or private access early in the product experience, implement ways where the user deliberately triggers the prompt.
When actions are driven by user intent, the experience on the user's side feels more natural; hence, the better conversion.
Here's one way to solve this:
(Just press ⌠on your keyboard)
Hmm... in reality this was very contextual.
Asking for location access when entering the "where from"...
...But it was too early in the experience to have my trust.
Which brings me toâ â
Displaying direct benefit of the feature
Letting users decide if they want Location Access
Keeping the background in context minimizes navigation and keeps the user dreaming*
User-Driven Notification Prompt
Objective:
- Increase Location Access Conversion by 4%
powered by Growth.Design
Press "right" at anytime to continue the story
Philippines seems like such a vibrant place right now, with plenty of co-working spaces!
Let's see... {TAP}
{} ... A lot of alarming colors! Everything was so light and calm...
Nonetheless, notice how they're guiding me through incremental decisions.Â
Instead of putting everything on the home screen. Easier to follow!
Filters? It seems odd to have filters take a lot of primary space.
Also, it took me a while to realize there was only 50$ difference between color tags.
Do we need such granularity?
Overall... There's still a great opportunity to reduce cognitive loadâ âÂ
Extraneous cognitive load refers to the way information or tasks are presented to a user.1 The more information the heavier the load. Â
Here's a suggestion to minimize this!
(Just press ⌠on your keyboard)
1N/N Group, Minimize Cognitive Load to Maximize Usability (2013)Minimize Cognitive Load
Objective:
- Lift "Flight Dates" completion by 3%
powered by Growth.Design
Less granularity to quickly understand price differences. What's cheap and what's expensive.
Lighter active color. Reducing attention of a quick choice.
Not putting any emphasis on "in-between" prices.
Reduced saturation to give a "calm" feeling.
Ooph.. Same satured colors.
However, the green stands out so it makes it easy to guide my choice...
Let's try to stay away from winter as long as possible! {GO!}
Hmm...
Â
Â
I got stuck there for a second...
A nice white background behind the CTA would be perfect!
Ahhh, I should wait before buying.Â
Wow. Finally, an app that puts user interests before revenues.
Love it.
However, it took me a while to decode this from the page...
...And one of Hopper's most interesting features, price prediction, is hidden!Â
Haha, he doesn't look happy!...
Not sure why though, let's see...
Information overload occurs when the amount of input to a system exceeds its processing capacity, often resulting in a reduction in decision quality.1
1UX Planet, 5 Ways to Stop Cognitive Overload From Killing Your UX (2017)Perfect timing!Â
They just suggested I should wait for a better priceâ â âÂ
â âSo why not give them the trouble of notifying me when I should buy!
{TAP}
Good job Hopper.
I didn't even see it coming. We're so used to see those prompts really early in the experience. {ALLOW}
Having a clear call to action and a clean interface goes a long way when a user is trying to decide what's the best course of action.
Here's one solution to solve this:
(Press ⌠on your keyboard)
Â
Nonetheless... This screen needs to be optimized to ease decision-making.
Plus, critical information is completely hidden like "Flex Dates".
Simplified Decision-Making
Objective:
- Lift completion of flights review by 8%
powered by Growth.Design
Press "right" at anytime to continue the story
Easy on and off notifications, taking less real estate
Clear recommendation reducing overall amount of text.
All the relevant information above the fold
Repositioned price prediction + better icons to quickly understand future price behaviors
Light background color to minimize border and line effects.
Wow unexpected overlay! Philippines, here we come!
That's the same reason why travel agency use fake palm trees and beach postersâ
Weâre more likely to do the hard stuff when tightly coupled with something tempting.1
In this case, all this imagery serves as temptation, and it's very safe to say that booking a vacations is hard!Â
Good work Hopper!
1James Clear, Boost Your Willpower (2018)âto make you dream about your trip and let you forget about the hustle of planning.
Psych Level
Customer Journey
Hopper makes you dream right from the start with some undeniable visual priming!
The first location prompt was a bit too early, so I decided to tweak it to increase potential conversions.
Got a bit overwhelmed by all the colors when selecting date. Don't let cognitive load kill your design!
One of the smoothest notification prompts I've seen. Right when I needed Hopper to alert me when to buy my tickets.Â
The big Aha-moment, when Hopper recommends to wait before buying your tickets to save money.Â
The flexible dates overlay was such a nice surprise, and a strong "temptation bundling" that I had to slide it in there!
Get this free one-pager containing:
Yes, I Want My Cheatsheet!
Notification Experience
Score
A
You completed Growth.Design's Case Study #011:
"Hopper's In-App Notification Onboarding"