Building a Multi-Brand Design System
Client
Designer Brands
Role
Principal UX Designer
Timeline
2023 – 2025
Credits
Josh C. / DEV
Opportunity
Designer Brands recently acquired Keds and Hushpuppies and planned to integrate them into our shared code base. Additionally, we had upcoming rebrands for DSW and The Shoe Company, requiring a more efficient way to manage and develop the unique components and styles of our brands.
Process
I designed an extensive design token framework and Figma design system that enabled our five brands to seamlessly implement their unique visual styles and apply custom overrides.
Results
We successfully launched several rebrands with significantly less developmental effort and reduced timelines. Furthermore, we greatly enhanced internal design and development efficiencies while building across our shared brand platforms.
Opportunity
The Core Problems
The need to integrate a new brand efficiently
Our system combines speed, flexibility, and powerful automation tools into one seamless workflow designed for modern teams.
Unnecessary repetitive design and dev processes
Our system combines speed, flexibility, and powerful automation tools into one seamless workflow designed for modern teams.
Inconsistency across components & styles
Our system combines speed, flexibility, and powerful automation tools into one seamless workflow designed for modern teams.
Restrictive design standards
Our system combines speed, flexibility, and powerful automation tools into one seamless workflow designed for modern teams.
Process
1) Industry research
Creating a design system that balances consistency with distinctiveness across five brands is quite rare. I began analyzing how other retailers manage their multi-brand design systems.
Key Takeaway
The critical need to implement design tokens.
I started exploring the structure of design tokens, various approaches, and implementation strategies, focusing significantly on material guidelines for direction.
2) Building a more resilient system
I created a Figma framework with typography, color palettes, and spacing tokens that accommodated each of our brands.
USER GOALS & FEATURES
Flexibility within nesting
The system must be layered to accommodate different levels of token support within our atomic design framework.
Inclusive naming structure
The system should utilize universally inclusive naming conventions for our tokens.
Multi-user focused
The system's approach should be understandable across different core teams.
Updated our components to reference the new tokens, allowing for dynamic brand and responsive flexibility.
3) Documentation, implementation, and refinement
I synchronized our defined tokens with Zeroheight, our documentation platform, where we updated our brand guidelines. Additionally, we implemented a script to fetch the tokens, enabling quick updates to site styling.
Executed a comprehensive UX audit to identify elements that lacked consistent global styling, and then applied our new token system.
4) Led the migration of our creative teams to Figma
Our creative brands each used differing design processes through InDesign and Photoshop for digital asset creation. A significant initiative alongside this was to influence creative leadership on the importance of a unified creative ecosystem, which enhances collaboration across teams and brands.
The Vision
Efficiency, collaboration, consistency, cohesion, and knowledge
This approach was not only aimed at improving efficiencies for other teams but also minimized redundancies by eliminating the need to update multiple versions of program-specific templates for our UX team.
It reduced the knowledge burden on our creative partners by sharing site-accurate components, enabling us to push new Figma component updates, in alignment with our feature releases.
Results
Lasting Impact
This initiative significantly transformed DBI's approach to design and development, streamlining the onboarding of new brands, revitalizing existing ones, and fostering a collaborative environment that revolutionized how teams worked together.
Without this effort, the amount of time to complete these changes could be a quarter-long initiative. In contrast, the 2025 DSW rebranding effort allowed us to accomplish most of the rebranding tasks within a single sprint, marking our most efficient update to date.
