CISCO
Interactive Web Animations
Engaging users at the right moment can be challenging in web design. To enhance user interaction and better illustrate the product and its capabilities, we created interactive CSS animations for Webex Connect on several separate occasions. These animations invited users to engage with the website in a playful and informative manner.
Challenge
Engaging users on the website while explaining the complexity of what Webex Connect is and where it fits within a business was a significant challenge. Traditional methods, such as static images or videos, were insufficient in conveying the intricate functionalities and value of the product. We needed a way to make this information more accessible and engaging for users, encouraging them to interact with the website and understand the product’s capabilities in a more meaningful way.
Solution
To address this challenge, we decided to use interactive animations instead of static images or videos. For the first project, we hand-coded CSS animations, working closely with developers to ensure smooth transitions and responsive interactions.
For the second project, we utilized Adobe Animate to create complex, dynamic animations. These animations were exported as an HTML5 canvas and integrated into the website by the development team. This approach allowed us to better control the design, as well as the level of interactivity.
The result
For every projects, the publication of the interactive animations led to a significant increase in user engagement. The click heatmaps revealed that users were actively interacting with all elements of the animations, indicating a high level of engagement and interest. These interactive features successfully captured users’ attention and provided them with a deeper understanding of the product’s capabilities. The dynamic and immersive nature of the animations not only enhanced the overall user experience but also demonstrated the product’s value in a compelling and engaging manner.
Engagement rate
The homepage, where the first interactive animation was used, saw a significant increase in engagement rate, rising by 23%. This substantial improvement underscores the effectiveness of using interactive animations to engage users and communicate complex product information in an accessible way.
Increase in CTR
In the previous non-interactive version, there were only 32 clicks from users who scrolled to that section of the page. However, with the new interactive animation, the number of clicks surged to 127, despite the average number of visitors remaining relatively consistent during this period. This significant boost in click-through rate highlights the effectiveness of the interactive design in capturing user interest and driving engagement.
Leveraging people
People are the most valuable resource, so effectively utilizing available skills and time is crucial in innovative projects like this. In the first instance, we worked with a CSS developer, tailoring the final design to their capabilities and what could be efficiently achieved within the timeframe.
For the second animation, adding a motion graphics designer allowed for greater control using Adobe products. The designer created the animations based on the storyboard, with the developer supporting by outlining constraints and export requirements. The developer then integrated the final code into the site. This collaborative approach significantly enhanced the quality and effectiveness of the final product.
The third project required a rapid turnaround, so I leveraged my skills and a Figma animation plugin to complete the task independently. This approach allowed for quick iterations and adjustments, ensuring the project met its tight deadline without compromising on quality. Each of these experiences demonstrates the importance of adaptability and the strategic use of available resources to achieve the best possible outcomes.