Easelly
Easelly is ideal for educators, students, business owners, and executives who need to convey a thought, lesson plan, or concept in an easy-to-follow visual form. With 3 weeks timeframe, as my role as a UX/UI designer and product designer. The mission is to make Easelly the go-to presentation tool for educators, and encourage more PRO subscription upgrades.
Client
My Role
UX/UI Designer and Product Designer
Client
Easelly
Duration
3 Weeks
“To enable anyone to represent an idea in a visual way.”
THE
CHALLENGE
Easelly is ideal for educators, students, business owners, and executives who need to convey a thought, lesson plan, or concept in an easy-to-follow visual form.
​
As teachers are preparing for the start of the school year, they are having to adjust to distance learning given the constraints of Covid-19. Now more than ever, teachers need innovative ways to keep their students engaged and focused during remote lessons.
​
​
​
We helped provide a design solution for Easelly’s animation library that supports educators who are adjusting to distance learning. Take into account the opportunity to show the benefits of upgrading to a PRO account within the animation library.
OUR
MISSION
Provide a design solution for Easelly’s animation library that supports educators who are adjusting to distance learning. Take into account the opportunity to show the benefits of upgrading to a PRO account within the animation library. Provide a clickable prototype within a 3-week timeline. Team of four designers collaborating via Zoom, Slack, Miro, and Figma.
​
​
Improve Easelly's Animation Library for the current and new users
DESIGN PROCESS
Who is Easelly designed for?
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 us to design solutions that were feasible and able to be quickly implemented into the animation tool.
How might we...
After synthesizing all of our user research data in an affinity map, we were able to develop a strong sense of what the users habits, needs, and values were. The how might we statements below helped guide our design thinking as we moved into our first design studio session.
.png)
DESIGN
ITERATIONS
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. 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.
​
​
Since current Easelly's Animations Library have limited free contents for users to use. From our user research, we found that many new and returning users would like to explore and learn more about what the PRO account’s can offer.
I have updated the design by added in a PRO blue icon next to the contents to indicate the difference. Users are able to simply click on the PRO content and to try it out on their canvas. They can also click on Try Easelly PRO button to view what the PRO can offer.
TRY PRO FEATURES
DESIGN
IDEATION
With the user’s research in mind, in our design studio our team together hand-sketched different screens for our animation panel. Brainstorm ideas to solve our users pain points.
​
-
From our research we find that a lot of users use search first. Efficiency and easy to navigate. We want to organize categories inside the animation panel and with a search bar on the top for easy navigation. (to improve learnability)
​
-
Users find that customizable tools for their animation are helpful for their presentation. And with our user’s accessibility and learnability in mind, We proposed this simple to edit animation tool by Easelly changing speed, transparency and loop.
​
-
Since current animations have limited animation contents. From our research, users would like to explore and learn more about PRO account’s offers.
​
​
OPTION A
Top Panel
OPTION B
Side Panel - WINNER
DESIGN
SYSTEM
Design system - it helped our design flow to stay consistency throughout our design. With new and returning user's accessibility and learnability in mind, I have designed a updated iconography for the Animations Library tab. For the the purpose to help better communicate with the users on what animations category offers.
​
With the updated Iconography which are more consistent look with the competitors. Also have helped users to be more familiar with the icons.
Update color palette to Easelly brand’s blue tone. Offering a PRO users blue and an lighter Easelly blue. By incorporating different shades of Easelly blue, we were able to update their UI more consistently with their overall brand.
Usability
Test Result
NEXT STEP
TAKEAWAY
