Info   Contact   Misc.

Utrack App
Animations

Motion UI / Lottie Animation / Vector Illustration



Background  Utrack is an energy tracking app launched by Uswitch that helps customers save on energy usage, develop habits to monitor their energy use, and manage their energy bills easily.

To upgrade Utrack from a minimum viable product to a minimal lovable product, we decided to include a series of animations guiding users through their journey. From the landing page to error alerts, these animations aim to provide better context for users, enhance their experience, and add visual delight. I also designed the animated Utrack logo, which was incorporated into the Utrack marketing page and landing screen.

Challenges
  • Include 10+ animations in Utrack while keeping the app size as small as possible to ensure that it can be easily downloaded and used on a variety of devices.
  • Set a unified animation style that would work in all situations throughout the journey, from complex and realistic depictions of real-life energy usage scenarios to minimalist and easy-to-understand alert icons.

Solutions
  • Collaborated with product designers and engineers to determine the optimal format for the animations. We decided to use Lottie JSON to reduce the weight of the animations without compromising their quality.
  • Designed two sets of easing curves and applied a consistent motion pattern to the animations based on their intended usage.


Logo Animation The Utrack logo should have a similar style to Uswitch, but also convey its main function of helping users track their energy usage. We aimed to communicate "household" and "tracking" through the logo design to provide the most content. The house/graph symbol represents energy usage, while the animated fluctuating line better showcases the concept of tracking.

Motion Sketches

App Animations