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.
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.
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.”
"If you're happy, things work better."