UI at Scale: How Wayfair supports multiple brands and geos with a shared code base
Authors: Neva Corbo-Hudak and Stephanie Cenatiempo
Before 2019, our technology teams had no singular UI vision, resulting in inconsistent styling and user interactions. Creating cohesive user experiences was challenging while the management of reusable assets was distributed throughout the organization. As Wayfair’s products and reach grew, it was clear that shared code and design assets would unlock efficiency, scalability, and more cohesive user journeys.
In 2018, Wayfair formally established Homebase, Wayfair’s design system. A design system is a systematic approach to product development — complete with guidelines, principles, philosophies, and code. Over the years, Homebase has evolved into a single system that supports all platforms — Android, iOS, and web — and all Wayfair users — customers (those who shop on our sites), suppliers (those who supply items we sell), and employees (those who fulfill orders, provide customer service, and work in corporate roles, for example).
Homebase connects product management, design, and engineering through a shared language that describes our digital products and powers our digital experiences. In other words, Homebase enables our cross-disciplinary atomic teams to ship better products faster.
Our Component Library Architecture
Homebase employs a core component library for each platform — Android, iOS, and web. These libraries are built for flexible reuse to support all end users. Our design assets are built in Figma to match code assets, using the same terminology and structure to enable cross-functional collaboration and smooth handoffs between design and engineering teams.
Homebase’s design language is a holistic system that articulates how our products look, feel, and behave, and is used to create a distinguishable brand identity and creates recognizability for a brand. Functionally, design language provides sensory cues that help users understand how to interact with and interpret an experience. Design elements, like color and stroke weight, have intentionally assigned roles within our component library that create a consistent and meaningful user experience.
Design tokens (sometimes shortened to “tokens”) store visual attributes that define UI styling — things like color and fonts. They’re like nicknames for styles that are applied to components in place of hard-coded values.
Considerable thinking and planning has gone into developing a token system that creates consistent, intentional, and meaningful interactions for users. Tokens enable scale because we can change a value in one place and update all instances of that style across the component library.
Homebase shares tokens across all of our platforms — Web, iOS, and Android — creating consistency across our products and reducing maintenance for our team.
Using Themes to Support Brand Differentiation
Homebase supports brand differentiation through theming our components. Themes control the UI styling of Homebase components and allow us to set unique values for UI elements like type and color and apply them systematically to all Homebase components throughout an experience.
A theme is a specific set of values, stored as design tokens, that define visual styling for a brand. All themes have the same set of tokens and map 1:1 to one another. Unique token values are set at the theme level while token naming remains consistent across themes.
Homebase maintains nine distinct themes (AllModern, Birch Lane, Homebase, Internal Tools, Joss & Main, Partner Home, Perigold, Wayfair, and Wayfair Professional) that span all Wayfair products and geos. We look to creative/brand/marketing teams’ style guides to inform design language choices and set styling for each theme.
Theme architecture is a set of rules and principles that define how tokens are implemented across the core library. Just like a spoken or written language, following this set of rules creates a scalable, unified, and consistent system. This set of intentional decisions make up our digital design language and give our products a distinct style.
Within this structure, tokens have intentionally assigned roles that are applied consistently across our component library. Some, like border radius, are used to support branding while others, like stroke weight, are used for accessibility.
Tokens are combined to give meaning and style to components. It’s this mix of token styling that gives themes uniqueness and gives the system the flexibility to align to a variety of branding needs.
Tokens and theme styling are a complex web of decision-making around the underlying system architecture. So when we make any UI adjustment, we have to consider the full scope and impact across the system — any update represents a broad change in the way we think about and implement theming across all our products.
Why this Approach
On the surface, tokens and themes may appear simple, however, there’s a lot of complex architecture that goes into creating a component library that elegantly supports themes across brands. This approach has a significant ROI because it allows us to scale efficiently and effectively. We have over 125 components for android, iOS, and web; if we created separate libraries for each theme we would need to maintain over 1,000 components.
Theming enables us to maintain a comprehensive, best-in-class system that scales to support all end users. It enables us to stand up a new brand very quickly. And it makes internal collaboration more efficient because everyone is designing and building with the same shared assets!
What’s Next for Homebase?
We are always evolving and improving our design system and looking for ways to build scale into our products. We recently built accessibility checks into our system to ensure that our component library meets WCAG standards. And we are now adjusting our system to utilize semantic color tokens and add better support for internationalization and more languages. The way our design system is structured enables us to efficiently make wide-sweeping changes like these across all Wayfair products while still retaining unique branding for each brand.
Neva Corbo-Hudak is currently Senior Product Design Lead, leading experience design for Homebase Libraries. Stephanie Cenatiempo is currently the Senior Product Design Lead for the reusable components and data structure team for customer experiences.
About Wayfair’s Global Experience Design Community
Global Experience Design at Wayfair is a cross-disciplinary function including product design, user research, and content strategy. We create experiences for all of our end-users, including suppliers, customers, agents, field champions, and internal employees. The Wayfair experience supports our mission to be the destination for all things home, helping everyone, anywhere create their feeling of home. Join the team reinventing how we shop for it. 🎉
