Look & Feel Direction

Primary visual reference: Duolingo — bold, friendly, character-driven, gamified but accessible. Not a copy; a north star.

Overall design language

The two-register approach

The Coach has two distinct visual registers that work as a system:

The Shell — the Coach UI, onboarding, session framing, avatar moments, and transitions. Warm, calm, and human. It feels like a trusted person, not a product. It makes Deb feel safe and Alyssa feel like she hasn't walked into a classroom.

The Modules — each of the three modules has its own distinct visual personality that lives inside the shell. Stepping into a module feels like entering a different space. This gives the numeracy game the boldness it needs without making the whole app feel like a game.

The shell wraps the modules. The transition between them should feel intentional — a brief moment of the Coach's face and voice before and after each session.

Shared design principles

Rounded, not sharp. All UI elements use generous border radii. Sharp corners read as clinical or corporate.
Generous white space. Screens are never crowded. Low-literacy users need breathing room — one primary action per screen wherever possible.
Large, readable type. Body text at a minimum 18px on mobile. Typography prioritises legibility over personality.
Real people, not illustrations. Where photography or avatar imagery is used, it shows real (or photorealistic) people from the target communities.
Motion is purposeful, not decorative. Subtle transitions and micro-animations signal progress and reward effort. Nothing flashes or loops without reason.

Colour system

Base palette — shared across the whole product:

Role	Direction
Background	Warm off-white — not pure white. Slightly cream-tinted to reduce eye strain.
Surface	Soft warm grey for cards and containers. Never cold.
Text (primary)	Dark charcoal — not black. Reduces harshness on warm backgrounds.
Text (secondary)	Mid warm grey — for supporting text, labels, timestamps.
Coach UI accent	A single warm primary colour for Coach interface elements. Suggested: deep warm teal or grounded amber. Finalise in design.

Module accents:

Module	Accent direction	Rationale
Numeracy	Vivid, energetic — electric blue or bright coral	The game needs to feel alive and fast. High energy is appropriate here.
Reading	Calm, considered — soft sage green or warm indigo	Reading is a quieter, more intimate activity. The colour should feel like a comfortable chair.
Writing	Warm and encouraging — golden amber or terracotta	Writing is personal and a little vulnerable. The colour should feel like warmth and sunlight, not pressure.

Typography

Heading typeface: A rounded, friendly sans-serif with strong legibility. Reference: Nunito, Poppins, or similar.
Body typeface: Same family, regular weight, generous line height (1.6–1.8). Always left-align — never justify.
Coach dialogue: Slightly larger than standard body text, with extra line spacing. This text is being read and heard simultaneously.
No italics in Coach dialogue or instructions. Italics are harder to read for low-literacy users.

Numeracy module — Bold and alive

Reference: Duolingo's game screens. High energy, fast feedback, satisfying motion.

Entering the numeracy module should feel like stepping into a game — a noticeable shift from the calm Coach shell.

Background: Dark, rich — deep navy or near-black. Makes the bright accent colours pop.
Accent: Vivid electric blue or bright coral. Used for targets, scoring elements, and feedback moments.
Typography: Larger, bolder weights for game elements. Numbers should feel physical and satisfying to interact with.
Motion: Generous. Correct answers get a brief satisfying animation — rewarding, not intrusive.
Avatar: Appears at the start and end of the game session only — not during gameplay.
Tone: Energetic, fast, fun. The game doesn't talk much — it just runs.

→ Marcus's numeracy journey

Reading module — Calm and intimate

Reference: a well-designed e-reader. Space, warmth, focus.

The reading module is the most personal. The learner's voice is the central element — everything else steps back.

Background: Warm off-white, consistent with the shell.
Accent: Soft sage green or warm indigo — calm, focused, never demanding attention.
Typography: Passage text is large, generously spaced, left-aligned. Always the most prominent element on screen.
Motion: Minimal. A soft highlight under the word the Coach is following as the learner reads aloud.
Avatar: Present before and after the reading passage. During reading, completely absent so the text is the sole focus.
Tone: Quiet and supportive. The design should feel like someone leaning in gently, not watching.

→ Alyssa's reading journey

Writing module — Warm and encouraging

Reference: a warm journal or letter-writing experience. Personal, private, unhurried.

The writing module needs to feel safe — especially for Deb, who is used to her writing being a source of shame.

Background: A very slightly warmer off-white than the shell — almost like cream paper. Subtle, but it signals this is a personal space.
Accent: Golden amber or terracotta — warm, encouraging, optimistic.
Typography: The writing area is visually distinct — a clearly defined, warm-bordered space that reads as "your space." Not a form field. Not a test box.
Motion: The paper-and-photo upload flow should feel smooth and reassuring — clear steps, no alarming error states.
Avatar: Active during feedback delivery — this is the highest-stakes moment for Deb and others.
Tone: Gentle and private. The visual design reinforces that what happens here stays here.

→ Deb's writing journey

Avatar visual direction

Direction (updated 2026-04-24): The avatar interaction model uses realistic 3D video avatars with lip-synced voice audio — not static images or cartoon characters. This is a primary communication tool.

Technology

The avatar is rendered as a realistic 3D video clip produced via HeyGen or Synthesia. This is not a real-time 3D render — it is a pre-produced video asset, stitched at runtime. This keeps device and bandwidth demands manageable while delivering a high-quality, human, talking-head experience.

Placement and layout

Appears as a floating overlay in the bottom-right corner of the device.
Sits over the top of whatever content is on screen — the learner can always see the content behind it.
Does not take over the full screen, split the screen, or push content aside.
Between key moments, it is completely absent — not minimised, not reduced to a thumbnail.

Visual production principles

Realistic, not illustrated. Avatars must feel like real people — not cartoon coaches.
Diverse and representative. The pool must include Aboriginal and Torres Strait Islander characters, CALD characters, a range of ages (mid-20s through 50s), and multiple genders. Designed with, not for, the communities they represent.
Consistent framing. Avatars are always shown roughly shoulders-up — a natural face-to-face conversation frame.
Warm, neutral clothing. Nothing branded, nothing visually distracting. The face and voice are the focus.
Voice casting must match the visual — an Aboriginal avatar should have an Aboriginal voice artist where possible.

→ Avatar assignment model

What the visual design is not

Not a government website — no Commonwealth sans, no dark blue headers, no form-style layouts.
Not a children's app — no primary colours for their own sake, no cartoon characters, no baby fonts.
Not a corporate product — no stock photography of people in offices, no abstract geometric patterns.
Not trying to look Aboriginal — cultural motifs, dot paintings, and ochre-as-decoration are off the table unless developed in direct partnership with Aboriginal artists and communities.