Fifth Third mobile app loading screen
A loading animation built from the app's existing icon set and handed off to developers as a Lottie.
Brief
The UX team was building a style guide and icon set for the Fifth Third mobile app, and the loading screen needed to feel like it belonged to both. The animation would pair a new set of icons with copy from the team's writers, and it had to sit naturally within the existing UI.
Approach
I started from the style guide and the team's icon work, designing a new set of icons made for this animation. The goal was a family that worked as a set and settled comfortably into the app's existing UI. Product owners and UX designers reviewed several rounds of iterations with me until we landed on a final set.
Build
With the icons and copy locked, I moved into After Effects and choreographed each icon so one handed off to the next, keeping every transition quick and seamless. Once the motion was final, I exported it with a Lottie plugin and delivered the files to the development team.
Result
Customers felt the loading time was shorter and the experience more enjoyable. Positive reviews grew and the app's overall rating went up. The animation did its job quietly, improving the experience without ever interrupting it.
Designing the icons
Each stage of the loading screen got its own icon, and each one went through several versions. This is how they developed, from early explorations to the pairs that worked best together as a set.
Have a project in mind?
I'm available for freelance motion, UX/UI and video work, including:
- Explainer videos, software tutorials and brand sizzles that make complex ideas easy to follow
- Product and UI animation, including interactive web motion built with Lottie and Rive
- Animated ads and social media content, including short-form video I shoot and edit, and banner and media spot ads adapted across sizes and platforms
Tell me what you're making and what your timeline looks like!