Suricata 2.1
A design system to improve consistency and cohesion.
Company
Compare the market
Year
2022 - 2023
Role
Senior Product Designer
Website
The opportunity
Something had to change, we couldn’t continue treating the Design System as a side hustle, and expect all of our products and services to adopt it. Compare the Market started out building their Design System in 2018 but only as a side-project.
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
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
Can toggle on DNA by default for all designers via Figma admin controls
Designers can then toggle the correct library for the platform they are designing for
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.
Summary
In a team where designers are often working in collaboration, and having to leverage each other’s work, there has been many moments of growth for me as I learned to navigate the waters of being a meaningful contributor to a shared system that ultimately helps fellow designers in our work to create a closer bond between diverse product landscapes, so that we are moving ever closer to cohesion at an organizational scale.
Systems are composed of interrelated parts, with vast dependencies sometimes creating very complicated chains of connection between elements. Because of the interdependent nature of the system’s parts, changes that are made to a single element will often ripple out changes that affect the wider whole.
By making more considered choices when constructing components so that they are appropriately abstracted and extensible, we are able to better evolve components as needed, and clearly communicate the changes back to the system in a way that resonates, thus helping to keep components relevant and practical over a longer lifespan.