Design System

With product verticals tending to design in isolation and optimizing solutions for individualized goals, our experiences became inconsistent and disjointed over time. The collective set of our web experiences was characterized by a lack of cohesion; evidenced by fragmented implementations littered with a spate of unique design patterns and various visual styles.

Designers at Compare the Market are embedded within cross-functional teams dedicated towards specific product streams. To ideate and iterate more productively as we traverse between product domains, we benefit from having a single source of truth that provides a scalable design language to guide our crafting process.

Eliminating inconsistencies

For us, this single source of truth exists in the form of our design system — a centralized, evolving hub intended to provide the necessary tools and knowledge to empower designers in building solutions that would lead towards the end goal of a unified design language across our various product streams.

As an individual contributor to the shared Figma libraries maintained by the CX team, a recurrent issue I often revisit is exploring how we might reduce introducing additional inconsistencies to the product ecosystem as a result of siloed design.

Looking towards the areas where effort could be best invested to improve the usefulness and robustness of our design system, I’ve distilled my learnings into domain areas that have guided me towards being a more purposeful contributor.

seperating libraries

This was a fairly straightforward decision where I split the single component library into 4 seperated ones:

• ‍Global

‍This is what makes Compare the Market look and feel the way it does. Logos, colours, typography, animation, elevation, etc

• Web

Components that are used on Compare the Market’s websites across the estate

• iOS

Components that are native to the iOS platform

• Android

Components that are native to the Android platform

the benefits

1. Can toggle on DNA by default for all designers via Figma admin controls
2. Designers can then toggle the correct library for the platform they are designing for
3. I can publish and sync libraries independently of each other‍

Accessibility

It’s been well documented that Design System presents an opportunity to build accessibility and inclusion from the get-go, both from a design perspective and also from a code perspective. That said, making each component accessible doesn’t guarantee that the whole experience is accessible.

We aren’t perfect, but we are trying — there is recognition at Compare the Market that accessibility and inclusion are really important for building successful products.

Maintaining our newfound consistency

The design system is never finished. Maintaining, improving, and evolving the design system takes a lot of time and effort — there is rarely a day that goes by where I don’t publish an update to the Design System. This could come in the shape of Figma releasing AutoLayout and Variants so I work my way back through the design system enabling this for the rest of the team, components not working as expected, or collaborating on projects that evolve and improve the design system.

We use Jira to capture and prioritise the design system backlog, and everything is tagged with emojis: 💭 General feedback 📝 New component/documentation 💅 Component/documentation improvement 🐛 Component Library bug

The library is also open, not literally, but we actively welcome contributions from other designers — contributors then become advocates for the library and it continues to organically grow.

Design System ceremonies are also vital to the success of maintaining and improving the design system, these range from dedicated sessions with the engineering team, design reviews with other designers to catch-ups with individual product owners.

What was coming next

Onboarding more of the CtM estate sync libraries independently of each other

The majority of our time has been spent focussing on comparison journeys, but now we are starting to move our attention to other areas of the Compare the Market estate, starting with account and marketing/landing pages.

Accessibility improvements

We have committed to meeting WCAG 2.1 AA accessibility, so we will continue to follow and comply with accessibility and inclusion best practices.

iOS and Android focus

Whilst we do have iOS and Android libraries available, mobile hasn't had the same level of focus, both in terms of design and engineering as the web.

Analytics


We will be spending time getting under the hood of the Figma analytics feature to better understand how the various libraries are being used. It’s important for us to understand what components are being used, detached, and what components aren’t being used at all — and why.