hands on
Keep the visitors engaged and increase the CONVERSION
Ceros, Rive, SVGator
1 months
Challenge
Interactive elements and animations capture users' attention and keep them engaged. By making the browsing experience more dynamic and enjoyable, users are more likely to spend time exploring the content.
The main challenges were:
1. Performance Optimization
Animations and interactive elements can significantly impact website performance. Ensuring that these elements load quickly and run smoothly is crucial, especially on mobile devices where users expect fast and responsive experiences.
2. Cross-Platform Compatibility
Web animations and interactions need to work seamlessly across various browsers and devices. Achieving consistent performance and appearance can be challenging due to differences in how browsers handle animations and interactive elements.
3. Accessibility
Ensuring that interactive and animated content is accessible to all users, including those with disabilities, is essential. This involves providing alternative text for animations, ensuring keyboard navigability, and making sure that animations do not interfere with screen readers.
4. User Experience
While animations can enhance user experience, they can also detract from it if overused or poorly implemented. Striking the right balance between engaging animations and usability is key to creating effective web experiences.
Process
I explored multiple options and platforms that could possibly work for our various use cases. I was looking into tools to build micro interactions, SVG animations as well as more complex interactive elements.
Ceros: It is a platform designed for creating interactive digital experiences, allowing us to build engaging content without needing to write code. With its drag-and-drop interface, it simplified our design process in creating engaging and dynamic interactive content such as infographics quizzes, assessments, promos, microsites, modules, etc.
Rive: It is a tool that allows us to create animations and interactive content that seamlessly integrate with code. I was able to learn the basics and quickly produce animations, primarily for showcasing product features and adding user interaction with the animations. It worked well with the modern SAAS page designs and definitely have created the wow factor.
SVGator: It is an online, no-coding required SVG animation platform that lets us to create and animate SVG illustrations, logos, icons, and more. The benefit of using this tool is the fast production time and light files that doesn't compromise the page speed.
Impact
Post-publishing, user engagement and the user satisfaction significantly increased. The participants of the UX research sessions were keen to engage with the content, but also the analytics showed that almost every page visitor had an interaction with the modules. One of the most popular experiences are the Assessments, "Help me choose" questionnaires and product finder modules.
