Download CV

Accessibility Infrastructure

AgeWell Design System

Role
Founding Product Designer
Company
Smplicare
Timeline
May 2022 – Present
40%
faster handover
100%
WCAG 2.2 AA
400+
designers using it
FigmaGitHubStorybookJira
01: The Challenge

No Design System for This User in the Market

In 2022, when I joined Smplicare, I identified a critical gap in the digital product market: no existing design system was optimised for the cognitive and physical needs of adults aged 65+. Standard UI kits, Material Design, Eva, failed accessibility tests for our demographic: users managing cataracts, tremors, and low digital literacy.

Live: AgeWell colour tokens, buttons and icons

Colour tokens

  • Primary#0F3345
  • Secondary#72F6D1
  • Neutral light#F5F5F5
  • Neutral dark#404040
  • Error#C20000
  • Warning#F5AC56
  • Success#088623
  • Info#5069C3

Buttons: hover, press or tab to each one

Icons: outline and filled states. Hover, tab to or press any icon.

Colour tokens, buttons and icons, live

Live: AgeWell inputs

This is a hint text

Type an invalid address, then tab away to see the alert.

Text and email inputs, with the error alert
02: The Innovation

An 18pt Minimum Body Size

To solve this inside Smplicare, I built AgeWell, a proprietary system enforcing a minimum 18pt body text size and high-contrast ratios, purpose-built rather than adapted from an existing kit.

I rejected the industry standard 14px/16px base font.

The same gap led me to publish a related component publicly: a mobile-optimised Likert scale UI based on the Office for National Statistics well-being framework, now used by 400+ designers on Figma Community.

Live: AgeWell type scale and measured contrast

Type scale, Wix Madefor Text

  • Body-18 · 18px / 1.46Balance and strength, every day
  • Body-20 · 20px / 1.48Balance and strength, every day
  • Body-24 · 24px / 1.36Balance and strength, every day
  • 32 · 32px / 1.22Balance and strength, every day
  • 40 · 40px / 1.32Balance and strength, every day
  • 48 · 48px / 1.2Balance and strength, every day

Measured contrast, WCAG 2.2

  • AaBody text on panel#0F3345 on #F5F5F512.19:1AA passAAA pass
  • AaPrimary button#FFFFFF on #0F334513.29:1AA passAAA pass
  • AaPrimary button, active#FFFFFF on #2747589.87:1AA passAAA pass
  • AaSecondary button#0F3345 on #72F6D110.01:1AA passAAA pass
  • AaSecondary button, hover#0F3345 on #67DDBC8.00:1AA passAAA pass
  • AaChip#0F3345 on #E7EBEC11.07:1AA passAAA pass
  • AaPrimary button, disabled#0F3345 on #B7C2C77.31:1AA passAAA pass
AgeWell type scale, with measured contrast
03: Engineering Handover

An Atomic Design Structure

Standardised accessibility rules allowed junior developers to ship compliant UI without constant supervision. Implementing an Atomic Design structure in Figma let the engineering team build a shared component library, eliminating UI inconsistencies and letting the team deploy compliant interfaces instantly.

Live: Chip/Tags, from atoms to organism

Atoms

IconLabelClose

Molecule: chip, both sizes and states

Default mdDefault smDisabledIcon leftIcon rightClosable

Organism: exercise filter. Select a chip, then close it to clear it.

Atoms, molecule and organism behind the Chip/Tags component
Outcome

The Impact

  • 40%

    faster handover

  • 100%

    WCAG 2.2 AA

  • 400+

    designers using it

    Next case studyAfriLearn Gamification →