CASE STUDY
AccessibleLearn: Voice-First Education
Designing a learning platform that prioritizes auditory processing, reducing visual friction for neurodivergent learners.
MISSION
To create an educational environment that minimizes cognitive load by prioritizing voice-led interaction over dense, text-heavy visual interfaces.
The Goal
Develop a responsive web application prototype tailored for adult learners with dyslexia and ADHD, emphasizing a listening-first content delivery approach and a clear, low-friction learning progression.
UX Design
Accessibility
Voice UI
The Friction in E-Learning
Visual Overload
Secondary Audio
Precision Targets
THE SOLUTION
A Voice-First Paradigm
We inverted the traditional learning model. Instead of requiring learners to read first and opt into audio, the experience prioritizes conversational audio from the start, supported by high-contrast, visually spacious transcripts that reduce cognitive load and improve accessibility.
Listening Mode
Active Processing
Role & Process
Role
Lead Product Designer
Timeline
9 Weeks
I led the end-to-end design process, from initial generative research into accessibility standards to high-fidelity prototyping.
AI as a Design Partner: Throughout the process, I leveraged AI tools to accelerate ideation, generate realistic placeholder content tailored to adult learners, and validate design decisions against complex WCAG 2.1 accessibility guidelines. This enabled me to focus more deeply on the tactile, auditory, and visual nuances of the interface.
Research
Wireframing
UI Design
Prototyping
Intentional Decisions
Information Chunking
Content is broken down into
manageable, bite-sized cards. This
prevents visual fatigue and provides clear stopping points for learners who need frequent breaks.
Accessible Touch Targets
All interactive elements adhere to a
minimum 4rem (64px) height, ensuring ease of use for individuals with motor
impairments.
Large Primary Action
Persistent Audio Anchor
A fixed audio player remains accessible regardless of scroll
depth. The "Voice Orb" provides visual feedback
(pulsing/breathing) to indicate listening or processing states
without relying on text status.
Gallery
Home Dashboard
Clear entry points.
Response Overview
Voice-first launch.
Audio Playback
High-contrast toggles.
WCAG Considerations
Accessibility was treated as a foundational principle rather than an enhancement. The design system adopts the Lexend typeface to improve reading clarity and throughput. Contrast ratios were carefully calibrated to meet AA/AAA standards, while avoiding harsh pure black tones to reduce visual strain. Instead of relying on sharp 1px borders, spatial boundaries are defined through subtle tonal variations, resulting in a softer, more approachable interface that reduces sensory overload.
Outcome
The AccessibleLearn prototype presents a viable direction for more inclusive educational technology. By shifting the paradigm from "read-first" to "listen-first," the design addresses documented barriers faced by neurodivergent learners. Key accessibility decisions were validated against WCAG 2.1 AA/AAA standards throughout the process, with the design system, interaction patterns, and audio-first architecture serving as a foundation for future development and real-world testing.
Reflection & Next Steps
Designing for neurodiversity required a fundamental shift in how visual hierarchy was approached. The “no-line” principle encouraged reliance on spacing, rhythm, and tonal depth rather than explicit borders, resulting in a cleaner, more cohesive, and less visually intrusive interface.
Future work will focus on expanding voice recognition capabilities to better support diverse speech patterns and accents, as well as exploring adaptive pacing algorithms that personalize audio playback speed based on individual learner preferences and cognitive needs.
