Redesigning Education.com's Guided Lesson App
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.
1. Improve retention by improving the kid frame app experience.
2. Strengthen the relationship between designers and engineers.
As Research & UX Lead, I defined, prioritized, and executed the research strategy. I also prototyped and validated the design.
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
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
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
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
Kids don't know:
Where to start
What they are working on
That they are making progress
To promote collaboration I led Education.com's first design workshop!
Image: Education.com's first design workshop
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.
Image: Major screens of clickable prototype
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
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.
Auto start so user can follow an easy-to-follow path
Design is more kid friendly
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.
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
I added the "Start lesson here" so when students re-navigate to the map, they have a better cue of where to start.
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!
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.