Teaching math to children with learning difficulties

Edtech | Desktop Application
Designed an ADHD-friendly math app with inclusive, WCAG-compliant features, addressing gaps found in competitor apps and achieving 100% task completion.
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 collaborated with designers, researchers, content writers, and strategists to create an inclusive math app from the ground up for children with diverse learning needs, including ADHD. Based on our research, we identified that competitors failed to effectively implement accommodation and customization—two critical features we prioritized. I led a team of five designers in transforming insights into user-friendly content and interfaces, resulting in a 100% satisfaction rate during user testing for both onboarding and guided multiplication lessons.

THE PROBLEM

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

The math curriculum in schools is often designed for the general population, overlooking the unique needs of children with ADHD—leaving them feeling lost, helpless, and unsupported. Our SWOT analysis revealed that existing math apps also had critical flaws, particularly a lack of support for different learning styles such as audio-based or visual-based learning. These gaps, categorized as missing customization and accommodation features, negatively impacted the learning experience for children with diverse abilities.

THE SOLUTION

How can I design a learning experience that supports the unique needs of children with ADHD, especially when existing tools fail to consider different learning styles?

Using insights from our SWOT analysis, I designed a math app for children with ADHD that addressed the two most critical gaps—Accommodation and Customization—highlighted in the weaknesses section. These categories represented the lack of support for diverse learning styles, such as audio-based and visual-based instruction. I created dedicated screens, including a customizable user dashboard and adaptive lesson modules, to directly support these needs. Features like audio narration, visual cues, and pace control helped improve engagement and clarity. User testing confirmed the effectiveness of these solutions, with a 100% task completion rate and enthusiastic feedback from both children and parents.

1) Accommodation - Hints, Colour Coding, and Adaptive Lesson Module Methods
An image from the hi-fi wireframes showing how the children are accommodated with different style of lessons.
2) Customization - Options for Subtitles, Visual Cues, Audio Narration, 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?

DESIGN PROCESS

What objectives must be met to gain a clear understanding of the problem?

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.

Across the 12 competitor apps, the most common and high-impact pain points centered around missing accommodation and customization features.

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.