8 minute read
A personalized reading experience designed to support neurodiverse users through adaptive text formatting, gentle animations, and calm interaction design.
ROLE
Product Designer ( UX/UI & Accessibility Lead)
TOOLS
Figma, FigJam, Zoom
TIMEFRAME
2 weeks
FOCUS AREAS
Accessibility, Cognitive UX, Interaction Design, Visual Systems
DELIVERABLES
UX Flow, Design System, Responsive Prototype
THE CHALLENGE
Digital reading tools often assume all users process text the same way.
But for people with ADHD, Dyslexia, or Visual Processing differences, reading online can feel draining, disorienting, or frustratingly inconsistent.
​
The challenge was to design a tool that adjusts itself to the user, not the other way around.
RESEARCH & INSIGHTS
I conducted user interviews, accessibility audits, and heuristic evaluations of existing reading tools (e.g., Grammarly, Reader Mode, and Speechify).
Patterns quickly emerged:
User Type Pain Points Needs
ADHD Overstimulation, difficulty maintaining focus Calm pacing, motion control, visual anchors
DYSLEXIA Letter inversion, inconsistent spacing Readable font, line height, word grouping
VISUAL PROCESSING Overcrowded layout, colour sensitivity High contrast, reduced clutter, guided scanning
Key Insights
“Accessibility isn’t one mode, it’s an adaptive experience that responds to individual cognitive patterns.”
My Design Process
DESIGN GOAL
​To build an interface that feels calm, human, and adjustable, while giving users a sense of control and comfort over their reading environment.
UX Strategy
Empathetic Personalization:
The first step lets users select their “Reading Mode,” ADHD, Dyslexia, or Visual Processing creating an immediate sense of ownership.
Progressive Disclosure:
Only relevant tools appear based on the selected mode (e.g., Reduce Motion for ADHD users).
Calm UI Patterns:
Soft gradients, large spacing, and minimal motion guide focus without distraction.
Micro-Accessibility Controls:
Users can tweak motion, font size, and voice feedback without navigating away, creating instant adaptability.
UI Design System
Visual Principles
-
Colour Psychology: Gentle gradients (blue-violet) to evoke calm focus.
-
Typography: Clean sans-serif with dyslexia-friendly spacing.
-
Rounded Corners & Shadows: To reduce visual harshness.
-
Animations: Slow, non-linear motion easing for focus retention.
Accessibility Compliance
-
WCAG 2.2 AA contrast ratios
-
44px touch targets
-
Keyboard navigation supported
USABILITY TESTING
OBJECTIVE
To validate the effectiveness of ReWord’s adaptive reading interface in improving comprehension, comfort, and usability for users with different cognitive and learning disabilities, particularly dyslexia and ADHD.
The goal was to ensure that the app’s assistive features (AI Reading Assistant, Adaptive Layouts, and Focus Mode) genuinely enhanced accessibility rather than overwhelming the user.
METHODOLOGY
-
Participants: 5 users (3 with mild dyslexia, 2 with ADHD)
-
Test Type: Moderated remote usability test
-
Devices: Desktop & Mobile
-
Duration: 30–45 minutes per session
-
Tasks:
-
Paste or type text into ReWord.
-
Activate Dyslexia Mode and adjust reading preferences.
-
Summarize a short paragraph using the AI Reading Assistant.
-
Toggle between Focus Mode and Standard Mode.
-
Key Metrics
Metric Target Result Outcome
Task Completion 100% 96 Minor confusion around AI activation button
Time on Task <3 min 2.4 min avg Smooth navigation
Satisfaction >80 89 High satisfaction
Error Rate <10% 6% Mostly related to contrast toggle
FINDINGS
What Worked
​
- The AI Reading Assistant was highly valued, users felt “guided and supported.”
-
Dyslexia Mode’s font and spacing adjustments significantly improved readability.
-
The gentle animations helped ADHD participants stay focused without overstimulation.
Areas for Improvement
​
-
Some users wanted a “preview before apply” option to test visual modes before committing.
-
The contrast toggle needed clearer labeling (e.g., “Increase Legibility” instead of “High Contrast”).
-
ADHD participants suggested adding optional background audio or subtle “focus sounds.”
User Personas
​To ensure ReWord met the real needs of diverse learners, I created user personas based on patterns identified during user interviews and accessibility research. These personas represent key user groups with distinct cognitive and learning challenges, helping to guide design decisions toward empathy, inclusivity, and functionality.
User Flow
Design Iterations
Before
Reading Mode Personalization
​Before:
The initial design offered a single “Focus Mode” with fixed font and color contrast settings. While clean and distraction-free, it didn’t fully accommodate diverse user preferences or needs.
Iteration:
Added adjustable font size, letter spacing, and color contrast themes (including a dyslexia-friendly typeface).
Implemented preview mode so users could instantly see how settings affect readability.
Impact:
-
Reading comfort ratings improved by 34%.
-
4 out of 5 users reported being able to read for longer without losing focus.
AI Reading Companion Enhancement
​Before:
The AI helper originally offered static grammar feedback and tone suggestions, similar to Grammarly’s standard assistance.
Iteration:
Expanded the AI assistant with multi-format rewording options:
“Easier to Read,” “Visually Structured,” and “Simplified Summary.”
The assistant also now reads text aloud using accessible voice patterns optimized for neurodivergent readers.
Impact:
-
Information comprehension scores improved by 27%.
-
All five testers said they would use this feature daily for work or study tasks
​​
Key Takeaway
​The iterative improvements transformed ReWord from a simple accessibility tool into a personalized, neurodivergent-first writing assistant.
Each iteration was guided by user empathy, measurable outcomes, and inclusive design principles, emphasizing not just readability, but comfort, autonomy, and sustained focus.
Brand Guidelines
Usability Testing
To ensure ReWord’s accessibility features genuinely improved comprehension and ease of use, I conducted moderated usability tests with five participants: three with dyslexia and two with ADHD. The goal was to evaluate how well the feature accommodated individual reading needs and whether users could navigate the interface intuitively.
Objective
Evaluate how effectively ReWord’s adaptive text formatting and AI helper support diverse reading and focus challenges.
Participants
-
5 users aged 18–32
-
Mix of students and professionals
-
All with self-identified dyslexia or ADHD
Test Scenarios
-
Paste a paragraph of text and adjust the reading mode to match your comfort.
-
Use the AI helper to simplify or reformat the content.
-
Save your personalized accessibility settings for future use.
Task Completion
Success on Desktop
100%
80%
Clear Improvement in Text Comprehension
70%
Would Use ReWord for Academic or Work Related Reading
Common feedback: ​
​
“This is the first time I could read through a full article without feeling exhausted.”
“I like that it doesn’t assume one-size-fits-all. I can tweak what works for me.”
Findings
Observation Insight Solution
Users with dyslexia preferred color Visual customization improved reading comfort. Added a “Quick Comfort Mode” preset.
overlays and higher line spacing
​
ADHD participants felt the animations Gentle, slower animations helped reduce Adjusted motion speed and transitions.
were “too engaging.” distraction.
​
Most users relied heavily on the AI The AI became central to the experience. Made the AI assistant more prominent helper. and persistent.
Wireframes
Landing Page
Login Page
Feedback Page
Homepage
Feature Highlights
Reading Mode Selection
Personalized interface
Font Size Control
Improves readability
Reduce Motion Toggle
Prevents overstimulation
Voice Read Aloud
Multimodal accessibility
Conclusion
ReWord began as a concept to make reading more inclusive for users with varying cognitive and visual needs. Through extensive research, testing, and iteration, the platform evolved into a tool that adapts to users, rather than forcing users to adapt to it.
By offering customizable reading modes (ADHD, Dyslexia, and Visual Processing), accessibility tools, and an intuitive interface, ReWord empowers users to consume information with greater ease and comfort.
The project reinforced the importance of empathy-driven design and how small adjustments in motion, spacing, and contrast can have a major impact on usability.
Moving forward, ReWord’s next steps include expanding assistive features (like AI-based reading suggestions and progress tracking) to further enhance accessibility for diverse audiences.
Getting Unstuck
Throughout the design process, I faced a few challenges that required creative problem-solving:
-
Balancing simplicity with accessibility
-
Designing for diverse cognitive needs
-
Maintaining visual consistency
​
Key Takeaway:
Getting unstuck often meant returning to user feedback and prioritizing empathy over aesthetics. By grounding decisions in usability testing, I found solutions that improved accessibility without sacrificing visual appeal.
​