From Chaos to Cohesion: The TOMS Design System
When TOMS announced a major brand refresh, the countdown to launch had already begun. Marketing had set the tone with a bold new identity, but the website and digital ecosystem weren’t ready to match it. That’s where I came in.
As the lead product designer, I saw an opportunity to do more than just update visuals. I set out to build a flexible, scalable design system that could carry the new brand across every customer touchpoint, from our internal pages to third-party platforms, without missing a beat.
Date: Winter/Spring 2024
Client: TOMS Shoes
Role: Lead Product Designer
Tools: Figma, Asana, Jira, Adobe Creative Suite, Google Optimize, Convert
URL: toms.com
The Challenges
Brand Discrepancy
The existing digital ecosystem—from the core site to third-party vendors—lacked visual and functional consistency, risking a disjointed experience during the relaunch.
Audience Disconnect
Early design directions leaned too heavily toward Gen Z trends, misaligned with TOMS’ primary audience of Millennial women.
The Process
Getting Aligned
I started by grounding the team in user and market realities. I ran competitive audits and refreshed our personas, which made it clear we needed a more sophisticated, grown-up aesthetic. That insight shifted our whole visual direction and laid the foundation for the design system.
Building the System
As the rebrand rolled out, I built a flexible design system in Figma to unify digital touchpoints. Every component was crafted to reflect the new aesthetic and scale across ecomm, editorial, and marketing. With clear guidelines shared across teams and vendors, the system became a reliable source of truth for consistent, on-brand execution.
Rolling It Out
Throughout implementation, I worked hand-in-hand with developers to ensure design fidelity. I stayed involved during QA, catching edge cases and refining components in real time. As vendors adopted the system, I served as a design advocate and support partner, helping them apply it cleanly and effectively.
The Solution
I led the creation and implementation of a scalable design system, working cross-functionally with developers, marketing, and external vendors to ensure visual and UX consistency from the start, through strategy, handoff, and QA.
Style Guides
Developed a single design system implemented across all global business entities and third-party partners.
Product Detail Page
Applied updated brand standards to the PDP, improving visual consistency and user experience.
Homepage
Optimized branding on the mobile homepage, encouraging engagement and conversion.
Third Parties
Customized all third-party vendors to ensure brand consistency throughout all global digital experiences.
The Results
Increased conversion rate
2%
Increased Average Order Value
$3+
Increased Customer Satisfaction
10%
This project reinforced the power of a well-crafted design system. It wasn’t just about visuals. It was about aligning teams, platforms, and goals.
With tight timelines and multiple stakeholders, the system became our single source of truth, helping us move faster and smarter. Most importantly, it proved that thoughtful, strategic design can be the glue that holds a brand experience together.
