Westminster City Council
Building a Scalable, Accessible Design System
Westminster City Council was preparing to launch new public digital services, but design teams were working in silos with duplicated work and inconsistent interfaces. I partnered with the Research and Design team to architect a design system that reconciled multiple sources of truth, improved accessibility across all services, and reduced delivery times while improving quality. The system includes consistent UI components, focus and hover states that meet WCAG, and documentation that helps teams deliver faster and more consistently.
We needed to unify our tools and patterns to deliver faster, more consistently, and with accessibility at the core. Implementing the design system reduced the design and build time of new features by 50%
That work had never been done before, so the first challenge was reconciling multiple sources of truth and a complex tech stack with various limitations. We approached this by combining all libraries, analysing them, and creating design components that could be implemented across every tool.
Another aspect of the project was conducting an accessibility audit of the components to improve the product's overall accessibility. Visually, this involved fixing hover and focus states of focusable components, which failed colour contrast ratio tests.
Design systems are as much about components as they are about people. Clear documentation and communication proved essential for adoption. embedding accessibility early saved time, avoided technical debt, and created a better experience for residents.
