Problem: Users, particularly educators, struggle with discovering and implementing animations into their presentations.

Solution: Improve the usability of the animation tool and encourage more paid subscription upgrades for educators that use the platform.

Jump to a section in this case study!

Research: Explore & Empathize - retrospective journey map

Research: Identify & Humanize - user flow

Design: Ideate & Design - mockups and design system

Design: Prototype - interactive prototype

Explore & Empathize

Let’s walk through why I conducted each research method, some of the things I made, and how the insights I gathered contributed to the redesign of this tool.

I conducted a usability test and affinity mapping

I created a retrospective journey map

Journey Map

I created a journey map to illuminate the users emotions while they are using the current animation feature. This helped to empathize with the user and clearly see which steps in the task where confusing, frustrating, or just not that enjoyable.

You can see that the last four steps the user takes causes them some confusion and frustration. This gave me a good idea of what steps we would need to address in order to improve the users’ experience.

Usability Test & Affinity Mapping

I conducted a usability test to see how a real user, a retired educator, uses the current Easelly animation tool. She was given a task and I observed her as she completed it.

Task: On your blank template, incorporate three animations that could represent you for your back-to-school presentation. 

My teammates and I then synthesized all of our user research data (from usability tests and interviews) by creating an affinity map.

Here is a snippet of data related to the animation feature, my insights are on the purple sticky notes.

We were able to group data points and find common themes throughout our research. This helped use define our problem and brainstorm our proposed solution.

Identify & Humanize

I defined a problem and solution statement

I created a user flow

The Problem: Educators need an animation library that is diverse and easy to use so that their lessons are relevant, engaging, and interactive for students in the distance learning environment.

The (proposed) Solution: We believe that organizing and clearly labeling the contents of the animation library will improve learnability and increase educator usage of animations within their presentations.

User Flow

With the problem and solution defined I created a user flow of the current interactions the user takes while using the animation feature. This clearly illustrated the current flow of steps and decisions, which helped me design solutions that were feasible and able to be quickly implemented into the animation tool.

Accessibility

Easelly’s mission is to “Enable anyone to represent an idea in a visual way”. They currently have approximately 3 million yearly users that are educators, students, organizations, and small businesses. It was important for us to keep accessibility, and ease of use in mind as we began our design phase.

Ideate & Design

I designed a few mockups that would create a diverse and easy-to-use animation tool. After deciding what features, updates, and changes would be in our design, I created a design system that included elements that already existed on the Easelly platform, as well as a few new ones that we incorporated into our design.

Improved Organization: I reduced the category options from 30 to 10, and created subcategories. Our card sorting results helped us define categories and create logical subcategories.

Improved Learnability: Tool tips and clear labeling of the types of effects allow users to quickly learn the interface and effectively create impactful animated graphics and presentations.

Encourage paid upgrades and increase business revenue: Clearly labeling features that require a paid plan shows the user the benefits of upgrading. It also presents the business in a more transparent and trustworthy fashion. *Reference the journey map above that shows the user's frustrations around downloading an animated graphic.

Prototype

The interactive prototype shows how the user would navigate the newly designed animation tool. This flow shows the process of selecting an animation and editing it.