HCF didn't have a real design system to work from, and accessibility wasn't being handled in a structured way. The system also had to serve people who aren't designers — a brand team preparing images, a content team handling configuration — not just the design team. So it needed to do two things that pull against each other: standardise components enough to stay consistent and on-brand, while staying flexible enough for those different teams to actually work within it.
The challenge was two-sided: close the accessibility gap and build a more robust foundation, and make that foundation genuinely usable by every team that touches it.
I worked within a design team on the system, and owned these areas of it:
New component documentation — new components designed and documented across anatomy, states, variants, interactions, and responsive behaviour
Accessibility toolkit — WCAG 2.2 documentation, a colour contrast chart, an alt text decision tree, and keyboard navigation patterns
Team enablement — a regular workshop cadence to gather component requests, and align on accessibility practice
Implementation support — usage guidelines plus a responsive image preparation guide for design-to-development hand-off
I ran interactive workshops with product owners and the brand team to identify pain points and align design improvements with both business objectives and user needs. These sessions surfaced common challenges — particularly inconsistent implementation, gaps in accessibility understanding, and limited understanding of how images would respond across responsive layouts.
The accessibility documentation was built so anyone — not just designers — could apply it.
The alt text decision tree and colour contrast chart turned out to be the most-referenced artefacts, used well beyond the original design team.
The responsive image preparation guide — defining safe and bleed zones across breakpoints — meant the brand and content teams could prepare correct assets without a designer in the loop, and gave developers a consistent spec to build against. It removed a recurring bottleneck and standardised asset delivery across design, content, and development.
The regular workshop cadence wasn't just for education — it was the input pipeline for new components. Team requests, surfaced live in sessions, drove the system's roadmap.
