Given their large, diverse audience and range of products, the team at Which? struggled with design consistency across their sizable digital estate, including the legacy design components of several rebrands.
Without the proper design governance and workable standards to guide them, the team at Which? had accumulated design debt that was impacting their overall customer UX.
Designers and developers often worked in silos, which meant time was spent updating standard components rather than creating innovative designs and improving coherence across the digital product suite.
Which? needed to find a governed, sustainable solution that provided a central source for teams to build, use, and make design contributions together.
To help their team provide more cohesive user experiences, Which? built a design system on InVision Design System Manager. With a governed design system in place, they are now able to spend less time redesigning elementary components - such as buttons and text-styles - and spend more time solving meaningful UX problems.
And while the team tried to build a design system in the past, the project lacked ownership, resulting in low usage and high maintenance overhead.
The design system allows designers and engineers the freedom to tackle bigger problems, rather than focus on revising basic components, while also ensuring everything is aligned and cohesive. InVision DSM provides us with the single source of truth that holds everything together.
Digital Visual Design Lead, Which?
In just three months, the team at Which? used DSM to build a beta; and barely three months later they released the Which? Design System for general use. This delivered the required design leadership and allowed the various stakeholders a chance to see the benefits firsthand.
By starting small, they achieved value faster while iterating based on needs. The design system increases governance and ensures consistency by helping the team provide more useful documentation around UX, design, accessibility and development principles. It also allowed stakeholders to have a greater understanding of the overarching principles and how unnecessary variations can adversely affect the integrity of the whole.
With DSM, Which? made the leap from disconnected, inefficient silos, to collaborative cross-functional squads that provide value to different aspects of the customer experience. The team began by building foundational components like typefaces, colour-ways and imagery to support an existing content migration project.
Even after the design system was built, they continued to use the squad model to work more efficiently, communicate more clearly, and keep everyone working toward solving real UX problems in a unified way.
Reduced design and tech debt
Delivering a workable design system considerably helped Which? reduce design and tech debt. Giving designers and developers access to a central single source of truth enabled them to make use of existing components and deliver the flexibility to build only what they need - all with proper governance to keep the system fresh.
Rather than spending time discussing the best way to design a particular component, the conversation shifted to whether or not the component fits in with the principles of the design system.
Using DSM with Storybook has allowed the engineers from the front end development team more ownership around the integrity of the whole - and promoted a much closer working relationship with the design team. Everyone has pulled in the same direction and there is a renewed emphasis on quality of the components from both design, accessibility, and documentation through to the code itself. Over time, the benefits of reusable components which can be updated in one place, will have significant benefits for future projects and deliverables.
Whatever you do, don't launch your design system and leave it. You've got to have a core team concerned with managing ongoing contributions and looking after the integrity of the design system as a whole.
Head of Design & UX, Which?