Employer
Trustpilot
Shipping Date
October 2022
Supporting 18 product teams with a new design system, during a company-wide rebrand
Role
Product Design, Project Management
Tools
Figma, Tokens Studio, Slack, Confluence, Jira, Miro
Brief
Using a new design system (Constellation), define and apply new branding to our B2C and B2B products.
Business Context
In early 2022, Trustpilot partnered with branding agency Barkas to develop a bold new identity aimed at expanding into the U.S. market. While the brand guidelines were well-suited for marketing, they lacked the structure necessary for product and UI design.
The company set a number of goals, with the focus for product and marketing teams as follows:
Concentrated marketing campaign in October 2022
Relaunching digital products (B2B and B2C) to coincide with campaign
Launch our first iOS native application
Our design system team, Constellation, was tasked with bridging the gap between the new marketing guidelines and product, to achieve these goals.
New designs were bold and impactful, but how would these translate to our existing products?
A design system providing clear direction, amplifying the efforts of 18 product teams.
Key Outcomes
✅ Delivery of a themeable, accessible and responsive design system
✅ Application of new branding (via design system) to Trustpilot’s various products
✅ Supported 18 product teams, without interruption to features in development
✅ Reduction of Figma expenditure by $24,000/year
My Contribution
The product team were given 10 months to define and apply our new branding to the entirety of our B2B and B2C products, and our new iOS App. It was decided that the definition of this branding would become the responsibility of the design system team, acting as a central contributor to all feature teams, to define and coordinate the implementation.
The following are some of my key contributions during this time:
Defined design tokens (color, type, spacing, elevation)
Created 70+ Figma components used by 18 teams
Audited and realigned all existing component libraries
Facilitated incremental rollout with documentation, communication and training
Partnered with engineering to ensure design-token parity in code
Hosted workshops to familiarise colleagues with tools and features
Trustpilot.com before (2021) after (2022) and now (2025) - bolder, more modern, and easier to navigate. Maintained by the same design system I defined.
Scaling Design: From Chaos to Constellation
We implemented the Atomic Design methodology—translated into clearer language for non-technical collaborators:
Tokens → Elements → Components → Component Groups → Features
Designed a modular system of reusable pieces
Created rules for color usage, typography, sizing, and layout
A clear dependency chain helped us build confidence and align priorities with various teams.
Tackling the Big Challenges
Component Audit & Alignment
We manually audited existing UI across web and iOS apps. This involved:
Mapping every component and token from design → code
Comparing values across B2B, B2C, and marketing libraries
Flagging visual inconsistencies and misuse of styles (especially grays and spacing)
Naming & Theming
Reduced ambiguity by creating labels like foreground/primary, as a semantic alias for blue-40.
Defined 10 interchangeable colour themes with clear usage rules
Simplified property values with consistent defaults throughout our components
Typography categories (display, heading, body) separated visual style from semantic markup.
Supporting 18 Product Teams
We supported ongoing feature development while introducing sweeping design updates. To make that happen:
Delivered weekly change summaries in Slack and team meetings
Set up a staging branch for safe testing of changes
Provided hands-on support and feedback to all product designers
Trained feature teams on new tokens and patterns
Ran collaborative workshops to align visual exploration with brand goals
I regularly hosted workshops to share features of our components in Figma - for example, using Tokens Studio to apply colour themes
Measuring Success
By the end of the rebrand, our Figma library metrics were as follows:
536
Tokens
70
Components
6.5k
Inserts p/w
Constellation was created to support the work of 18 product teams and over 30 designer roles, reducing the time they spent on repetitive tasks whilst reducing uncertainty and inconsistencies.
As part of a design system, it also served to support engineers, by providing a single source of truth, and reduced maintenance. Likewise, project owners could easily review our new documentation when detailing new work specifications.
By centralising design system work within a small team, we saved the wider production teams hundreds of hours of day-to-day work, not to mention reducing design and code debt which might occur from inconsistencies between features. A conservative estimate of cost savings for the design team alone, is somewhere in the region of £600,000 per year.
I worked with user researchers to implement a System Usability Scale (SUS) survey, tracking internal feedback on ease of use over time. While formal reporting began after I left, early results were promising, with teams reporting higher confidence and fewer design errors.
Beyond the Brief
I took the opportunity where possible, to create more resources for our design team.
Expanded Icon Library
Curated and expanded our icon set to over 200 functional icons
Recreated 36 category icons from scratch to meet new brand specs
Allowed for additional functionality, such as line-thickness and colour customisation
Removed duplication and improved consistency across teams
Refined iconography aligned better with brand tone and product function.
Cut $24,000 in Annual Figma Costs
Acting as Figma administrator for the company, I reduced costs by:
Auditing ~90 users
Removing editor access for inactive users (2+ months)
Communicating with inactive users and documenting the process
The resulting changes reduced license count and saved ~$24K in a single billing cycle.
Mentorship & Advocacy
Helped onboard and mentor new product designers
Led training sessions to utilise Figma's powerful features
Advocated for system thinking across marketing, design, and engineering
Reflections
This project was an opportunity to do deep systems thinking, but also to grow in leadership. From handling rollout logistics to supporting individual designers, it taught me how to scale influence and advocate for long-term design quality across an entire org.
“The most satisfying moments came from hearing how our work saved teams time, clarified ambiguity, and made design more fun.”
Appreciation Rounds
These notes from my colleagues remind me that great design isn’t just about pixels or patterns - it’s about using your experience to support and amplify the abilities of your peers.