LottieFiles
1 month
2018
Animation, creative
5.2 million
Motion Canvas is a feature within the LottieFiles app that enables user to use open-sourced animations to use pre-made templates or create content of their own and share it to their preferred social media platforms.
Context: In the initial phase, all motion canvas templates are presented in a scroll list for users to browse. However, this approach has posed challenges in discovery and has made the landing screen overwhelming.
Objective: To redesign the motion canvas experience and repurpose the app to foster creativity and encourage users to share their creations on online platforms.
As a result of enhancing the feature, the landing screen of the mobile platform has been repurposed and restructured. Consequently, app registrations increased by 23.1%, exports surged by 10.9%, and there was an 8% increase in business revenue.
What is Motion Canvas?
Before starting, here is a video featuring the LottieFiles mobile app. The designs here are older and this project will be looking into enhancing some parts of the app, specifically, the motion canvas, which is shown in this video at 0:05-0:17.
Home screen: The landing screen of the mobile app appears less exciting, and hierarchy is absent. Upon landing on this screen, users are unsure how to get started.
Templates: The discovery of pre-made templates is not as user-friendly, and the browsing experience is pretty restricted.
Motion Canvas: There are limited features available within this canvas. Users need more customisations to make their designs personalised.
Share drawer: The share drawer is currently wordy, lacks hierarchy and does not facilitate sharing to social media.
Goal: To identify top templates favoured by users and prioritise different categories of templates within the LottieFiles app.
Plan:
Analyse, categorise templates from similar platforms and note distinctive features.
Determine most used templates considering their placements in the app.
Assess user journeys from browsing to sharing/ exporting selected templates.
Document post/template creation flows (optional).
Impact: To establish a template roadmap for the mobile team based on research findings.
Digging into data: Prior to organising a brainstorming workshop, I delved into the current performance of Motion Canvas to address key questions to guide myself and my team through brainstorming. Questions I considered during data analysis included:
Who are our target users, what are their goals and aspirations?
What templates are performing well within the LottieFiles app?
Are users primarily exporting public (open-sourced) animations or their own creations?
What is our objective as Product Designers and Product Managers in assisting users?
Workshop: I led a session with key stakeholders, including the Product Manager, Product Designer, and Head of Product Design. With the insights I gathered, we reviewed past Motion Canvas feedback, analysed data insights, and identified user groups and their specific needs.
Learnings from survey and data:
Evergreen templates give the highest engagements based on created designs and exports/ shares.
Content creators prioritise prompt actions.
Marketers focus on a variety of choices.
Rough sketches and low-fidelity wireframing are utilised primarily for ideating the layout and placement of contents, as well as organising current and new features for the app.
Challenge 1 : With the new app goals, to reorganise and repurpose the landing screen of the LottieFiles app.
Improvements:
Prioritising what worked well for users based on data collected, we deprioritised and reprioritised certain features in the navigation bar, showing clearer app direction and unique selling points.
The home screen now is focused on quick actions on creation and decluttered for easier discovery and navigation.
Challenge 2: Combining export formats and social media options into the same share/export drawer without overwhelming users.
Improvements:
User's primary action/preferred app as a quick action at the top of this drawer.
Sharing to social media as the primary action and downloading formats as the secondary action to declutter the drawer.
Overall, this project involved the revamp of the LottieFiles app's home screen, enhancement of explore screen, Motion Canvas user journey (create, add animation, change canvas, share), and an introduction of premium animations (paid). With these new enhancements, an onboarding journey was also introduced into the app for the users upon launching the app. These have contributed to the boost of registered users and number of shares/exports.
Increased app registrations
Increased number of shares/ exports of animations
Increase in business revenue
