Dyslexia Reading App
A unified design system that helps educators invite, assign, and track – and gives students a calmer, consistent reading experience.
Impact
Coherence up - Single UI language across the app
Faster to ship - reusable components cut design - dev cycles
Scales cleanly - inherit clarity and higher task completion
Scope
Style guide, UI components, educator workflows (onboard → invite/assign → track)
Style guide, UI components, educator workflows
Year
Year and Timeline
2025
2025, 4 months
Timeline
4 months
Tools
Figma, Adobe, Figjam, Notion
Role
UX & Design System, research, product strategy, IA and high-fidelity prototypes.
Challenge
How might we reduce confusion during client onboarding, reduce dependency on manual meeting coordination despite tool usage, and streamline access to essential documents for smoother workflows?
Fragmented patterns slowed both teaching and learning. To standardize the UI so students stay focused and teachers move from invite → assign → track without relearning the interface?
Fragmented patterns slowed both teaching and learning. How might we standardize the UI so students stay focused and teachers move from invite → assign → track without relearning the interface?
Challenge
Fragmented patterns slowed both teaching and learning. How might we standardize the UI so students stay focused and teachers move from invite → assign → track without relearning the interface?
Overview
One system, one language – built for educator tasks.
One system, one language – built for educator tasks.
This work establishes a single visual + interaction language mapped to invite → assign → track, so dashboards, assignments, and progress views feel familiar anywhere you land.
This work establishes a single visual + interaction language mapped to invite → assign → track for educators.
System - level impact made
+System - wide impact and coherence
+System - wide impact
One UI language across student & educator views, consistent tokens, components, and patterns
One UI language, consistent tokens, components, and patterns
One UI language across student & educator views, consistent tokens, components, and patterns
+Faster to ship
+Faster to ship
Reusable components and predictable patterns shorten design → dev cycles and handoffs.
Reusable components, patterns shorten
design → dev cycles.
Reusable components and predictable patterns shorten design → dev cycles and handoffs.
+Educator workflow impact
+Educator workflow impact
+Educator workflow impact
Quicker role aware entry, higher task completion and clearer "who needs attention" tracking for educators
Quicker role aware entry, higher task completion and clearer student tracking.
Quicker role aware entry, higher task completion and clearer "who needs attention" tracking for educators
Problem
Early MVPs shipped screens, not a system. Student and educator surfaces felt related but inconsistent.
Student and educator surfaces felt related but inconsistent.
1
1
Inconsistent primitives
Ad-hoc components, spacing, and labels increased cognitive load and rework across student & educator surfaces.
Ad-hoc components, spacing, and labels increased cognitive load and rework.
2
2
Fragmented brand & style
Visuals, naming, and content patterns weren’t aligned - student and educator UIs looked related but not cohesive.
Visuals, naming, & content patterns weren’t aligned, UI looked related but not cohesive.
3
3
No reusable flows
Invite, assign, and progress views were built one-off, leading to drop-offs and “relearning” each step.
Invite, assign, and progress views were built one-off, leading relearning each step.
1
Inconsistent primitives
Ad-hoc components, spacing, and labels increased cognitive load and rework.
2
Fragmented brand & style
Visuals, naming, and content patterns weren’t aligned and not cohesive.
3
No reusable flows
Invite, assign, and progress views were built one-off, leading to drop-offs and “relearning” each step.
Solution - Design System and System in Action
Building foundation and consistent model across dashboards, assignments, profiles, resources and settings.
Building foundation and consistent model across dashboards, assignments, profiles, resources and settings.
I built a product-ready design system – tokens → components → patterns – with documentation to keep decisions predictable.
I built a product-ready design system – tokens → components → patterns – with documentation to keep decisions predictable.
The Base Kit: rhythm, space, and tone
The Base Kit: rhythm, space, and tone
A small set of foundation decisions drives consistency across both sides of the app.
Color families: brand primary for actions + accent for feedback + neutrals carry most surfaces to reduce visual noise.
Type system (Open Sans + OpenDyslexic): readable hierarchy; generous line-height.
Grid & spacing: cards, lists, and panels snap to a consistent 12-column grid.
Elevation + shadows: subtle shadows to signal interactivity (raised buttons, overlay cards).
A small set of foundation decisions drives consistency across both sides of the app.
Color families: primary for actions + accent for feedback + neutrals carry most surfaces to reduce visual noise.
Type system (Open Sans + OpenDyslexic): readable hierarchy; generous line-height.
Grid & spacing: cards, lists, and panels snap to a consistent 12-column grid..
Elevation + shadows: subtle shadows to signal interactivity (raised buttons, overlay cards).
The Interaction Language: do, choose, adjust, see
The Interaction Language: do, choose, adjust, see
We reduced cognitive load by standardizing how people act, select, fine-tune, and understand progress.
Buttons & states (primary/secondary/tertiary + hover/focus/disabled) clear states and variants remove guesswork
Inputs & dropdowns clarify labels, captions, and errors; (educator vs. student variants) make context obvious.
Toggles, radios, checkboxes group related decisions with consistent spacing and label rules.
Sliders and progress bars differentiate adjusting vs. tracking; come in percentage and basic variants.
We reduced cognitive load by standardizing how people act, select, fine-tune, and understand progress.
Buttons & states (primary/secondary/tertiary + hover/focus/disabled) clear states and variants remove guesswork
Inputs & dropdowns clarify labels, captions, and errors; (educator vs. student variants) make context obvious.
Toggles, radios, checkboxes group related decisions with consistent spacing and label rules.
Sliders and progress bars differentiate adjusting vs. tracking; come in percentage and basic variants.
Components with meaning
Components with meaning
Data containers, system iconography, and brand character bring clarity and a little joy – without distraction.
Cards carry the app’s “units of work” (students, groups, resources) with the same anatomy:
title → key metadata → actions.
Mascot & animated avatars add warmth in student-facing moments without crowding educator tasks.
Icon library (Phosphor 2.1) aligns metaphors across navigation, filters, and statuses.
Data containers, system iconography, and brand character bring clarity and a little joy – without distraction.
Cards carry the app’s “units of work” (students, groups, resources) with the same anatomy:
title → key metadata → actions.
Mascot & animated avatars add warmth in student-facing moments without crowding educator tasks.
Icon library (Phosphor 2.1) aligns metaphors across navigation, filters, and statuses.
Surface Vocabulary – overview → details
Surface Vocabulary – overview → details
We use one surface vocabulary to move from “big picture” to “actionable detail.”
Cards introduce context on overview pages (class health, student tiles).
Lists handle volume (students, assignments).
Status chips add instant meaning (due state, progress, flags) without new styles.
We use one surface vocabulary to move from “big picture” to “actionable detail.”
Cards introduce context on overview pages.
Lists handle volume - students and assignments.
Status chips add instant meaning - due state, progress, flags.
We use one surface vocabulary to move from “big picture” to “actionable detail.”
Cards introduce context on overview pages (class health, student tiles).
Lists handle volume (students, assignments).
Status chips add instant meaning (due state, progress, flags) without new styles.
Class Health at a Glance: Progress Bars & Metric Tiles
Class Health: Progress Bars & Metric Tiles
Progress rings/bars and metric tiles reuse the same brand + accent tokens, so trends look and feel consistent whether you’re in Groups, a class, or a student profile.
Progress rings/bars and metric tiles reuse the same brand + accent tokens, so look and feel is consistent in Groups, a class, or a student profile.
Knowledge Hubs: Tiles for Resources & Handbook
Tiles for Resources & Handbook
Resource libraries and the handbook apply the same card/tile grid, spacing, and iconography so browsing content feels as natural as scanning student data.
Resource libraries and the handbook apply the same card/tile grid, spacing, and iconography.
With one consistent system, the app scales from class overviews to deep student insights - fewer components, faster builds, and a product that feels instantly familiar wherever you land.
With one consistent system, the app scales from class overviews to deep student insights.
Impact
Replaced ad hoc screens with consistency, cut design debt and made new features inherit clarity.
Replaced ad hoc screens , cut design debt.
Standardizing components, and patterns into a single style guide, we replaced ad-hoc screens with a consistent UI language. Educator flows now reuse the established system, reducing “relearning” and design debt. The system scales across student and educator surfaces, so new features inherit clarity.
+System - wide impact and coherence
+System - wide impact and coherence
Conducted – a Design-system audit (tokens, components, surface patterns)
Conducted – a Design-system audit (tokens, components, surface patterns)
Finding
Finding
Screens share one vocabulary (grid, cards/lists, chips), reducing relearn across features.
Screens share one vocabulary (grid, cards/lists, chips), reducing relearn across features.
+Faster to ship
+Faster to ship
Conducted – Handoff review (specs, PR notes) + component library check.
Conducted – Handoff review (specs, PR notes) + component library check.
Conducted – Handoff review (specs, PR notes) + component library check.
Finding
Finding
Finding
Fewer bespoke UI variants and clearer state docs; smoother design→dev handoffs.
Fewer bespoke UI variants and clearer state docs; smoother design→dev handoffs.
Fewer bespoke UI variants and clearer state docs; smoother design→dev handoffs.
+Educator workflow impact
+Educator workflow impact
+Educator workflow impact
Conducted – task walkthroughs (invite, assign, track) with educators.
Conducted – task walkthroughs (invite, assign, track) with educators.
Conducted – task walkthroughs (invite, assign, track) with educators.
Finding
Finding
Finding
Reduced steps and decisions to create assignment, cutting backtracks.
Reduced steps and decisions to create assignment, cutting backtracks.
Reduced steps and decisions to create assignment, cutting backtracks.
Faster "who needs attention checks with status chips and progress tiles.
Faster "who needs attention checks with status chips and progress tiles.
Faster "who needs attention checks with status chips and progress tiles.
Conclusion
I defined the north star, built the design system (foundations, components, patterns), and drove adoption through hi-fi prototypes mapped to key educator tasks.
I built the design system, drove adoption for key educator tasks.
The app now uses a single visual + interaction language – so students get a calm, consistent experience, and educators move from invite → assign → track without relearning the UI.
A single visual + interaction language – so students get a calm experience, and educators move from invite → assign → track without relearning the UI.
What I'd do next
Add contribution rules (naming, anatomy, do/don’t examples) to keep quality as the app grows.
Expand the system with motion specs for micro-feedback and empty-states.
Add contribution rules to keep quality as the app grows.
Expand the system with motion specs for micro-feedback and empty-states.
What I learned
A shared surface vocabulary (cards, lists, chips) + consistent interaction states removes more friction than isolated screen tweaks.
A shared surface vocabulary (cards, lists, chips) + consistent interaction states removes more friction than isolated screen tweaks.