Wondergrade

Wondergrade is a family-friendly app for young children and their parents to learn emotional regulation skills (i.e. how to calm down when children have big emotions). This app started out as a self-initiated project, and I was hired by the Wondergrade team after I presented my research insights and redesign proposal. After joining Wondergrade, I focused on redesigning the children's section through UX research, strategy planning, and UX design.

problem

Wondergrade wants to serve both parents and children, but it served neither well.

Prior to the redesign, Wondergrade's team were not sure if they should expect parents' involvement while children were using the app. As a result, there was a lack of clear child-centered design guideline. Children had trouble using the app by themselves. Moreover, parents were confused if the app is for them or for children.

redesign Overview

Before: design required parent intervention

After: children can use it independently

initial independent research

Playtesting with families

Below is an excerpt of an analysis report I made for Wondergrade. The excerpt focused on findings from my playtesting sessions:

Design implications

Key design challenges

From playtesting sessions, it was clear that target age range children (3-8 years old) didn't understand what complex terms such as "meditate" meant. All child participants disengaged from Wondergrade's audios after 2 minutes. Most importantly, parental guidance was needed. I synthesized these findings and summarized 3 key design challenges:

Design principles

Based on my research insights and reference on industry trends, I synthesized 5 key design principles:
‍
1. simple word choice
2. moving elements
3. large hot spots
4. obvious interactive elements
5. clear verbal prompts

Design goals & strategies overview

After discussions with Wondergrade's co-founders, we decided on the following strategies to reach Wondergrade's 3 main design goals: clear confusion about who the app serves, highlight children's learning, and increasing children's engagement.

Now I'm going to take you through the ups and downs of the app development.

01. Clear confusion (walkthrough of design process)

A separate app for children?

Wondergrade's co-founders decided to create a separate app for children called "Oli's Toolbox", and I took the lead for the design. With constraints of limited budget, Wondergrade was not able to develop new content. Therefore, I decided to focus on content reorganization and came up with the following 5 solutions:

Design 1

Design 2

Design 3

design 4

design 5

New product decision shifted the design

The co-founders made the decision that parental involvement is not expected when children are using Oli’s Toolbox. This product decision further drove the need to make the app more child-friendly. Hence, I examined popular children's apps on the market, including Khan Academy Kids and Sago Mini World.

I reduced the number of elements on screen and removed the tap bar so that the interface can be more child-friendly.

However, there was a strategic change due to engineering cost

I suggested another way to reduce confusion while minimizing engineering cost: a login redesign that marks the entrance for parents and children separately. I designed the layout of a child and a parent and had the button colors match the two.

Quick MVP buildout for rapid testing

After discussing with the co-founders, we reached the designs below.

Playtesting with 3 new families

I discussed research questions and created playtesting guides with a researcher.

Some key insights I found during my playtesting sessions were:
‍
1. Children loved coloring pages and video practices and were able to follow along
‍
2. Younger children had trouble understanding the swipe interaction
‍
3. Children tended to exit a page when they saw still images or audio instead of a video guide

For design, we need a brief onboarding tutorial and add more moving elements in the practice page. These improvements both aligned with my design principles.