Wondergrade is an app for children aged 3 to 8 years old and their parents to learn emotional regulation skills (i.e. how to calm down when they have big emotions).
4.6/5.0 rating
Launched the app on the App Store and received positive reviews with a 4.6-star rating
+ 55% subscribers
Initiated a newsletter series and gained 55% increase in subscribers within first 3 months
I wore many hats: UX Design, Strategy, Research, and Content Design
Small start-up: 2 co-founders (1 neuroscientist, 1 visual designer), 1 developer, myself
User testing was not incorporated in Wondergrade's previous design process. To address this, the first thing I did was conduct playtesting sessions. Here are 4 key user issues I found after testing with 3 new users:
Issue 1. Cognitive Overload
Children were overwhelmed with 10 different activities on the home screen.
Issue 2. Complex Word Choice
Children did not understand what complex words like "meditate" or "affirmation" meant.
Issue 3. Limited Engagement
Children lost engagement easily, especially with audio activities.
Issue 4. Unclear Use Case
Both grownups' content and children's content appear on the same screen, blurring the line of who uses the app and their use cases.
Caregivers are the ultimate buyers for the Wondergrade app, so I also pushed for data collection from their side. After diving into 300+ caregivers' survey results, I realized a big issue that hurts their buy-in: Wondergrade did not tell caregivers how its content can help their children tackle big emotions.
Issue 5. No Mention of Benefits
More efforts need to be put into encouraging caregivers' buy-in.
Both children and parents were confused about the app, leading to low activation and retention rates. Hence, designing solutions to clarify who the app is for and how it will help is crucial for Wondergrade's business to grow .
To create a more child-friendly user experience, I redesigned the landing page of the app and designed new game interaction patterns. The new design uses landscape mode, which is more aligned with young children's digital behaviors (aka playing games on Ipads) and reduces cognitive overload.
To help encourage parents' buy-in, I used newsletter as a re-engagement technique and initiated the design of printable learning activities included in the newsletter for caregivers to go over what their children learned on the app. I designed the printables in the style of coloring sheets to keep children engaged.
As an EdTech product, helping children learning is the ultimate goal. Yet, to achieve desired learning outcomes, children need to first understand and engage with the content. Caregivers, on the other side, also need to know the educational values of Wondergrade's content. Based on my prior research, I identified 3 main design goals and collaborated with co-founders as the primary stakeholders. Together, we decided on the following strategies:
Goal 1
Clarify Content
Strategies:
- Distinguish Kid Center and Parent Center
- Reorganize content
- Clarify what each content is about
Target Issues:
- Issue 4. Unclear Use Case
- Issue 1. Cognitive Overload
- Issue 2. Complex Word Choice
Goal 2
Increase Engagement
Strategies:
- Add more coloring activities
- Distinguish Kid Center and Parent Center
Target Issue:
- Issue 3. Limited Engagement
Goal 3
Highlight Learning
Strategies:
- Create an outline of learning areas
- Launch weekly newsletter with family learning activities highlighting the learning areas
Target Issues:
- Issue 5. No Mention of Benefits
- Issue 3. Limited Engagement
To avoid children's confusion regarding why there were both "Kid Center" and "Parent Center" on the same navigation bar, Wondergrade's co-founders decided to create a separate app for children called "Oli's Toolbox". I took the lead for the design for the children's section.
I grouped content based on activity types and discussed with stakeholders how to efficiently combine them. The main challenge is to help users understand what each activity is about without reading the text, so I emphasized on making the graphics more easily understandable.
I conducted competitive research. I synthesized 4 key design principles: 1. simple word choice, 2. moving elements, 3. large hot spots, 4. obvious interactive elements.
I applied the design principles and reduced the number of elements from 10 different buttons on the same screen to 3.
But there was a cut on budget, so building 2 separate apps for grownups and children became unrealistic. To minimize engineering cost, I suggested another way to reduce confusion: 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.
After another round of design review, I reached the following design and used it for user testing.
I discussed research questions and created playtesting guides with the neuroscientist.
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 a learning curve for the swipe interaction
3. Children tended to exit a page when they saw still images or audio instead of a video guide
Based on playtesting insights, a major design implication is to add a tutorial for the swiping interaction.
During both playtesting sessions, I noticed children enjoyed doing the coloring game. In fact, 2 children played it 8 times. To engage children more, co-founders and I decided to add more coloring activities and coloring templates.
* I'm not able to share the full design details for the mini games due to NDA.
I ideated more mini game ideas and collaborated with the developer to pick out Unity frameworks for implementation. 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.
I worked with the neuroscientist to review literature on children’s emotional regulation skills and summarized findings into 7 different categories: 1. awareness of emotions, 2. reflection on emotions, 3. emotional vocabulary, 4. understanding of the brain, 5. building cognitive skills, 6. learning emotional regulation tools, 7. social-emotional skills
To address any confusion about using Wondergrade tools, I initiated a weekly newsletter that includes a family learning activities package for parents to introduce the different tools in context. This is also a re-engagement technique that addresses Wondergrade's issue of limited engagement. I came up with the following 2 designs:
The co-founders and I 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 packages on the market. We found out that children enjoyed coloring a lot, so I added more graphic elements for that allow children to color. This is the final design after 2 rounds of design review:
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.
If I have more time, I'd love to work with the visual designer to increase color contrasts and make Wondergrade more visually accessible.