Loading animation

The opportunity

During the implementation of the new Pre-Live screen, a point of attention was identified. When accessing Americanas Live, either through the Americanas app or through an external lin, our backend needed to request, from the B2W API, the information on whether a live was taking place or not. In other words, a loading time was needed to determine whether the user should be directed to the Live or Pre-Live screen.

At first, our development team did not change the static transition screen provided in the MVP version of the product. However, we questioned how much it would impact the user experience, as it now took a few more seconds, which could be many seconds in unusual cases. Thus, we arrived at the idea of proposing an animation that would keep the user entertained until the end of the data loading.

Technical impediments

In alignment with the development team, we sought to understand which animation format would be easier to implement, after all, it was an opportunity that would be taken to the Product Owner and the cost of development would be their primary concern. It was decided that we would use the Lottie Files platform, with the After Effects plugin, which transforms vectorized animations into .json, the format preferred by our team due to the ease of implementation.

This is the last case on the Live project. Go back to pin message, or discover the Tattooz project