The Challenge
THG's software tools had inconsistent and difficult-to-use interfaces due to silo'd development by different teams, leading to negative customer feedback and a poor business tooling rating in a Gartner report.
To resolve this, my design team created a comprehensive component library to standardise the look and feel of all products, ensuring a seamless and accessible user experience.
Watch the video storyboard (1:31s)
Actions
1. Audit
2. Management
3. Discovery workshops
4. Component design specifications
5. Design team critiques
6. Implementation
7. Upgrade legacy interfaces
2. Management
3. Discovery workshops
4. Component design specifications
5. Design team critiques
6. Implementation
7. Upgrade legacy interfaces
Result
The successful implementation resulted in a refreshed, cohesive and accessible component library that THG was able to use to drive consistency across the entire product line.
This increased operational efficiency for designers when prototyping, engineers when building new tools, and also boosted customer satisfaction amongst our Ingenuity clients due to the usability improvements.
1. The Audit
Analysis of components used in existing UI's, across 7 different digital products to identify opportunity areas for new components
2. Management
Once the components had been identified, I organised them into themes, forming the information architecture of the library. I could then delegate them to the team, setting an 8-week deadline to complete the design specifications so they were ready for development.
3. Discovery workshops
I facilitated collaborative workshops to identify how designers used similar components in their work, followed by rapid landscape analysis.
This helped us to uncover best-practice usability standards within competitor SaaS tools and common design patterns that users were accustomed to and familiar with.
We could then prioritise features to embed within the components using the MoSCoW method, forming a set of requirements that designers valued the most when prototyping.
Featured workshop: Error handling
In this workshop, we focused on what a good job looked like when systems need to communicate to users with help and feedback when running into an error, to help them recover and get back on track.
The workshop allowed us to plan features based on information quality, layout/positioning, aesthetics, and accessibility to ensure we had a robust design pattern that could be used by tech teams consistently across the business.
Tip: Expand the workshop into full-screen mode to zoom and pan around.
4. Component design specifications
The design team at THG are extremely proud of the work they've done in creating a comprehensive design specification format, with layout, interaction behaviour and usage guidelines ready for developer handoff. Each link below has all of the different interactive states such as hover, focus, pressed, active, error and disabled so that we could use them for rapid prototyping as well as having everything an engineer needs to build every aspect of the components.
Example design spec documentation for a compact select component
Example design spec documentation for a file upload component
5. Design team critiques
Internal team peer reviews were embedded into our team culture, sometimes facilitating sessions 2-3 times per week.
In these sessions, designers took the components for a test-drive in their projects, acting as beta testers, then delivered effective usability feedback insights back to the team.
Cross-functional teams provided a wide variety of feedback from different perspectives, acting as a layer of accessibility review before the components were published in the library for wider team use.
6. Implementation
Close collaboration with engineering teams helped us to iterate, refine and bring the components to life in code.
A sandbox environment was created so that developers could release new components to a space, which designers could review for interactivity, font sizing, padding/margins and colour usage.
This helped ensure only the highest quality components were approved and made available for all of the development squads to start using.
7. Upgrade legacy interfaces
After the component library was released we were able to start upgrading interfaces to the new version, driving consistency between tools. This then unlocked the next-level feature that allowed users to navigate between tools seamlessly, as they all felt like they belonged to a unified product line.
Before: Example legacy Pricing UI
After: Example Pricing UI with upgraded design system components