Design System | ELD-AR UI Library
Reminiscence Therapy App for our elders with Alzheimer’s and Dementia.
Project Snapshot
Role: Founding Designer
Team: Partnered closely with engineering and product
Users: Seniors with Alzheimer’s & dementia; caregivers
Deliverables: End-to-end design system across web + mobile
"I built the ELD-AR UI Library from the ground up to ensure accessibility, consistency, and ease of development for a sensitive, senior-facing platform."
The Problem
Before the design system, we faced:
-
Inconsistent UI patterns across teams
-
High design QA churn during dev handoff
-
Lack of reusable, scalable components for multi-platform rollout
-
No unified documentation for accessibility or developer guidance
System Foundations
Establishing structure, accessibility, and scale from the ground up
"I started by defining foundational tokens colors, type, spacing, and grid that supported both cognitive accessibility and platform flexibility. These design decisions created a unified visual language across the app, dashboard, and training portals."
Colors
-
4-color system
-
Primary
-
Secondary
-
Neutrals
-
States
-
WCAG AA-compliant with high contrast for low-vision users
Accessibility and WCAG Compliance
Typography
-
Heading 1 (PP Woodland) for emphasis
-
Maven Pro for action pages and mobile UI consistency
-
Inter for body, forms, and microcopy
Grid
-
4px base grid
-
Modular spacing units (4, 8, 16, 24, 32…)
-
Mobile-first responsive design logic
Light to Dark
-
Designed with token flexibility to support system themes
How Might We
design an intuitive, immersive app that enables seniors to reconnect with cherished memories through music, photos, and stories—enhancing emotional well-being and fostering meaningful connections?
Research and Insights
To build a human-centered solution, I conducted ethnographic research involving:
-
100+ caregivers, medical professionals, and seniors
-
Usability studies & journey mapping
-
Stakeholder interviews & A/B testing
Key Insights:
-
Tech Adaptation Challenges: Seniors struggled with navigation and digital literacy.
-
Caregiver Role: A strong need for family and caregiver support features.
-
Personalization Matters: Users engaged more with familiar, emotionally resonant content.
Accessibility & Inclusive Design
ELD-AR Memories was designed to be fully accessible and inclusive, ensuring seniors with Alzheimer's and Dementia—regardless of their cognitive, visual, or motor abilities—could use it with ease.
⦿ Challenges Seniors Faced
-
Small text & poor contrast reduced readability
-
Complex navigation caused frustration
-
Limited mobility made interactions difficult
⦿ Accessibility-First Design Decisions
-
Text Readability: Large, high-contrast fonts & resizable text
-
Cognitive Load Reduction: Minimalist UI, calming colors, and intuitive icons
-
Navigation & Input Flexibility: Voice commands, touch-friendly interactions
-
Assistive Tech Support: Full compatibility with screen readers
~ WCAG 2.1 AA & ADA-compliant design to ensure inclusivity.
⦿ Usability Testing & Iteration
-
30% improvement in task completion rates after refining contrast & navigation
-
Seniors with mobility impairments reported 40% fewer navigation errors with voice commands
-
Dark mode and high-contrast themes boosted readability for visually impaired users
⦿ Impact & Results
-
Higher engagement from seniors with visual & cognitive impairment
-
Improved caregiver efficiency through accessible content management
-
Positive feedback from accessibility advocates & usability experts
Design and Ideation
Using insights from research, I focused on reducing cognitive load, enhancing usability, and ensuring accessibility.
Key Design Considerations:
-
Large, high-contrast fonts for readability
-
Minimalistic UI with calming colors to reduce cognitive overload
-
Voice navigation & touch-friendly interactions for easy use
-
Personalized content based on AI-driven memory recommendations
-
Incorporated large fonts to support elderly users, particularly those with vision and cognitive challenges.
-
Applied calming color schemes and minimalistic layouts to reduce cognitive load and enhance user experience.
Prototyping and User Testing
I developed a high-fidelity prototype and conducted usability testing with both seniors and caregivers. Testing revealed that some users had difficulty navigating certain features, which led to improvements in iconography and accessibility settings (e.g., adding a larger text option).
Reflection and Learnings
This project reinforced the importance of designing for cognitive accessibility. I learned to:
⦿ Prioritize simplicity & inclusivity in design decisions
⦿ Leverage continuous user feedback to drive improvements
⦿ Balance emotion-driven design with AI-powered personalization