Redesigning Education.com's Guided Lesson App

Background

What is Education.com?

Education.com is an immersive learning environment that empowers teachers and parents to develop a child’s potential.  The Guided Lessons app provides pre-sequenced games for Pre-K to 5th grade students.

The challenge

1. Improve retention by improving the kid frame app experience.

2. Strengthen the relationship between designers and engineers.

My role

As Research & UX Lead, I defined, prioritized, and executed the research strategy.  I also prototyped and validated the design.

My process

This is my typical process for end-to-end projects.  I start by understanding the problem and diverging.  I converged to a specific problem to define it.  Then I diverge again to find many solutions to my defined problem.  Finally I converge again to zoom into one solution.  From there I test my solution and iterate multiple times to make sure I found the best solution to the problem.

Image: My design process

The problem

What is the original experience?

From customer support, we discovered that the kid frame experience needs improvement.  We were not sure exactly what area of the app needed improvement.

Image: Original experience

Understand

Task flow

Because of the apps complexity, I first familiarized myself by mapping out the system into a task flow.  Once I understood the flow I was able to hypothesize specific pain points.

Image: Task flow

Affinity map

In order to test my assumptions and identify other pain points, I designed a usability task.  I analyzed the data through affinity mapping. 

 

My key findings:  The main focus should be map view and play again areas.

Image: Synthesizing results of usability test through affinity mapping

Persona & user journey

To ensure the entire team understood who were designing for, I documented our persona using the Jobs To Be Done Framework.  I also mapped out the user journey to visualize the users current experience.

Image: Persona & user journey map

Define

Kids don't know:

  1. Where to start

  2. What they are working on

  3. That they are making progress

Explore

Design workshop

To promote collaboration I led Education.com's first design workshop!

Image: Education.com's first design workshop

Clickable prototype

Next I rapidly created a clickable prototype to test our ideas with our target audience, prekindergarten to 5th grade kids.  My main rationale was to make other games less accessible upon starting the app to discourage skipping around.  The screen exposing the other games is only available upon clicking pause.

Original

Redesign

Image: Major screens of clickable prototype

Validation

User testing with rainbow charts

I tested my assumptions using a usability test similar to the original usability task, to compare data.  

 

I documented the results using a rainbow chart and wrote a blog about it!  Briefly, here's how to read a rainbow chart: 

Image: Synthesis of usability test using a rainbow chart

Create

The high-fidelity portion of this project was passed on to another UI designer in order for me to strategize for the next project in the UX pipeline.

2.

Auto start so user can follow an easy-to-follow path

1.

Design is more kid friendly

3.

Screen is less cluttered to deter users from skipping around.  Roly (the cat) appears if no immediate action is taken, suggesting the user is stuck.  If the student clicks Roly, the hint fills the screen.

4.

If a user wants to navigate to another game, he or she must click pause.  From this menu, the user can easily navigate anywhere in the app.

Image: Parts of high fidelity design

5

I added the "Start lesson here" so when students re-navigate to the map, they have a better cue of where to start.

Outcome

This project was deprioritized for a while.  While waiting for development I continued to conduct user texting with kids on new games, new artwork, & worked on the revised flow of new game maps!  Check out an illustration I worked on here!

Key takeaways

1.  User testing with kids is very different from user testing with adults.  Because the data you collect can vary so drastically from kid to kid, ensure that you have double the amount of users, and have them spread across the age-range you are testing for.  Next time, I may further decrease the scope to a more specific age range since kids who can read have a very different experience than kids who can't.

2.  Design workshops are a great way to get engineers & other stakeholders involved.  There are a few things I learned to guarantee a smooth session.  First, make sure its a small, yet diverse group.  Second, make sure you have a time to time box things to maximize efficiency.

 

3.  This was my very first project at Education, week 2 of being at the company and a lot about this design process has changed since then.  Remember that there are many ways to do these design sprints, design critiques, and the entire design process.  We must remember to not just iterate on the designs, but on the process too!  We should never stop learning and we should constantly be finding ways to improving how we work together.

  • nocircle-medium
  • nocircle-dribbble
  • nocircle-twitter
  • nocircle-linkedin
Jasmine Rosen Product Design Portfolio