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.
4 months (2023)
UX Research, UX Design, Content Creation, Playtesting
1 UX researcher, 1 UX designer, 1 developer
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.
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:
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:
Lack of explanation of complex terms
Limited engagement of audio guidance
Children didn't engage in the activities
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.
• Create a separate app for children named “Oli’s Toolbox”
• Create an outline of skills Wondergrade want children to develop
• Launch weekly newsletter
• Redesign children's section
• Create more games and a reward system
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:
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.
02. Highlight learning
Outlining essential skills
I worked within a researcher to review literature on children’s emotional regulation skills and summarized our findings into different categories.
Weekly newsletter: activity packs
To address any confusion about using Wondergrade tools, I established a weekly newsletter for parents to introduce the different tools in context.
We decided to go with the scenario-based design because it gives room for more creative activities for content creation and children learn better when they learn things situated in contexts.
We also tested with children and explored other printable on the market. We found out that children enjoyed coloring a lot, so we added coloring activities in the activity packs.
This is a template of the final design.
03. Increase engagement
*I am not able to share details about my design on increasing user engagement because most of the features are not yet launched. Below are some early-stage sketches and process documentation.
More mini games for children
While this is on the lower priority side because Wondergrade has limited development budget, I ideated different games and brainstormed game scenes. Here are some sketches I did.
Reward system for children
To incentivize children to explore different tools, I also designed a reward system for them to unlock new coloring pages after they practice 5 tools.
Preparing for final launch
During my last 2 weeks at Wondergrade, I led a final round of playtesting with 4 new families before the product launch. I designed tutorials for the swiping mechanism and coloring activities.
Designing for children with children
I really enjoyed playtesting with children and observing how they interacted with Wondergrade. Since many of the young children are not used to digital apps, it was surprising for me to see their initial struggles with swiping interactions and how they were able to master them with practice. I also had a chance to test with children in a wide age range, and I was amazed by how both 3-year-olds and 8-year-olds were able to gain from the app.
Above all, I learned how to advocate for a child-centered design and utilize essential design principles to craft interfaces and learning experiences that are engaging and meaningful for them.