Introduction

The Royal Borough of Greenwich Design System is a standardized and accessible UI framework designed to ensure consistency across the council’s digital services. Built using Atomic Design principles, it provides a structured, reusable component library that enhances scalability and maintainability.

Supporting both the Royal Borough of Greenwich website and the Greenwich Community Directory, the system ensures a cohesive user experience while meeting GOV.UK accessibility standards (WCAG 2.1 AA). By streamlining design and development workflows, it improves efficiency for the council’s digital teams and enhances usability for residents.

Objectives:

Consistency: Establish a reusable component library for a unified design across council websites.

Accessibility: Ensure compliance with WCAG 2.1 AA standards to serve all residents, including those with disabilities.

Scalability: Build a flexible system that supports both government services and community platforms.

Efficiency: Reduce design and development time by enabling collaborative workflows between designers and developers.

Challenges and Solution:

1. Aligning Stakeholders Across Different Teams

• Challenge: Designers, developers, content teams, and council staff had different expectations and workflows.

• Solution: Hosted regular cross-functional workshops and conducted collaborative usability testing to align goals and ensure a shared understanding of the system’s purpose.

2. Balancing Customization vs. Standardization

• Challenge: Departments wanted custom UI elements, making it difficult to maintain consistency.

• Solution: Introduced flexible design tokens for colors, spacing, and typography, allowing some customization while keeping core components uniform.

3. Accessibility Compliance & Testing at Scale

• Challenge: Ensuring the design system met WCAG 2.1 AA standards across multiple council websites.

• Solution: Conducted automated accessibility audits and real-user testing with residents, ensuring all components passed contrast, keyboard navigation, and screen reader requirements.

4. Developer Handoff & Implementation Challenges

• Challenge: Some components weren’t implemented as designed due to miscommunication between design and development teams.

• Solution: Used Storybook for live documentation and worked closely with engineers to refine documentation and component specifications.

Design Process:

1. Defining the Core Foundations

• Established typography, color palette, spacing, grid system, and iconography.

• Aligned with Royal Borough of Greenwich’s branding guidelines and content design principles.

2. Component Design & Documentation

• Designed reusable UI components (buttons, forms, cards, tables, navigation, etc.) following atomic design principles.

• Used Storybook for live documentation and version control to support developers.

3. Prototyping & User Testing

• Created interactive prototypes in Figma for usability testing.

• Gathered feedback from council staff, content designers, and accessibility testers to refine the components.

4. Developer Handoff & Implementation

• Provided detailed design documentation to streamline the development process.

• Worked closely with engineers to integrate the design system into the website’s CMS and front-end framework.

Research Insights:

Audit of existing council websites: Identified inconsistencies in UI components, navigation, and accessibility.

User interviews & feedback: Collected insights from residents, council staff, and local organizations to improve usability.

Benchmarking: Compared with the GOV.UK Design System and other local government frameworks.

Accessibility audit: Conducted tests with screen readers, color contrast tools, and keyboard navigation.

Accessibility testing:

WCAG 2.1 AA Compliance: Conducted contrast checks, font size validation, and ARIA implementation.

Screen Reader Testing: Used NVDA, VoiceOver, and JAWS to ensure proper accessibility.

Keyboard Navigation: Verified that all components are fully operable without a mouse.

Real User Testing: Conducted testing sessions with residents, including users with disabilities, to validate accessibility improvements.

Audit with Shaw Trust: Partnered with Shaw Trust to conduct an independent accessibility audit, ensuring compliance with best practices and real-world usability for users with disabilities.