Background
In this particular case study, I aim to recount my journey in establishing a design system for WTW’s Risk & Analytics department.
Throughout this endeavour, we formed a central team, established procedural frameworks, introduced innovative work tools, and laid the groundwork for our design system.
Notably, this initiative unfolded without the allocation of dedicated design or development resources. Our narrative revolves around the discovery of a systematic approach, fostering continual advancement amid a significant influx of concurrent tasks and evolving priorities.
This article delves into the methodologies and procedures we’ve employed thus far, both in interface design and technical development.
What Prompted The Necessity For A New Design System?
Prior to an update, WTW confronted the absence of a comprehensive design system that could harmonise their brand.
The existing design system was fragmented, lacked uniformity, and was partially outdated. Moreover, the outdated documentation left significant room for interpretation.
Consequently, our product, brand, and engineering teams found themselves without a shared foundation concerning processes, design language, guidelines, and UI pattern libraries. This led to inefficiencies for each team and inconsistencies within our product.
The following visualisation illustrates the diverse styling variations present on our site at that time, extracted through CSS Stats, a free inventory tool that identifies and analyses a site’s stylesheets.
As evident, we grappled with numerous variations in colours, font sizes, and spacing values, constituting just one facet of the issue. The creation of an updated, centralised design system aimed to achieve several objectives:
Team Alignment – Provide a more structured and guided approach to product development, fostering alignment among our teams.
Efficiency Boost – Expedite our design and development processes by offering teams a ready-made library and patterns, enabling quicker creation and testing of layouts.
Enhanced Brand Perception – Elevate brand perception and user trust through consistently positive experiences, catering to everyone and facilitating the accomplishment of user goals.
Accessibility – Prioritise accessibility in our products by embedding accessibility and inclusion into our component libraries, considering both design and code repository perspectives.
Despite the evident need for substantial resources, meticulous planning, and time commitments, we recognised this undertaking as a justified long-term investment in our company, brand standards, and the satisfaction of our customers.
Securing support
To ensure the success of this project, garnering support from stakeholders was a crucial prerequisite before initiating the development of our design system. We pursued a systematic approach by:
- Conducting a company-wide kick-off presentation, elucidating the current pain points and outlining the anticipated benefits of the project for the entire organisation.
- Engaging engineering teams early in the process through bi-weekly design system meetings and workshops to gather their valuable input.
- Transparently sharing the work in progress and the project roadmap with various squads.
By tackling these challenges, businesses can turn their e-commerce sites into powerful sales tools. A thoughtful redesign enhances user experience, builds customer trust, and sets the stage for long-term growth in the competitive online market.
Exploration Of Design Elements
Spacing, buttons, and more. Subsequently, we progressed to more intricate building blocks and entities (molecules, organisms, templates, pages). The transition from Sketch to Figma prompted the creation of components from scratch, aligning with our evolving design requirements.
Key activities during this phase included:
Research – Investigating other design systems and interfaces to discern common practices and draw inspiration for our components.
Analysis – Delving into instances and use cases documented during the audit, ideating on solutions that align best with our objectives.
Unification – Merging various component variations to retain only the essentials. For instance, we streamlined our colour schemes to a maximum of 9 shades for each hue, consolidating excessive variations with the finalised schemes based on proximity. The resulting colour palette represents the culmination of this process.
Guiding principles
Several principles governed my design approach:
Responsive Components – Leveraging Figma’s auto-layout feature, we aimed to create components that seamlessly adapt to various devices or layouts, facilitating their reuse across diverse design scenarios.
Comprehensive Design – We meticulously designed components to encompass all possible scenarios or “states” within the system, accounting for hover, focus, filled-out, error, and disabled states.
Variant Utilisation – With the introduction of the Variants feature in Figma, we embraced its functionality to amalgamate variants into component sets, complete with custom properties and values. This approach enhances the manageability, accessibility, and interchangeability of components through the sidebar menu.
Every component was crafted with a focus on accessibility, diligently adhering to the WCAG AA accessibility standards. An illustrative instance is our deliberate selection of colours for a warning alert, ensuring ample text contrast (verified through the Stark Figma plugin). This meticulous approach aims to guarantee that users with low vision can effectively perceive and utilise our components.