Children's Learning App

Identified and solved 2-high impact pain points, accommodation and customization, for children with ADHD trying to learn math
Three images of screens from the ADHD Math app
Role
Lead UX Designer
Team
UX Designers, UX Researchers, UX Strategists, UX Content Writers
Skills
SWOT Analysis
IA
User Flows
Wireframes
Style Guide
User Testing
Timeline
5 months

PROJECT OVERVIEW

As the lead UX Designer, I was responsible for creating a math app from scratch to help students of various learning abilities, including ADHD, learn math in an effective way. I led a team of five designers in developing the app’s content and interface, transforming validated research into effective, user-friendly designs for this math app. Using the prototype, the user testing had a 100% satisfaction rate of completing the onboarding process and the guided lessons of multiplication among all of the children.

THE PROBLEM

How do children with learning difficulties, such as ADHD, learn math in schools?

The math curriculum in schools is designed for the general public, regardless of learning abilities causing children with ADHD feeling lost, helpless, and overlooked. The current math apps available for children were also found to have some flaws that negatively affected the children's learning process, which were found in our SWOT analysis from participants.

THE SOLUTION

Which features did I incorporate into my app to eliminate the 2 high-impact pain points children with ADHD face?

Using insights from the SWOT analysis, I designed a math app for children with ADHD that addressed the two most significant pain points—Accommodation and Customization—which had the highest number of issues in the weaknesses section. These issues were categorized, and since Accommodation and Customization stood out, I created dedicated screens to directly target and solve these challenges.

1) Accommodation - Hints, Colour Coding, and different methods
An image from the hi-fi wireframes showing how the children are accommodated with different style of lessons.
2) Customization - Options for Subtitles, Fonts, Colours, Avatar, and Music 
An image from the hi-fi wireframes showing some features of customization
How did I design the prototype for the Mindful Minds Math app as the Design Lead?

PROBLEM BREAKDOWN

What are the goals needed to achieve to understand the problem?

The strategy team gave the design team 5 months to complete this project. To complete our project within this timeframe, I needed to collect the following data from the research team:

RESEARCH

Competitive Analysis

To identify learning platforms that teach math to children with ADHD, along with their accommodations and pain points included in the design, I created a SWOT analysis on 12 competitors. Using the SWOT analysis, I created a summary using affinity mapping techniques to find common themes.

Amongst the 12 competitor apps, the common high-impact pain points were themes around accommodation and customization.

A SWOT Analysis of the 12 competitors

WHAT ARE THE FEATURES THAT ARE IMPORTANT FOR PHASE 1 OF THIS APP?

Key Features

The design team collaborated with the research team to validate the insights we obtained from our competitive analysis with their data found through their user interviews. During a prioritization workshop with the strategy team, the design team identified the following key features for the scope of Phase 1:

  1. Lesson & Practice Flow- Navigating the lesson and practice structure
  2. Hints, Color Coding, and Accommodations- Making the learning experience supportive and engaging
  3. Customization Options- Including options for fonts, colors, music, subtitles, etc
  4. Onboarding- Ensuring a customized experience via caregiver and student onboarding flows

IDEATION

Information Architecture

Based on the collected information, I designed a basic Information Architecture for the app to provide context for our user flows using the four key features identified.

An Information Architecture of the app with its key features

User Flows

During another workshop with the strategy team, the user flows the design team created containing the four key features, were approved which allowed us to proceed to designing the Lo-Fi and Mid-Fi wireframes.

THE DESIGN PROCESS

Lo-Fi and Mid-Fi Wireframes

The designers and I came together during design workshops to design low-fidelity wireframes based on the four features mentioned using best UX practices. We developed mid-fidelity wireframes by placing more attention to creating a consistent layout.

An image of the lo-fi and mid-fi wireframe of the lesson flow screenA lo-fi and mid-fi wireframe of the hints, colour coding and accommodation screen.A lo-fi and mid-fi images of the customization screen.A lo-fi and mid-fi onboarding screen.

WHAT ACCESSIBILITY ELEMENTS ARE NEEDED TO SUPPORT THE LESSONS?

Accessibilty & Pedagogy Guidelines

Once we had a good grasp of what was in the market, including what we wanted to emulate and avoid in our app, I structured our vision on a set of Accessibility Guidelines and Pedagogy Standards, by combining our findings from the SWOT Analysis and our own secondary research. The Accessibility Guidelines and Pedagogy Standards are:

  • Colour
  • Spacing
  • Typography
  • Language/Vocabulary
  • Time Limits
  • Confirmation/Checklist
  • Media/Motion
  • Sound
  • Gamification
  • Structure/Instruction

HOW CAN THE UI BE COMFORTING TO CHILDREN?

Moodboards

Using secondary research we obtained from the research team, we were able to make UI decisions and explore options via mood boards.

A mood board containing colours, shapes, characters, typography, and number equations.

USING THE ACCESSIBILITY ELEMENTS, HOW CAN WE PRESENT AND TEACH MATH PROBLEMS?

Math Problem Exploration Ideas

Using insights gathered from our competitive analysis, and accessibility & pedagogy research, I designed different approaches to teach a multiplication problem. The writing for each approach were approved by the Content Writers who ensured it was user friendly and comprehensive for our young and sensitive user group.

Idea #1- Effective Learning and Understanding- A step-by-step breakdown, visual learning aids, interactive digital manipulatives, and color coding/cues to facilitate comprehension.
An example of a multiplication problem with the option to draw
Idea #2- Providing Flexibility- Empowering learners to select the most effective strategy for their individual needs.
An example of a multiplication problem with three solving methods
Idea #3- Interactive Engagement and Assistance- Giving opportunity for immediate accessible knowledge, fostering learners to enhance focus, increase confidence, and take ownership of their learning by developing self-regulation skills.
An example of a multiplication problem with square spaces to solve it

Style Guide

We initially created a style guide that contained more soft tone colours, however after reviewing Research's data indicating that children prefer darker shades of colour, we decided to swap the softer colours with a darker shade.

Before and after images of the colour palette and buttons

THE SOLUTIONS

High Fidelity Prototype

By applying pedagogy and accessibility guidelines, I created our finalized style guide for our wireframes and build additional screens to develop a cohesive high fidelity prototype which were validated by the research, content, and strategy teams.

Note: The main screen with the white circles and rectangles will contain badges and show the student's progress within a lesson, which will be designed during Phase Two of this project.

User Testing Insights

A Usability Test was conducted to evaluate the prototypes of the onboarding screens and the guided lessons of multiplication with children and their parents by the research team and accompanied by the design team. The goal was to ensure that the app is accessible and user-friendly for children with varying levels of cognitive ability and learning styles.

Demographics
  • 7 Parents
  • 8 Children ages 8-11:
  • 2 Children have ADHD and autism
  • 2 Children have ADHD
  • 1 Child has difficulty with math and reading
  • 3 Children are neurotypical
  • 4 of the children did the Box Method
  • 5 of the children did the Array Method

The user testing had a 100% success rate of completing the onboarding process and the guided lessons of multiplication, using their preferred method, amongst all the children and the parents who guided them.

WRAPPING UP

Learnings

You may also like
Three iPhone screens with images of the Earth Hero app
A laptop with MyDok's dashboard on the screen
An ipad and mobile screen showing the Help & Feed campaign homepage.