Five choices, no more
The home screen offers five labelled circles in one cluster. Fewer options means faster, calmer decisions.
01 · The challenge
Most learning apps are built to excite. For some children, that is the problem.
Bright colours, dense screens and motion that plays by itself can turn a lesson into something a child has to manage rather than enjoy.
Motion with no purposeAnimation that is not part of the task still raises failure.
Built to exciteMost learning apps use visual intensity to hold attention.
Nothing is optionalThe child needed every stimulus to be something they could turn off.
Alzahrani et al. on incidental animation. Scope and the UK Government Digital Service on predictable layouts, plain language and minimal motion.
5choices on the home screen: Play, Draw, Read, Watch, Numbers
142pxround navigation targets, sized for small hands and touchscreens
90swithout a page turn before a break is gently offered
0countdown timers in any maths or drawing activity
02 · Research
Designing for Noah
I like learning in fun ways.
- Age 7
- ASD Level 1
- Primary school
Picture books, short activities and videos. Bright motion, unclear buttons and sudden changes get in the way.
- Keep cognitive load low and the screen uncluttered.
- Make navigation predictable and identical on every screen.
- Prevent accidental actions before they happen.
- Motivate with feedback and long-term goals, without visual noise.
What gets in the way
- Bright or moving visuals overwhelm him
- Unclear buttons and sudden changes confuse him
- He loses focus without signs of progress
What the interface must do
- Keep the screen uncluttered
- Same navigation on every page
- Nothing opens by accident
- Progress without visual noise
Children’s survey
A short survey explored colour preferences, tolerance to sound, feedback style and reading habits. Safeguarding and ethics constraints limited it to four responses, two from autistic children, so it guided early direction only.
Evidence base
Decisions were grounded in HCI theory, autism-friendly guidance from Scope and GDS, research on sensory load and gamification, and a competitor analysis of children’s learning products.
03 · Design decisions
Every choice traces back to a principle
Filter by principle to see which parts of the interface it shaped.
Targets for small hands
142px navigation circles and 260px book cards reduce mis-taps for children with less precise motor control.
Selecting never opens
Arrow keys move a selection ring. A book opens only on an explicit press of Open, Enter or Space.
Confirm before leaving
Leaving the reader or progress page asks first, shown by the child’s own character, so a place is never lost by mistake.
Calm Mode, one tap away
Lives in the top bar, not a settings menu. Mutes the background, hides the progress bar and suppresses motion.
A two-colour palette
Soft sage on warm off-white. Green marks only selection and progress, so colour always means something. Text targets 7:1.
Icon and word together
Every navigation button pairs a familiar symbol with a plain label, for children who read less or interpret images literally.
Rewards stay out of the way
Points, shop and goals live on the Progress page. A labelled My rewards button, the same size as Calm Mode, opens it. Testers missed an unlabelled chest; the label is there so the page is found by recognition.
No time pressure
All four maths games and every drawing activity are untimed, because countdowns raise anxiety and lower accuracy.
Breaks, offered kindly
After 90 seconds without a page turn, the reader offers a five-minute break. Affirmations appear every 45 seconds.
A top bar that never moves
Avatar, progress, My rewards and Calm Mode sit in the same place on every screen, so there is nothing to relearn.
Keyboard first
The carousel works with arrow keys and on-screen arrows, with a clear focus state on every control.
04 · Try it
Browse freely. Nothing opens by accident.
This is the interaction pattern at the heart of the reader. Move the ring with the arrows or your keyboard; only Open starts a book. Then switch on Calm Mode.
Books carouselKeyboard: ← → to select, Enter to open
In the product, HorizontalCards owns the selection state and the parent page owns opening, so the two cannot be triggered by the same action.
05 · The product
A complete platform, not a single screen
Home and navigation
One cluster, five doors
A single circular cluster holds every section. The same buttons shrink to a bottom bar inside each section, so the way back is always visible.
- Icon plus label on every button
- Top bar fixed across all screens
- My rewards opens progress and the shop
Reader
A book that turns like a book
A two-page flipbook built on PDF.js. Finishing the last spread awards 10 points automatically, and Back always asks before leaving.
- Idle detection offers a 5-minute break
- Character affirmations every 45 seconds
- Large, fixed arrows for page turns
Rewards
Motivation the child owns
Points arrive automatically: 10 for a book, 5 for a video, 2 for a new day. They unlock twelve characters, twelve accessories and six backgrounds.
- Equipped items appear everywhere the avatar does
- A points log keeps rewards transparent
- Never shown during an activity
Goals and parent area
Carers set the milestones
A PIN-protected parent area shows books read, videos watched and days active. Parents set goals such as “Read 3 books”, and the child claims the bonus.
- PIN set by the parent at sign-up
- Children cannot edit their own balance
Maths
Four games, no clock
Count & Tap, Number Bonds, Shape Match and Times Tables, each with several difficulty levels and no time pressure at all.
- Instant, gentle feedback on each answer
- Points on completion
Drawing
Trace, colour, learn
Word tracing and colouring diagrams that teach as they go: plant parts, the water cycle and the solar system.
- Large canvas, few tools
- Untimed and forgiving
First run
Set up together
A parent creates the account and sets a four-digit PIN. The child then chooses one of twelve characters, which follows them through the whole platform.
- Large number pad for the PIN
- Plain-language validation messages
06 · Calm Mode
The same screen, turned down
Drag the handle, or focus it and use the arrow keys. Calm Mode swaps the background to muted cream, hides the progress bar and suppresses motion, and the choice is saved to the child’s profile.
StandardCalm Mode
07 · Design system
From Figma flow to finished product
The design moved in three steps: structure first, then the visual design in Figma, then the React build.
- Sign in
- Character
- Home
- Reader
Palette
Warm paper#FBF7E6 · background
Meadow#E7F0CF · surfaces
Sage#CFE4B3 · selection, progress
Calm cream#ECE6CF · Calm Mode
Soft ink#3A3A3A · text
16px+System sans-serif body; 26–28px headings; 22px icon labels
2Font weights only (400 and 700) for a simple hierarchy
36pxBetween navigation circles; 22px between carousel cards
142 / 74Navigation circle size in pixels, centre and bottom-bar layouts
08 · Architecture
Error prevention, enforced in the code
The app is a React single-page application with pages routed by React Router and reusable components shared across sections: TopBar, HomeNav, HorizontalCards, BackConfirmSheet, ReadingWatcher and PdfFlipBook.
Selection state (activeId) lives in the carousel, while opening is a separate onSelect callback owned by the page. The error-prevention rule is structural, not just visual.
Profiles, points, unlocked items and goals persist in localStorage, so the app works without a server.
09 · Testing
What three users showed me
The task test was with three adult proxies. A short survey of four children, two of them autistic, guided the early design, but it was too small to treat as a usability test. Formal sessions with children were not possible in the time available: safeguarding, ethics approval and school access could not be put in place. Proxy testing can find a control that does not look clickable. It cannot show how children would actually use the platform.
Task completion without help
The key finding
The core flow worked. The treasure chest did not: two of three participants did not realise it was a button. It lacked affordance, breaking H1 and H6. The dashboard also used smaller, denser buttons than everywhere else, which undermines the predictability the design depends on.
I found it easy to choose a game and get started.Participant 1
I liked the instant feedback after answering.Participant 1
I didn’t realise the treasure icon could be clicked.Participant 1
The buttons are smaller and harder to use.Participant 3
| Heuristic | Finding | Severity |
|---|---|---|
| H1 Visibility of status | Treasure chest affordance unclear | High |
| H3 User control | Confirmation prompt on exit works well | Pass |
| H4 Consistency | Dashboard button sizes inconsistent with the rest | Medium |
| H5 Error prevention | Separating selection from activation is effective | Pass |
| H6 Recognition over recall | Treasure chest relies on recall, not recognition | High |
| H8 Minimalist design | Calm Mode palette reduces stimulation | Pass |
What I changed after testing
The two issues testers found are now fixed in the product. The evaluation above is what they saw. The screens below are what the product does now.
10 · Reflection
What I would do next
Read along
Connect the shared useReadAloud hook to the flipbook so each page can be spoken for early readers.
Sound, carefully
Planned audio feedback was held back: it could itself be a sensory barrier. It should ship muted by default and be tested first.
Test with children
With ethical approval, school partners and DBS clearance in place, evaluate with the real audience.
Test sooner
The design phase ran long. A good-enough version tested earlier would have taught more than a polished one tested late.
