UX in Motion

Driving conversion through delightful animated modals and microinteractions.

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

We found that pairing our incentive with an animated reveal significantly boosted conversion — a 63% improvement over the control. Our Art Director designed the scene, I animated it in After Effects, and our engineers implemented it with Lottie.

I. Background

Hopper is the most downloaded travel booking app in the United States — helping over 70M travelers save money on flights, hotels, and rental cars.

II. The Challenge

How can we use motion to encourage conversion? Can we add some moments of delight along the way? And can we do this without bloating the app size?

III. My Role

I animated everything 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 animations are detailed, complex scenes—others are simple, little buttons intended to make the app more enjoyable to engage with.

IV. Our Solution

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, and concerns. Once everyone was on board, we began 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 engaging, relevant animations to areas of the app where we wanted a higher attach rate.

When we first built our hotels product, it took a long time for search results to load. This resulted in a frustrating experience for users. While the engineering team worked on reducing load times, we devised a solution to reduce perceived latency for first-time users by using the search load time to onboard users and reinforce our value proposition. By the time a user completes the modal, their hotel list should be done loading. This is the only UX animation here in which I didn't animate the bunny myself (that was done by our lovely illustrator). I did all the non-bunny animations and devised the UX 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 their lowest price. However, unread notifications can often get overlooked when a user launches the app. 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.
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 third or fourth search. In addition to adding an onboarding flow during a user's first search, I animated this loader to add more variety to 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.
While we eventually solved search latency for hotels, some new product offerings created a similar situation for our flights product. We built upon the success we saw with the hotels loading animation and created this one for flights — this time aiming to communicate some of Hopper's new features and unique offerings. Animated in After Effects, implemented with Lottie.
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 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.

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

Don Norman