UX Delight

Bringing Hopper's playful personality to life in the app through animated modals and microinteractions.

Crafted in 2018-2020 as Senior Creative Manager at Hopper.

Based on previous tests, we found that cash rewards were most impactful in driving user behavior when a user was prompted to engage with an element in order to reveal their reward. Our Art Director designed the scene, I animated it in After Effects, and our engineers implemented it with Lottie.

I. Background

Hopper is a travel app for iOS and Android that helps travelers book flights and hotels at the right time, saving up to 40%. Hopper has helped over 50M travelers plan and book trips around the world.

II. The Challenge

How can we use motion to bring Hopper's personality to life within the app? Can we use animation to not only add moments of delight but effectively encourage users to take an intended action? And can we do this without bloating the app size?

III. My Role

I did all the animation for these projects. Along the way, I collaborated on the design and UX with our Art Director, product designers, and product managers and worked closely with our developers on the implementation.

Some of our in-app animation detailed, complex scenes—others are simple little buttons intended to make the app more enjoyable to engage with.

IV. Our Solution

In order to understand our design constraints, we first had to decide how best to deliver animations in the app. Gifs and png sequences often result in large increases to the app’s file size. And having developers recreate animations in code is painstaking and time consuming. Lottie emerged as the clear frontrunner for the best way to collaborate between design and engineering while also keeping file sizes down.

Since adopting Lottie would require buy in from other teams, I met with product designers, product managers, and developers to discuss Lottie, animation possibilities, concerns, and, ultimately, begin planning for the adoption of Lottie.

Along the way, we began running tests on the impact of animated elements. We first tested whether having a user engage with an animation on an in-app incentive would lead to a higher booking rate. In our test, we found that the animated variant had a 63% improvement over the control for hotel bookings and performed 3.4x better than the the non-animated variant.

These findings prompted us to focus on adding delightful, relevant animations to areas of the app where we wanted a higher attach rate. And we’ve since been adding animated elements throughout the app—often to encourage users to take an intended action, but sometimes just to make the experience of interacting with various elements more delightful. As Don Norman said, “If you’re happy, things work better.”

Back when we first built our hotels product, it often took a long time for search results to load. This sometimes resulted in a pretty frustrating experience for users. While the engineering team worked on reducing load times, we wanted to devise a creative solution to reduce perceived latency, especially for first-time users. We decided to use this time to onboard users and reinforce our value proposition during one's first hotel search. By the time a user completes the modal, their hotel list should fully be loaded. This is the only UX animation here where I didn't animate the bunny myself (that was done by our lovely illustrator). I did all the non-bunny animations and defined the user experience and flow.
Notifications are one of the key ways that Hopper delivers value. Our notifications let users know when flights and hotel stays have dropped to a price worth buying. However, unread notifications can often get overlooked when a user launches the app from their home screen. To draw attention to unread notifications, I animated our little notification bell icon — a simple, non-intrusive way to catch a user's eye and prompt them to engage with their notifications.
To add a bit of excitement to our feature where users can share a trip with friends, I animated a couple of our bunny friends high fiving. Our bunnies are excited about this new ability to plan trips with friends and they think you should be excited too. Woohoo! 🙌 Just like the others, this was animated in After Effects and implemented with Lottie.
A simple little animated hamburger menu for our Hopper Trees initiative website.
We found that users weren't engaging with our swipeable fare classes. We wanted to see if we could increase engagement, so we ran a bunch of tests. One of the tests we ran was this animated modal demonstrating the way to engage with fare classes.
While the engineering team worked on resolving search latency for our hotels product, we set out to come up with ways to make the wait a bit less painful. As much as we love our classic bunny loading animation, it got a bit tiresome after one's 3rd or 4th search. In addition to adding an onboarding flow during a user's first search, we built this animated loader intended to add more variety for subsequent searches and share a bit about what's going on in the background while everything is loading. This was one of our first instances of implementing an animation with Lottie.

"If you're happy, things work better."

Don Norman