Clarion: Designing for scale and slashing UI workload by 83%

Clarion, the UK's largest housing association, had recently restructured a large technology department, bringing all tech, design, and product roles in house to reduce reliance on external suppliers and deliver more value for their vulnerable customers. I joined a few months later to lead the small design team, who were rebuilding and improving all websites and portals in Figma for our developers to implement.

Deliverables

Services

My role

Multi-brand design system aspirations

Clarion has multiple brands under its umbrella, and customers could interact with several of the sites, so it was crucial that the experience felt consistent and unified.

But the design team was working in inefficient ways that made scaling difficult. The existing design system had completely derailed: design principles were undefined, audits were incomplete, and variable collections were chaotic.

The core issues included:

  • Incorrect understanding of aliasing, making scaling this beyond a 3x website design system impossible.
  • Overly bloated typography styles, padding scales, spacing scales.
  • Very low consistency with many one-off styles, type styles, effects, components, and variables.
  • No naming conventions; designers could not publish this library and use it effectively from linked documents.
  • Themes and brands were not scalable. A simple colour change request from marketing could become a major task.
  • The system was simply not built for growth.

My mission was clear: to rebuild the system from scratch. However, I had a team of designers who had invested significant time in the existing version, so I needed to bring them on board. In the words of Simon Sinek... Start with why.

Project image

We refused to be bogged down wrestling with variables in Figma. We wanted to be out there designing products that would actually make a difference to Clarion's vulnerable user groups. We wanted purpose and we wanted action.

So I showed them this

AXIS framework

And so, we set to work. Gone were the days of defining and adding a new set of variables and tokens for each component.

design system cleanup

Game Changer

Before: The design system was bloated, inconsistent and difficult to scale. Designers and engineers often duplicated work, filled in missing details through guesswork, and battled with conflicting styles and components.

Most design work started with desktop layouts, with mobile screens pieced together afterwards, resulting in disjointed experiences and extra rework.

After: Rebuilding the system with a clear aliasing strategy completely transformed workflows and mindset. Designers could now create once and generate nine outputs, while engineers coded once to deliver three brands.

The design team began to think about products in a more fluid, holistic way, designing responsively from the outset and using Figma constraints and Auto Layout in more developer-intuitive ways. The result was a simple, scalable and consistent system that improved collaboration, efficiency and design quality across every platform.

Project image

Key outcomes

A scalable and maintainable design system

Values, tokens and components were clearly defined and categorised, making the system easy to update and expand. This structure also enabled future themes, such as light and dark mode, to be added with minimal effort.

Greater efficiency across design and engineering

Designers and developers were able to create once and produce multiple outputs, significantly improving delivery speed and collaboration.

Reduced engineering uncertainty

The back and forth between design and development was greatly reduced, as was the number of visual defects during user acceptance testing. This led to smoother collaboration, less tension across teams and higher quality releases. Storybook was introduced to strengthen cross-team alignment.

Lean, consistent design system

Variables, styles and components were streamlined without any loss of quality. The result was greater consistency across brands and a unified visual language for the Clarion Group.

Clear, consistent rules across brands and devices

A token-based design system allowed designers to export tokens as JSON files for developers to use directly, ensuring consistency across all development teams. The system was also future-ready for native app integration.

Accessibility baked in from the start

Accessibility was embedded at the design-system level rather than added later. Core components and tokens were built to meet WCAG 2.2 AA standards, ensuring compliant colour contrast, clear focus indicators, and appropriately sized interactive elements. We also began exploring how ARIA roles and semantic HTML could be integrated directly into the system to further support developers - the next step towards making inclusive design the default, not an afterthought.

Next up

Start up Eden needed everything from a name to the product.

View Eden