← Back to work
Case study 02 · Google · Design Systems

Rebuilding Relate's
Design System

Overhauling the visual system of an accessibility app by bringing Material 3 to Project Relate while custom-tuning components for users with motor, cognitive, and low-vision needs.

01 — About the app
What is Project Relate?
Project Relate is a machine-learning app that helps people with atypical speech communicate independently, including with Google Assistant.
02 — Problem
An eng-driven app without visual cohesion
Relate lacked dedicated UI support. The interface felt outdated and unlike a modern Android app, with weak recognition, inconsistent visuals, and an accessibility product that wasn’t meeting the needs of its motor impaired user.
  • Optimize the recording experience to cut down mobile user effort for motor-impaired users
03 — Pain points
Users couldn’t read the interface
Users struggled to understand buttons and icons because of size, placement, and unclear function.
PROJECT_RELATE // USER_FEEDBACK.LOG SEV: HIGH · 04 ENTRIES
Problems
> unresolved · awaiting triage
ERR_01 / REACH — □ ×

“Some of the controls are just out of reach. I can’t stretch my thumb that far.”

ERR_02 / RECOGNITION — □ ×

“All the feature pages look the same, I can’t tell what any of them actually do until I tap in and find out.”

ERR_04 / FATIGUE — □ ×

“There’s so much to record, my hand gives out before I’m even halfway done.”

USABILITY_REVIEW_V1 · 2026 [ IGNORE ] [ SOLVE ]
04 — Approach
How we addressed the pain points
  • Migrate to the current Google design system
  • Create customized components for accessibility needs
The solution: adopt Material 3 for a cohesive Android look and feel, then create custom sizes so the system stayed accessible for motor, cognitive, and low-vision users.
PROJECT_RELATE // ERGONOMIC_MAP RIGHT HAND · SINGLE GRIP
Reach is not optional
> move critical controls into the thumb zone
Reachable Strain / stretch
01 / Grip

Optimize one-hand usage

02 / Targets

Larger buttons, bigger tap targets

03 / Reach

Relocate buttons into the thumb zone

04 / Clarity

Improve feature recognizability

MOTOR · COGNITIVE · LOW-VISION [ SOLVE ]
05 — System shift
Material 2 → Material 3
Moving from Material 2 to Material 3 brought Relate in line with modern Android patterns while keeping room to customize for the audience.
PROJECT_RELATE // SYSTEM_SHIFT M2 → M3
Before / after
> same screen · new system
BEFORE / MATERIAL 2 — □ ×
Material 2 Record screen with reach and tap-target issues
AFTER / MATERIAL 3 — □ ×
Material 3 Record screen with bottom-friendly controls and larger tap targets
DESIGN_SYSTEM · ANDROID [ ADOPTED ]
Material 3 component exploration
Material 3 adoption with accessibility-minded customization.
06 — Components
Custom components for real users
Default Android buttons weren’t sized for this audience. Relate components were enlarged and retuned so primary actions were easier to hit and understand.
Large Relate Button specs — 320 by 76
Large Relate Button
Small Relate Button specs — 106 by 56
Small Relate Button
07 — Cognitive users
Better understanding for cognitive users
Listen, Repeat, and Assistant all looked the same, so users with cognitive impairments couldn’t tell what any destination did until they tapped in. Distinct illustrations and a clear purpose on each screen made the features recognizable at a glance.
Material 2 Listen, Repeat, and Assistant screens with no visual difference between features
Before — no visual difference between features
Material 3 Listen, Repeat, and Assistant screens with distinct illustrations
After — easier identification of features
08 — Results
Larger targets, fewer missed taps
Relocating controls into the thumb zone and enlarging tap targets made primary actions easier to hit for motor-impaired users.
METRIC_01 // TAP_ACCURACY_RATE POST-REDESIGN
Delta
+26
Percentage
points

Tap accuracy climbed from 68% to 94%.

Before
68%

32% mis-tap rate

“I keep missing them”

After
94%

6% mis-tap rate

larger targets, thumb reach

> cause: enlarged touch targets + controls relocated within thumb reach [ SOLVED ]
09 — Impact
Unblocking marketing and new markets
A familiar Android interface made scaling easier, including expansion efforts tied to Ghana. Featured in Google I/O’s Accessibility segment (May 2024). Collaboration with a brand studio produced a new tutorial video that used the refreshed system to improve onboarding and overall usability.
Google Africa Blog featuring AI work in Ghana
Marketing in Ghana — scalable, familiar Android patterns.
Tutorial video motion from brand collaboration
Brand studio collaboration — tutorial video.
10 — Next & lessons
What follows
Next steps
  • Use testing and surveys to refine based on feedback
  • Keep collaborating on marketing strategies
Lessons learned
  • Prioritize product audits to strengthen brand alignment
  • Integrate established design-system guidelines early
  • Build inclusive practices in for underrepresented user groups
Next case study · 03
Live Transcribe
Dual Screen
Let's work together

Have a problem
worth solving?