The Problem

As we continued to develop the design of the web and mobile apps, we wanted to find more ways to delight users. 

The Solution

Our solution was to create a custom loader for the bet slip. The concept was a 3D coin that would endlessly spin as the order processed, and then drop into a coin slot and disappear when the order went through. Using Adobe AfterEffects, I created the animation so that it would be compatible with Lottie Files and so be lightweight and easy for the engineers to implement in the app. 

‍

‍

The Challenge

A challenge in this process was that Lottie Files does not render 3D effects, so the 3D appearance of the coin had to be simulated in 2D. I went through several different methods of creating the coin to figure out a way to show the 3D in a 2D fashion and so be compatible with Lottie Files. 

The Impact

This animation helps to keep users engaged in the loading time between when the user presses submit on an order and when the order goes through, and replaces any feeling of annoyance at waiting for loading to delight at watching the animation. It also serves as a reward and reinforcement of positive feelings, when the user sees the coin drop into the slot, they know they have made a positive action on the app. 

‍