Before Lottie, to implement animations in web and app interfaces, developers had to export them in low-quality formats or try to reconstruct them in code from scratch. This often resulted in animations looking sloppy, suboptimal, and far from the motion designer’s intent.
In 2015, Hernan Torrisi created a plugin for Adobe After Effects called Bodymovin that allowed designers to export JSON format descriptions of animations that can be used to render the animations at runtime. Two years later, engineers at Airbnb developed iOS and Android libraries that could render these JSON files, which they called "Lottie". It is based on vectors, making Lottie animations infinitely scalable and much smaller compared to raster formats like GIFs and MP4s. It was like the new Flash, but just a whole lot better and open-source.
Later the same year, LottieFiles launched, a platform for animators and developers to test, share, and showcase their animations online. The growing community of motion designers that made their animations freely available on the platform attracted more designers, developers and marketeers that were looking for motion graphics to add to their interfaces, ads and presentations. Paired with a whole range of tools and features provided by LottieFiles, this led to the formation of the largest, most active community of animators, designers and developers around Lottie animations.
500,000+
registered users.
3mn+
uploaded animations.
Sweet, right? So, what was the problem?
The platform’s library of millions of mostly free animations was (obviously) the most frequently used aspect. Designers, developers and content creators surged the platform looking for animations to use in their projects. The second most used feature of the platform was its Lottie preview tool which allowed designers and developers to test their animations on the web and on mobile. The problem was that the rest of the platform appeared to have been largely ignored or unexplored by most of its users.
LottieFiles provides a barrage of tools to test, edit and convert animation files, plugins and libraries for designers and developers to integrate Lottie into their workflows, along with courses, guides and documentation to help users learn how to make the best use of Lottie. The website also hosts a community discussion forum, FAQ & support links and a regularly updated blog. While LottieFiles was building the most comprehensive platform for working with Lottie animations, only a tiny percentage of its users discovered and utilized its full range of tools and features.
User flows were not well directed, leaving the majority of users not engaging with the range of features and resources available on the website.
Important features and information were fragmented and scattered across the website, often hidden in seemingly random nooks.
The website lacked a coherent structure and navigation that catered to the different kinds of users that visited the site for different tasks.
A super agile development and implementation of tools and features had left the website with subpar user flows and overall user experience.
With an average of 2000 new users registering every day, the platform needed to redesign its sitemap and information architecture to better serve the user community and support the company's business plans.
To identify and better understand the causes and impacts of the problems faced, we conducted an extensive UX audit. We took a multi-faceted approach, examining user analytics data, conducting heuristic usability evaluations of the web interface, and reviewing the offerings of competitors. This in-depth audit process allowed us to analyze the different layers of the problems and provided valuable insights into potential solutions.
Information about the users and their behaviour patterns on the platform was derived from both quantitative and qualitative sources. Data from analytics tools like Hotjar, Google Analytics, PostHog and Redash provided information about user behaviour, while surveys and interviews help us get to know who our users are and how we can cater to their needs.
%20User%20segments.png)
Details collected on the sign up form paired with user journey information for analytics tools helped us understand the user segments and their respective use cases.
%20Pageviews%2C%20Funnels.png)
Data on pageviews and user funnels provided a clear picture of the pages that drew in the most traffic and the aspects of the toolset that drove conversion for the whole platform.
%20Click%20data%2C%20Scroll%20heatmaps.png)
Scroll heatmaps and click data told us what our users were paying attention to, but more importantly, what they were missing and how.
%20User%20interviews%203%20quotes2.png)
In-depth interviews conducted with power users of LottieFiles helped discern the platform’s strengths and the gaps to fill.
We conducted a heuristic evaluation of the platform’s interface to identify usability issues and improve the user experience by examining factors like ease of use, UI consistency, user freedom, and visual hierarchy. We also checked for pain points in user flows, identified opportunities to add missing calls to action at relevant spots, and even uncovered some bugs during the process. We were able to discover several areas for improvement and make design changes to enhance the overall usability of the product.
%20Usability%20Heuristics.png)
Since LottieFiles is the only major player in the Lottie landscape, the direct competitors were some relatively simple SVG animation creators that provided little insight into building a complete platform. So, we identified similar players in the industry that offered a comparable ecosystem of tools and services and proceeded to study how they engage their users.
The review involved comparing the features and functionalities of our product with those of the competitors, and creating perceptual maps to visualize their userbase and offering similarities with LottieFiles. Through the process, we obtained useful information on how similar platforms were directing their users through their websites and products, allowing us to learn from their design approaches.
%20Competitor%20analysis.png)
%20Feature%20comp%20%26%20perceptual%20map2.png)
Armed with insights gathered from the audit, we began redesigning the platform’s sitemap and navigation for more coherent and intuitive user flows. We explored different ways of grouping the tools and resources on the platform to ensure seamless flows for different user segments and their use cases.
%20Affinity%20map.png)
%20New%20Sitemap.png)
To provide a comprehensive listing of the features, tools, and resources on the platform, we divided them into four main use cases: Discover, Design, Code, and Learn. Based on the new sitemap, we redesigned the website’s header nav bar, its menus, and the footer to effectively serve the different needs of designers, developers and content creators. We also moved the search field in the header down in hierarchy to encourage users to explore the full range of resources and tools on the platform, rather than just focusing only on the animation library.
%20Header%20iterations.gif)
%20Old%20vs.%20new%20header0.png)
%20Header%20versions2.jpg)
Coming up with a new homepage design started with breaking down the old homepage into its component sections and analyzing each for details like intention, pain points, number of clicks, percentage of users scrolling to that section, etc. We evaluated the purpose and conversion potential of each section based on the information it contained, the number of views on the pages it led to, and the number of users retained over various steps in those respective funnels.
%20Homepage%20heatmaps.png)
%20Homepage%20breakdown.png)
Based on information gained from the old homepage analysis and references from competitors, we identified key features and elements that should be included on the page. We used low and high-fidelity wireframes to experiment with different layout and design options, testing and refining them through an iterative process. An iterative and collaborative approach involving stakeholders from business, design and development allowed us to create a homepage that was both visually appealing and effective in driving conversions.
Following the homepage redesign, we began working on updating the design of the rest of the platform as per understandings from the UX audit. We expanded the existing UI kit into a comprehensive design system shared by the design, development and marketing teams. We expanded the colour palette, type system, and icon library to fit the needs of the new design language. We set up an extensive repository of UI elements with state information and usage guidelines to ensure the design team finds what they need without hassle. We worked closely with the development team to create a unified system with shared nomenclature so as to streamline both the design and build processes.
%20Design%20sys%20colours.png)
%20Design%20sys%20type.png)
%20Design%20sys%20icons.png)
%20Design%20sys%20art%20direction.png)
%20UI%20kit%20Molecules.png)
We used the atomic design methodology to set up the different levels of the design system while allowing for scaling when required by upcoming pages, tools and features. Equipped with an adequate system, we started working on redesigning existing pages that are key for user conversion, following the same method as the homepage revision. We also designed the new pages in the revised sitemap that were added for better information organization and user flows.
%20Showcase%20page.png)
%20Integrations%20and%20plugins.png)
%20Showcase%20page.png)
%20Screens.png)
fin.
.svg){kind=small}
%20Homepage%20iterations%20wBG.png)
