easelly

Helping middle-school children create and edit infographics on an iPad

The Challenge

Easelly is failing to appeal to a portion of its primary audience because of it’s current unavailability on an iPad platform. The company launched an iOS application in 2014 which was criticized heavily. As a result the company chose to take down the app. Our challenge was to recreate a portion of the easelly app with improved user experience and information architecture.

Identifying The Problem

Through research involving a survey about easelly’s desktop and original app experience, and a detailed competitive analysis, we found that students and educators are one of the main users of this product. Many of these users are now switching towards canva (a competitor) as it can be used on iPads distributed in class to students. Also, teachers prefer canva’s intuitive interface over easelly’s originally released app. The largest pain point we identified in our research was that users had a hard time accessing the toolbar while editing a template and navigating through numerous icons, graphics on the original easelly app. Our redesign aims to solve this problem.

Design Goals

I started by listing the objectives of this redesign which are as follows:

Flow and Structure

Using the key insights from user research I created user flows:

• 1st user flow shows the paths that user would take once the user opens the app and selects a template.

• 2nd user flow shows the continued path of the user while editing the template.

Instead of directly designing the screens, drawing the structure and flow of the product helped me to understand how the user would use the app in different scenarios.

Choosing a Template flow

Interacting with Template flow

Ideation and Solution

Design Solutions

Paper Prototype

We conducted design studio in which after brainstorming ideas individually for the home screen and template editing screen, we combined and revised it down to four possible solutions bottom, side, top and pop up toolbar. These screens would be the main functions of our app that we would build upon, and explore with storyboards of their possible use.  Sketching out different screens and states helped me quickly explore concepts and ideas. I went through many different iterations of each screen on paper before deciding on a direction.

Iterations

We converted paper into digital and mapped out the layout of our interfaces. The first low-fidelity wireframe was made up of labelled buttons, with few icons or visual cues. Considering the comments and feedback from testing changes were made and presented again to users and critiqued to gauge ease of use. In order to assess users familiarity with web icons we tested them. This feedback helped guide our next iteration.

Annotated Wireframes

Prototype Video

Design Impact

User Testing

Client Response

What I Learned💡

EVERY design decision must be backed up by data. Our client wanted our team to not only present our iterations and final prototypes but also the numbers that backed those design decisions. He was very clear on making alterations based on user feedback. This taught me that design cannot be just for the sake of design, it should serve a purpose and provide a solution. There were times when I had to kill my ideas that didn’t best solve the problem and rebuild on user feedback.

Caring about accessibility. Apple’s HIG and Neilson Norman articles on accessibility were helpful for learning what font sizes and contrast ratios would suit all user types. I tried to incorporate these best practices while designing screens for easelly.