Teaching math to children with learning difficulties

Edtech | Desktop Application
Designed an ADHD-friendly math app with inclusive, WCAG 2.1-compliant features, addressing gaps found in competitor apps and achieving 100% task completion through lessons.
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

When a concerned mother approached our team about her child with ADHD struggling to learn math, she shared how existing apps on the market came with limitations that hindered, not helped, children like hers. The current math curriculum taught in schools was also found to lack sufficient methods and resources to effectively teach children with ADHD, causing many parents to rely on external math applications. As the lead UX Designer, I collaborated with designers, researchers, content writers, and strategists to bring her vision to life by creating phase 1 of an inclusive math app from the ground up for children with diverse learning needs. Our research revealed that competitors lacked proper accommodation and customization options, two features we made central to our design. I led a team of five designers in transforming insights into intuitive interfaces and engaging content, 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 and on existing apps?

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 phase 1 of a math app for children with ADHD that addressed the two most critical gaps, Accommodation and Customization features, 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 with children diagnosed with ADHD confirmed the effectiveness of our accommodation and customization features, resulting in a 100% task completion rate during the multiplication lesson 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

CONSTRAINTS

Due to time constraints, Phase 1 of this project focused on research and the design of key screens, including the dashboard, onboarding, customization page, and lessons with accommodation features. Additional elements such as badges, in-lesson progress tracking, and the daily quick quest will be developed in Phase 2.
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 clear understanding of the market, identifying what to emulate and what to avoid, I structured our vision around a set of Accessibility Guidelines and Pedagogy Standards. These were informed by our SWOT analysis, secondary research, and the valuable insights of designers on our team who were also experienced school teachers turned UX designers. 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, a UI mood board for a math learning app for children with ADHD should balance focus and engagement through calm, accessible design. It should include a soothing color palette with selective bright accents, clear sans-serif typography, and minimal, friendly illustrations that support learning. The layout should demonstrate structure and white space to reduce cognitive load, along with examples of subtle animations, progress cues, and inclusive accessibility features. Overall, the board should convey a tone that feels calm, encouraging, and rewarding while adhering to WCAG standards.

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 from our competitive analysis, accessibility and pedagogy research, and the expertise of our teacher-turned-designers, I designed multiple approaches to teach multiplication problems. Each approach was reviewed and refined by our content writers to ensure the language was clear, engaging, and appropriate 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