Overview
Our Client
I worked on a math learning platform for children with ADHD, enhancing navigation, focus, and engagement. We applied neurodivergent design principles to improve the dashboard and onboarding screens, resulting in a more accessible and consistent user experience. We also created a comprehensive design system to ensure the whole design is more consistent, enabling faster design updates while fostering better collaboration across teams.
My Role
UX Design
Team
6 UX Designers
Client
MonsterNums
Design Timeline
4 months,
Summer 2024
MonsterNums is a math learning app that aims to help children with ADHD to learn math with ease.
CHALLENGE
MonsterNums lacks a design system to ensure consistency across designs and efficiency.
Since the app is at the early stage of design, there are lot of uncertainties. One major aspect that hindered the overall progress is stylistic elements like round corners and color. The failure to agree on these elements collectively led to a lot of back and forth due to subjective preferences. Instead of focusing on the main user flow of the app, we were stuck due to lack of agreed fundamentals like a design system.
A lot of color explorations without decisions.
RESEARCH
Stylistically… what type of design helps children with ADHD to focus?
The primary user of this app are children with ADHD. In order to make decisions more efficiently instead of relying on our subjective preferences, we all agreed to follow neurodiversity design principles. When setting up the design system and stylistic elements, we need to consider neurodiversity, user experience, and learning experience together. All the elements should serve to support their attention span and engagement with as little confusions as possible. According to Neurodiversity Design, every element should have “an appearance of intention to action”.
Buttons should look clickable; inputs and selects should appear distinct but also clickable. These design choices assist learners with low vision, dyslexia, and ADHD by providing clear visual cues, avoiding competition with other elements, and minimizing assumptions.
DESIGN SYSTEM PRINCIPLE
We established rules when designing elements:
If it’s an action element: visualize it by emphasizing the physical clickable property
eg. make the buttons and text fields look three dimensional.
If it’s a static element: make it as flat and secondary as possible
eg. make the progress bar two dimensional.
DECISION ON DETAILS
Discussions, Decisions, and Repeat. Which version serves the purpose?
With the principles in mind, we began the process of tackling various elements. One particular aspect that sparked the most discussion among our team is shading and elevation. This topic proved to be quite complex and flexible, which required a decent amount of consideration and debate.
Input field shading
We created two versions: solid shading and drop shadow shading. There was a split in opinion. One group thought that the solid shading looks more clean and aligns with the neurodivergent design principles; the other group thought that the drop shadow looks more elegant and also depicts the “depth”. Since we are aiming for a clean, consistent, and minimalistic design, solid shading eventually was our decision.
Other decisions
Here’s an overview of all the shading and elevations. Buttons are elevated, cards have a more subtle elevation to differentiate from buttons.
With the new design system implemented, we replaced the low-fidelity wireframes with updated elements.
Old version
New version with design system
SORTING COLOR
Color adds another dimension of complexity. Colors should only help not confuse children.
What color and style should the answer cards be to stand out from the CTAs?
There are different ways to justify the color logic. We can either categorize all the “clickable buttons” by one color, or categorize functions by colors, eg. math related questions one color and non math related questions another color.
Option 1: Differentiate functions through colors and styles of elevation
Non math question related CTAs:
blue solid shading
Math question related buttons:
orange drop shadow
Non math question related CTAs:
blue solid shading
Option 2: Differentiate functions only through colors
Math question related buttons:
orange solid shading
Non math question related CTAs:
blue solid shading
We think it makes sense to make all math related materials to be the same color to differentiate the content from the rest. Since they are all clickable buttons, we want to make sure stylistically they are aligned. Thus, Option 2 stood out.
Option 3: All buttons have the same color but different style of elevation
Math question related buttons:
blue drop shadow
THE DESIGN SYSTEM
After nailing down the details, here I present to you the design system, divided into foundations and components.
FOUNDATIONS
8pt Grid System
The overall design is based on 8pt grid system. Elements and spacing are all divisible by 8.
Colors
We organized and named the colors into 5 main categories: primary, secondary, accent, neutral, and error.
We chose cool toned unsaturated colors as primary and secondary colors because psychologically they convey a calm and focused atmosphere. We chose orange as accent color because it’s a direct contrast from blue.
COMPONENTS
For all components, we would built out all of their states and combine them as variants.
CTAs:
Input fields:
Progress bars:
NEXT STEPS
User testing
One of the biggest challenge of this project is getting feedback from children with ADHD. Even though we followed the neurodivergent design guidelines, we are still unsure whether our design is truly effective for children with ADHD. So far our UXR team has interviewed parents and teachers, but it’s difficult to recruit children.
Accessibility assessment
We need to make sure that all the designs we create align closely with the established industry standards and best practices.
Complete screens
Currently, we made several samples using the new design foundation and components; however, we haven’t implement the design system into all the screens yet.