Creating a design system - Confused.com
Software and tools used: Figma, Illustrator, Zeroheight
__________
Design system:
__________
Background:
To create and maintain a design system that would set the tone for the brands direction company wide with the objective of ‘bringing clarity to a world of confusion’. Creating a simplified and less confusing process for helping the user to get an insurance quote quicker and simpler. To achieve this we also wanted to visually show a more simplified world and have that reflected in the stripped back and more minimal style of the overall brand style.
Every part of the brand needed a focus on improving user experience and a new visual style to meet this new objective. Everything from the product quote journeys to the marketing site as well as external and internal media communications and marketing assets such as emails was looked at.
As a team we needed a way of communicating these changes within the company but also a way for collaborators to contribute going forward.
__________
My responsibility:
Using Figma and collaborating with multiple teams research was conducted focusing on the user needs, accessibility and simplicity at the core and from there the basis of the design system formed. The process of finding what worked and didn’t work through testing helped to form the basis of our component styles and layouts.
Creating a library of assets within Figma. The library comprises of typography, colour, iconography, illustrations, UI components and form elements, loading sequences and more. All of this feeds into Confused.coms products and multiple touch-points, collaborating with product designers, developers and more to build out solutions. One central library allows for better continuity and efficiency across work flow with a simple change to a master component reflecting the change across all layouts that use an instance of that component.
Working closely with multiple teams and departments in the business, alongside developers and engineers we serve the needs for Confused.coms product platforms and marketing collateral designs and builds via regular sprints and meetings to make sure we are aligned and working to our goals.
__________
Result:
The design system has allowed not just the design and development team but the company as a whole to better understand our ways of working which in turn allows for better communication and collaboration amongst all parties.
The design system is ever improving and expanding platform by which we can all work by one source of truth, with a better focus on speed, quality and consistency across all our deliverables and all in one place. Ultimately we can design build and rollout deliverables at a much faster rate while keeping up the same quality
Zeroheight is the online platform we use to link assets from Figma as a way of showcasing the design system and allowing white labels, developers and third party access to all out our styles and code behind the components for use and implementation.
Storybook is where development house the coded elements and integrates well with Zeroheight via plugin integrations that allow users to see the component in isolation as a functioning piece.
