How Which? solved design debt with InVision

Since 2014, Which? has leveraged InVision Enterprise, including: Craft, Freehand, Design System Manager, Prototype, and Inspect.

Challenge

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.

Solution

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.

Result

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.