Enhancing User Experience and Engagement with Animations

Industry

IT & Computing

Work Done

Challenge

This client is a blockchain-based vertical marketplace for watch collectors.

They reached out to us to improve user experience by adding animations to their marketing website.

The biggest challenge with a static text-heavy website without user interaction is an absence of emotional connection: The website lacked personality and failed to establish a connection with users, making it feel sterile and impersonal.

The other challenge is that, with animations, we can’t use many videos or images to simulate motion as they are network-heavy resources and tend to slow the website down.

The solution

Setting Goals
The team defined the following objectives to guide their efforts:
1) Inject personality into the website to foster an emotional connection with users.
2) Maintain a balance between usability and visual appeal, ensuring a seamless user experience.
3) Ensure that all animations were implemented using code and not images or videos.

Research and Analysis
The team carefully studied all the animations created by the designer. They then determined the ones that were possible with just CSS and those that couldn’t be created using CSS.

For the non-CSS animations, the team used LottieFiles. A Lottie is a JSON-based animation file format that allows you to ship animations on any platform as easily as shipping static assets. They are small files that work on any device and can scale up or down without pixelation.

Technologies used

Results

The team worked on a total of 7 animations, each of which explained either the vision or a feature of the client. Some of these were also interactive, which helped create a connection with the users.

Using LottieFiles, it was also ensured that the animations ran at 60fps while being incredibly small in size, thus not affecting the performance of the website

The usage of CSS and LottieFiles also helped in reducing the turnaround time. We were able to deliver everything in just 5 days, which meant reduced costs for the customer.