Dyslexia Reading App
A dyslexia reading app, this showcase centers on the design system & style guide across student learning flows and educator dashboards, assignments tracking, and progress. I worked on UX, product-ready design system that standardizes patterns across onboarding, assigning, and progress tracking, so educators can teach, not troubleshoot.
Scope
Design system & UI kit; educator workflows (onboard → invite/assign → track)
Year
2025
Timeline
4 months
Tools
Figma, Adobe Suite, Figjam,
Maze, Token Studio
Role
UX Designer
Scope: Design System, UX Design, Research, Product Strategy
Impact: Creating foundation and design system for product to scale with clarity
UX Designer
Scope: Research, UX, Prototyping, Usability Testing, Visual Design, Design System.
Impact: Unified Design System,
Evaluated MVP → defined roadmap → shipped
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?
Challenge
Fragmented patterns were slowing teachers and students learning experience. How might we standardize patterns so students can have smooth learning experience and teachers can onboard, assign, and track quickly with clarity that holds across the app?
Challenge
Inconsistent UI, Student and educator UIs didn’t have shared system.
Inconsistent UI, Student and educator UIs didn’t have shared system.
The MVP shipped features, but without shared tokens, patterns, or a cohesive style guide. Student and educator surfaces felt disconnected, and key educator flows (invite, assign, track) suffered from rework and inconsistency.
The MVP shipped features, but without shared tokens, patterns, or a cohesive style guide. Student and educator surfaces felt disconnected, and key educator flows (invite, assign, track) suffered from rework and inconsistency.
#1
#1
Inconsistent primitives
Inconsistent primitives
Ad-hoc components, spacing, and labels increased cognitive load and rework across student & educator surfaces.
#2
#2
Fragmented style guide & brand
Fragmented style guide & brand
Visuals, naming, and content patterns weren’t aligned—student and educator UIs looked related but not cohesive.
#3
#3
Educator flows lacked reusable patterns
Educator flows lacked reusable patterns
Invite, assign, and progress views were built one-off, leading to drop-offs and “relearning” each step.
Impact
A shared design system turned scattered screens into one coherent product - and made educator workflows faster to ship and easier to use.
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.
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
+System-wide impact
One UI language + Reusable components + Faster delivery and handoffs
One UI language + Reusable components + Faster delivery and handoffs
One UI language + Reusable components + Faster delivery and handoffs
+Across features
+Across features
Consistent patterns + Cohesive brand + Easy to scale
Consistent patterns + Cohesive brand + Easy to scale
Consistent patterns + Cohesive brand + Easy to scale
+Educator workflow impact
+Educator workflow impact
+Educator workflow impact
Quicker role aware entry + Higher task completion + Clearer tracking
Quicker role aware entry + Higher task completion + Clearer tracking
Quicker role aware entry + Higher task completion + Clearer tracking
Solution - Design System
One shared system turned scattered screens into a single product - faster to ship, easier to learn, and consistent across student and educator views.
I built a design system and style guide that standardizes tokens, components, and patterns across the app. With unified typography, color, grids, and a documented component set, educator workflows (entry, invite/assign, progress) reuse the same model - eliminating ad-hoc screens and rework.
I built a design system and style guide that standardizes tokens, components, and patterns across the app. With unified typography, color, grids, and a documented component set, educator workflows (entry, invite/assign, progress) reuse the same model - eliminating ad-hoc screens and rework.
The Base Kit: rhythm, space, and tone
A small set of foundation decisions drives consistency across both sides of the app.
Color families separate brand/primary blues for actions from accent/orange for highlights and feedback; neutrals carry most surfaces to reduce visual noise.
Type system (Open Sans + OpenDyslexic) establishes a readable hierarchy; sizes and line-heights create a steady vertical rhythm.
Grid & spacing enforce predictable layouts—cards, lists, and panels snap to the same structure so screens scale without new rules.
Elevation + shadows add just-enough depth to signal interactivity (e.g., raised buttons, overlay cards).
A small set of foundation decisions drives consistency across both sides of the app.
Color families separate brand/primary blues for actions from accent/orange for highlights and feedback; neutrals carry most surfaces to reduce visual noise.
Type system (Open Sans + OpenDyslexic) establishes a readable hierarchy; sizes and line-heights create a steady vertical rhythm.
Grid & spacing enforce predictable layouts—cards, lists, and panels snap to the same structure so screens scale without new rules.
Elevation + shadows add just-enough depth to signal interactivity (e.g., raised buttons, overlay cards).
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) remove guesswork and give strong affordances.
Inputs & dropdowns clarify labels, captions, and errors; primary (educator) and secondary (student) dropdown styles make context obvious.
Toggles, radios, checkboxes group related decisions with consistent spacing and label rules.
Sliders and progress bars differentiate adjusting vs. tracking; progress bars come in percentage and basic variants depending on detail needed.
We reduced cognitive load by standardizing how people act, select, fine-tune, and understand progress.
Buttons & states (primary/secondary/tertiary + hover/focus/disabled) remove guesswork and give strong affordances.
Inputs & dropdowns clarify labels, captions, and errors; primary (educator) and secondary (student) dropdown styles make context obvious.
Toggles, radios, checkboxes group related decisions with consistent spacing and label rules.
Sliders and progress bars differentiate adjusting vs. tracking; progress bars come in percentage and basic variants depending on detail needed.
Components with Meaning: cards, icons, and friendly cues
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). They scale from list rows to rich panels but keep the same anatomy: title → key metadata → actions.
Mascot & animated avatars add an encouraging tone in onboarding and 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). They scale from list rows to rich panels but keep the same anatomy: title → key metadata → actions.
Mascot & animated avatars add an encouraging tone in onboarding and student-facing moments without crowding educator tasks.
Icon library (Phosphor 2.1) aligns metaphors across navigation, filters, and statuses.
Solution - System in Action
ClearRead’s style guide is the foundation that powers dashboards, class insights, student profiles, resources, and settings with one visual language.
Across the educator experience, the same tokens, components, and patterns repeat with purpose. Cards introduce information, lists scale it, chips and meters add quick meaning, and a consistent form kit keeps every edit predictable.
Across the educator experience, the same tokens, components, and patterns repeat with purpose. Cards introduce information, lists scale it, chips and meters add quick meaning, and a consistent form kit keeps every edit predictable.
Overview → Detail: Cards, Lists, and Chips
We use one surface vocabulary to move from “big picture” to “actionable detail.” Cards set context on overview pages, lists handle volume, and status chips add instant meaning without new styles.
We use one surface vocabulary to move from “big picture” to “actionable detail.” Cards set context on overview pages, lists handle volume, and status chips add instant meaning without new styles.
We use one surface vocabulary to move from “big picture” to “actionable detail.” Cards set context on overview pages, lists handle volume, and status chips add instant meaning without new styles.
Class Health at a Glance: 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 trends look and feel consistent whether you’re in Groups, a class, or a student profile.
Knowledge Hubs: 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 so browsing content feels as natural as scanning student data.
With one consistent system, ClearRead 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, ClearRead scales from class overviews to deep student insights - fewer components, faster builds, and a product that feels instantly familiar wherever you land.
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.
ClearRead 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.
ClearRead 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.
ClearRead 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.
Overall impact
Coherence: one UI language across student and educator surfaces.
Speed: reusable components & predictable patterns shortened design–dev cycles.
Scalability: new features inherit clarity without inventing new rules.
Coherence: one UI language across student and educator surfaces.
Speed: reusable components & predictable patterns shortened design–dev cycles.
Scalability: new features inherit clarity without inventing new rules.
Coherence: one UI language across student and educator surfaces.
Speed: reusable components & predictable patterns shortened design–dev cycles.
Scalability: new features inherit clarity without inventing new rules.
What's next
Expand the system with motion specs for micro-feedback and empty-states.
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 (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 (naming, anatomy, do/don’t examples) to keep quality as the app grows.