Design System
A comprehensive UX/UI design system was created for THG's Imagination Platform to increase design efficiency, ensure consistency in branding and layout, improve user experience, reduce development costs, and enable faster time-to-market.
The Challenge
As the demand for Software as a Service products continues to grow, it's becoming increasingly important for companies to differentiate themselves through exceptional user experiences. A well-designed UX/UI design system can help companies achieve this goal by providing a consistent and cohesive user experience across all their products.
The THG Imagination Platform was struggling to maintain consistency across its various products. Each product was designed independently, leading to inconsistencies in UI components, interface layouts, guidelines, and developer documentation. This made it difficult for developers and designers to collaborate effectively.
To address these issues, we decided to implement a design system which would serve as a shared library of design elements, guidelines, and best practices that could be used across all of their products.
Information Gathering
To initiate the development of our design system, we collected and reviewed a variety of design assets from various sources, including Microsoft docs, Confluence pages, and Figma files. Additionally, we conducted interviews with designers, developers, and product managers to identify unmet needs and determine how a design system could enhance their workflows.
During the interviews, designers expressed frustration with the inefficiency of designing common patterns from scratch without clear visibility of existing reusable components. Developers also highlighted the time-consuming process of building and maintaining different patterns for each site. Both teams found it challenging to identify the correct Figma files to work from and encountered confusion over breakpoints and functionality expectations due to a lack of shared language. As a result, it became evident that a design system was necessary to streamline the design and development process, improve communication and enhance the overall user experience.
Team Quotes
“It's hard to know if I can reuse something from another product without a centralised design system.”
— UX Designer
“Updating styles across all instances is tedious; a single source of truth would be more efficient.”
— Lead Developer
Design Approach
To determine how best to approach these issues, we ran workshops with the wider design team to define the tools we could use to improve our workflow, grid & breakpoints, UI components and developer handover process.
We decided to utilise a 12 column grid layout with a 8 pixel grid system across a defined set of breakpoints. The 12 column grid layout offered structure and organisation, ensuring consistency in design layouts with components while also allowing for scalability and adaptability to different screen sizes and resolutions. This made it easier to design for various devices.
Additionally, the use of the 8 pixel grid system provided greater flexibility, which was especially important for a web application like the Imagination Platform that featured densely-packed information within their interface layouts.
The use of the 12-column and 8-pixel grid systems, in addition to the definition of breakpoints, allowed designers to create a responsive and consistent design system, ultimately improving the overall user experience.
After establishing the fundamental framework for the design system, we proceeded to enhance its capabilities by enabling complete customisable ability for future projects. Our design system utilises shared typography and colour styles that can be easily modified, similar to updating CSS, resulting in a swift and effortless process for customisation.
Brand Guidelines
We collaborated with the creative team to revise the brand guidelines for Imagination, which included refining the logo, colour palette, typography, and tone of voice. These guidelines were crucial in maintaining consistency across all products with the company's overall brand image.
To begin the process, we conducted a brand audit to assess the current brand assets and their usage across various products. Subsequently, we developed a visual identity system that aligned with the company's brand strategy. After the visual identity system was finalised, we documented the brand guidelines in a comprehensive style guide that provides detailed information on how to use each element.
UI Components
After defining the brand guidelines, we proceeded to set up the UI components within Figma. This involved creating reusable design elements such as buttons, forms, icons, colour and typography styles. The use of pre-designed elements ensured that all products remained consistent and improved the efficiency of both designers and developers.
To start, we conducted a UI inventory to identify the common design elements used across products. After completing the audit, we consolidated all necessary elements and designed a set of UI components that aligned with the brand guidelines. Once both teams were satisfied, we documented the UI components in a design system library which included code snippets, design specifications, and usage guidelines.
Design Patterns
Following the development of the UI components, our next step was to create design patterns that provide guidelines for common user interface elements, such as navigation menus, search bars, and card layouts. These patterns helped to ensure that all products adhered to best practices for usability and user experience.
We conducted a heuristic evaluation of existing products to identify common usability issues and areas for improvement. From there, we designed a set of patterns that addressed these usability issues, aligned with the brand guidelines and UI components. The design patterns were added to the design specification to assist designers and developers in understanding the best use of each component.
Accessibility Guidelines
To ensure that our products were inclusive and could be used by everyone, we created accessibility guidelines that provided guidance on designing products that were accessible to all users. We conducted an accessibility audit during the process of building the design system, working with the Accessibility team to identify areas of improvement and ensure compliance with accessibility standards such as WCAG.
The accessibility improvements and standards were integrated into the UI components, alongside an accessibility guidelines section in the design specifications. To ensure that the design was built correctly, we included accessibility code snippets that helped designers and developers correctly implement the accessibility guidelines.
Guidelines and Documentation
Creating a design system is more than just creating a library of reusable components. It also requires comprehensive documentation that defines and communicates the visual design, user experience, and engineering values of the system. This documentation not only serves as a guide for designers, developers, and content editors to ensure consistency in the platform's design and development process, but also enables other internal and external teams to quickly adopt the platform and work in harmony with each other.
To achieve this, our design system was created to be themeable, providing multiple variations of each component to ensure that designers can easily customise the system for their product area. To keep the library streamlined and clean, we allowed designers to delete versions that were unsuitable for their specific use case. Within the UI kit, we provided clear explanations of why certain design decisions were made to help designers understand the reasoning behind them. This was especially important given that everyone has their own way of working. By explaining what was fixed and the risks involved in changing certain aspects, we ensured that designers were equipped with the knowledge needed to make informed decisions.
To make the documentation more accessible and easy to understand, the engineering lead and I worked closely to ensure that all documentation was consistent and concise so that we ensured that team members could quickly and easily find the information they needed.
Outcome
The Imagination Platform design system unified the design and development teams and provided guidelines for consistent, accessible standards across our web applications.
The adoption of this system reduced page build time for developers by 75% and decreased the time it took designers to wireframe a 10-page responsive site from a week to half a day. This enabled us to rapidly prototype new features, onboard new designers and developers more efficiently, and expedite the handover process.
Project Information
Client
The Hut Group
Date
2022/23
My Role
Design System Manager
Discovery and research
Creating the Figma UI Kit
Usability testing and validation
Design workflow management
Design & Reporting Tools
Figma, FigJam, Confluence, Excel
Credits
Kieron Dony - Head Of Engineering
Oliver Prince - UX Researcher
Sofea Wong - Lead Accessibility Specialist
Jenna Hughes - UX/UI Designer
Florin Cristea - Junior UX/UI Designer
Gabriel Andrei - Junior UX/UI Designer
