DESKTOP DESIGN PLATFORM
Easelly
DURATION
3-week sprint
MY ROLE
User research, wireframes, prototyping, mockups, project management, client communication
TOOLS
Sketch, Figma, Miro, Maze
GOAL
Our team was tasked with redesigning Easelly’s animation library within their infographic designer platform.
OVERVIEW
The client, Easelly, is a data visualization tool that aims to enable anyone to represent their ideas in a visual way. Easelly is currently undergoing a complete UI overhaul, and my team’s scope was to solutionize around the animation feature. This feature allows users to add dynamic movements and effects to icons to create visual interest. Our goal was to center our design on the needs and goals of users who are educators. We conducted user interviews and contextual inquiry, and I facilitated design studios to begin ideation. We then tested this design via an interactive prototype and created high fidelity mockups for the client to implement by Q4 2020.
01 | Discover
DESIGNING FOR EDUCATORS DURING COVID-19
As a result of Covid-19, many school districts in the US have had to rapidly shift to distance learning, creating the need for teachers to be able to quickly adapt their lesson plans into dynamic and engaging digital presentations for their students. Getting to know teachers’ goals and pain points by conducting user interviews and contextual inquiry, we were able to develop a design that created efficiency and clarity for the process of animating an infographic. A full research report with all of our team’s methodologies is available here.
USER INTERVIEWS
We conducted user interviews and contextual inquiries with six middle and high school teachers to get a baseline understanding of how educators use animations within their presentations, and how Easelly’s current offering was serving them.
“I am making more digital presentations now than before Covid-19."
"I couldn't find enough school-related animations."
“I didn't understand why some categories were listed but didn't contain animations."
INFORMATION ARCHITECTURE
My team conducted a card sort to narrow the volume of categories within the animation library. Through this, we were able to streamline the available options and showcase more familiar category names to minimize time spent searching for images.
02 | Define
“HOW MIGHT WE” STATEMENTS
Gleaning some insights from our user interviews, we were able to define “How Might We” statememnts to better understand teacher’s values when interacting with Easelly, and help develop designs that aligned with those values.
PROBLEM STATEMENT
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.
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 PERSONA: JEN
03 | Ideate
DESIGN STUDIO: HAND SKETCHES
There were 2 key areas we focused on during our early ideation: the animation search feature and the editing/customization capacity. I introduced tooltips and instruction pop-ups for first-time users to enhance learnability.
WIREFRAMES
I created 2 sets of wireframes and conducted parallel prototype testing to determine which layout users found more intuitive and familiar.
VERSION A
Version A houses the animation library and all the editing tools within one fly-out panel. Through usability testing, users found this version saved them time and effort navigating Easelly’s tool.
VERSION B
Version B takes the user to the animation library in the fly-out panel, and then once the image is placed on the canvas, the top panel appears where the image can be customized. This is similar to the current user flow in Easelly and therefore might have been easier implemented, but our user testing showed this created confusion and added time to the user task. We proceeded with Version A to create color mockups.
04 | Deliver
MOCKUP PROTOTYPE
This prototype shows the user task of adding a cat image to the canvas, and then customizing the animation effects. This being a first-time user, there are instruction pop-ups to improve learnability of the tool. At the end, the user also previews an image available on the paid (PRO) plan, which I proposed to the client as a potential way to increase upgrades.
DESIGN SYSTEM
Drawing from the platform’s existing design system, I made Easelly’s signature blue more prominient throughout the animation tool. I also introduced a vibrant “PRO” blue to differentiate tools and images that were solely available on the paid account, thereby increasing transparency with users and creating visual interest. My teammate incorporated new iconography based on competitive analysis, to help users feel familiar with the platform.
05 | Next Steps & Takeaways
Throughout this sprint, I became increasingly aware of the value of visual accessibility to support inclusive learning environments. Teachers told us they needed a platform that would support all the learning needs they interact with in the classroom.
Easelly plans to implement these designs by Q4 2020. I plan to conduct further user research and address any remaining pain points.