Overview
Drives is a trip tracking feature in the GasBuddy app that is geared toward helping users spot bad driving habits, plan better routes, and improve fuel efficiency (and if you’re lucky enough to be in the US — Drives could help you secure a lower auto insurance rate).
For the refresh of GasBuddy’s Drives feature I coordinated with our telematics partner, Root Insurance, to help bring the Savings Score to life — An aesthetically pleasing Lottie animation designed to give users something to look forward every time these visit this screen to bring them back more frequently.
The Savings Score Asset
As the collaborative Drives feature redesign process wound down and engineering time grew near, it wasn’t immediately clear who — GasBuddy, or our telematics partner Root — was responsible for delivering the final asset. All we jointly knew was that the Savings Score depicted in the design was supposed to be an animation.
But seeming as I never pass up the opportunity to create a Lottie animation I took ownership and rolled up my sleeves to beging transforming the asset pictured below into a motion graphic.
(I take no credit for the above design of the Saving Score, major props to the Root product design team).
Animation Creation Process
Unlike some of the Lottie animations I’d worked with in the past, this one posed a few challenges because the design of the Savings Score uses styles that both Lottie and the native renderers don’t get along with, namely: Gradients and Drop Shadow.
This animation required some rapid fire experimentation for the animation to accurately represent the Savings Score design.
Generally, my Lottie animation process is as follows
- Tidy up the SVG assets behind the scenes in Sketch (or Figma)
- Export SVG assets from Sketch (or Figma) and convert the new SVG to a .AI file
- Import the new Adobe Illustrator file into Adobe After Effects
- Convert the Illustrator file to vector outlines and shapes in After Effects (remove merge paths, rename and group all layers)
- Re-style and animate the vector graphics (replicate gradients, shadows, trim paths, masking, timing)
- Execute the animation behaviour
- Export from After Effects to .JSON using the Bodymovin plugin
- Test how the animation renders on both iOS and Android platforms using Lottie native preview apps
- Troubleshoot rendering issues with fixes that work for iOS, Android, or both
- Provide documentation (in this case, a “score map“) for the engineers to match their code to the animation using the Lottie SDK, along with instruction on how and where to natively incorporate styles.
The Animation – Example Render
As parts of this animation need to be native code combined with Lottie .JSON, this render was used as a demonstration to the engineering teams for what the final presentation of the animation should look like.
The Animation – Live App
How long did this take to make?
With some additional platform specific styling and implementation recommendations, along with the “score map” I’d generated to help tie animation with code for our engineers, this animation took roughly over a week’s worth of design and testing time to deliver and only two days to implement.
I love Lottie ❤️
Lottie is a lightweight SDK that can turn weeks or months of engineering time into only a few days of development effort. My goal when producing a Lottie animation is to make sure it gets done quickly, looks as good as it can whilst working within Lottie’s limitations, all while making sure it is just as easy to implement with as little fuss as possible.
Comments or suggestions on how to improve my portfolio?
Don Hancock 