The Tooling Kit
Helping teams ship faster and more scalable products
Overview
Tooling at THG was an erratic, often low quality, end-user experience, which was due to siloed development squads, more back-end focused, creating inconsistent user interfaces with scalability and accessibility issues; This lead to negative feedback from stakeholders across the business. Our task was to create parity across our tooling with the introduction of standardised components and later a full design system.
Client
THG
Services
UX Design
Categories
Design systems
Delivered
Component library of 52+ components
Scalable documentation, including style dictionary
Modernised app shell, responsive across all devices
40+ migrated user interfaces
Auditing
We audited our most popular tooling applications. We were looking at patterns in the use of components including commonality and quality of their implementation. We used these metrics to determine a roadmap for our component library.
Foundations
We established primitive values withing Figma for all styling properties including colour, type, layout, depth and motion. Then we translated them into semantic variables to maintain consistency, keeping the UI scalable, and future-proof.
Component library
Our component design process followed a structured sprint, beginning with competitor analysis workshops to identify industry best practices and modular properties. Designers adhered to a standardised checklist to ensure principles were properly implemented. Each component underwent rigorous peer review, focusing on checklist compliance, accessibility and feasibility. When appropriate, components were also incorporated into user testing but could be developed beforehand. Each stage (research & design, peer review, validation and feasibility) contributed to increasing the design's confidence score by 25%, ensuring a high level of quality and usability.
We established a code-based component library accessible online for wider adoption by our teams, we also leveraged auto-generative plugins, enabling near-instant documentation within Figma.
Patterns
As we developed components, the next logical step in enhancing design-development operations was to establish standardised patterns. For example, we created table variations with bulk editing, different row heights, and advanced search and filtering capabilities. We also designed patterns for larger features, such as notifications, to serve as reusable baseline for both developer and designer. Everything properly nested with booleans for better designOps.
The developer's experience
With our initial component library built, we realised there were some problems with its implementation. It was clear we put too much focus on components as developers were still making mistakes despite a more cohesive user interface, so, through observation and a business-wide survey we found insights to build more sufficient resources, including proper usage, formatting rules, and accessibility online without Figma.
Insights
App shell update
Previously those working on tooling projects disregarded responsive design below large windows, however with tooling on smaller devices becoming more appealable e.g., warehouse and in store operations, we designed a responsive app shell for all devices, even mobile.
Next steps
We are still putting the final touches on our design system in preparation for externalising it. Next steps will be looking at ai tools, to integrate our styles and components, to build quicker user interfaces.