Wayfair Enterprise Design System
Overview
-
In order to create a consistent visual and interactive experience for Wayfair's enterprise users (suppliers, agents, and corporate employees), I helped to standardize and evolve the components, patterns, and guidelines in the enterprise design system
-
Reusable design and code assets were built to scale across 180+ design applications and the product teams that develop them, requiring our team to think holistically and weigh multiple use cases
-
Created support systems and onboarding training to help teams across Wayfair adopt the design system
Skills
User Research, Brand Research, Competitive Analysis, User Flows, Information Architecture, Sketching, Prototyping, User Testing, Wireframing, Visual Design, Persuasion, Presenting
Time Frame
Creation of components and guidelines in a sprint format (January 2019 - December 2020)
Role
Product Designer collaborating with a small team of designers and engineers
Outcome
-
Established a brand new design system for 500+ Wayfair enterprise applications:
-
Sketch library of components, styles, and patterns for designers
-
Matching React code assets for engineers
-
Documentation & guidelines website for designers and engineers
-
Support and contribution model through Slack, office hours, and collaborative sessions
-
-
Our design system was adopted by all 70+ enterprise designers and enabled them to:
-
Design faster with reusable components
-
Create a consistent user experience for suppliers, agents, and corporate employees across applications/teams
-
Reuse components and patterns without having to reinvent the wheel
-
Save time and focus on solving the right problem without having to spend more time later in the process designing from scratch
-
Problem
Inconsistency across 500+ applications
As Wayfair started to grow quickly from 2013 to 2017, they had their engineers build as many applications as quickly as possible to help suppliers get products on the storefront website.
This caused an inconsistency in how these applications looked and behaved for users.
An initial design system with reusable assets (buttons, headings, text, etc.) was built with React and shared across product teams. These teams were unsure how exactly to use these assets.
Assembling the Enterprise Design System team
I transferred from working on specific enterprise products to evolving the enterprise design system. At the time, our team had 3 designers and 2 engineers, but the team grew throughout the years. Our purpose was to:
-
Create reusable and scalable components based on product team needs (design assets were created and shared in a Sketch library)
-
Support team members with questions on how to use them through office hours and onboarding trainings
-
Establish new patterns (groups of components) and guidelines to share with enterprise product teams
Design Process for Components, Patterns, and Guidelines
Identify a gap between the design system and user needs
I use the analogy that our team runs a lego-block factory, where we release new lego blocks for product teams to use in order to build their pages. The lego blocks represent the components that we build and release, like buttons, tabs, progress steppers, etc.
When a designer is designing a new page by using our lego blocks, and can't find a specific lego-block that they need, we can take their request and create a new lego block for them!
This is the process of identifying a gap in the design system. Based on the request from the designer, we'll ask:
-
Who is the user of the page you're designing?
-
What's the problem you're solving for the user?
-
What is the user's workflow in this case?
Typically, the three questions above will help us identify an existing component for the designer to use that they may be unaware of, and the problem is solved! If there isn't an existing component, we ask another set of questions:
-
Is this problem truly global? Do you know if other designers are solving a similar problem? Could this help suppliers, agents, and internal-corporate end-users?
If the problem only pertains to their team, we let them know that they can customize their own component, knowing they are creating something outside of the design system.
If the problem is truly global, then a gap has been identified:
-
What other use cases exist? Which product teams can we talk to in order to learn more?
-
After conducting more research and understanding the core of the problem these teams are trying to solve, do we need an entirely new component, or just a variation of an existing component?
Based on the identified gap between the design system and the product team's needs, we would prioritize that work against the other gaps we have to solve for in our backlog.
I'll use the improvement of our MenuList component as an example of identifying a gap in the design system. I managed the project while a student co-op, Sophia, was responsible for designing the component. The MenuList component in our design system is a menu dropdown that only allowed for one line of paragraph text.
-
Designers were finding use cases where users needed additional metadata, status, or images associated with the menu items to help them select an option.
-
Pictured above are the customized dropdown menus that designers created because our component didn't support these features, causing inconsistencies in the ways these menus were displayed on site.
-
This was a truly global problem and affected all users based on those use cases. A new MenuList component could allow for richer metadata.
Prioritize, research, and design
Typically, a product team who has identified a gap usually has a solution in mind, and our team would work off of that idea during our sprint:
-
Research and competitive analysis of how other design systems have solved for this problem
-
Define MVP and prioritize
-
Design brainstorming
-
Feedback from design system team, engineers, and product team
-
Design iteration
-
Feedback from end-users
After conducting research and competitive analysis for the menu problem, and reviewing with our existing use cases, we defined the MVP user stories to address for the new MenuList component:
-
Suppliers and enterprise users need to select a list item, so that they can make an input for a dropdown or menu
-
Users need more information beyond a single line of text, so that they can make a more informed decision (secondary text, image, icon, badge)
-
Users need a way to select multiple items at once, so they can make multiple inputs for a dropdown or menu
-
Users need information in the dropdown menu separated into groups, so that they can see categories of options
-
Users need a way to drill down into nested menu items, so they can make more specific choices
Sophia created a basic wireframe for how all of these features could fit together to solve the user problem. Each of these features could be toggled on and off as designers use the component. This would be the foundation of this "lego block!"
Sophia mocked a few concepts of the new MenuList component based on our MVP definitions and the research we did. We were ready to start drafting usage guidelines before reviewing with design and engineering.
Writing usage guidelines
Usage guidelines help product teams to learn the purpose of the component and how to use it. It's like an instruction manual that comes with a lego set: what the component is and how it fits with other components.
Usage guidelines may differ from component to component. For the MenuList component, we defined and reviewed with our content strategists:
-
Purpose
-
Common use cases
-
Anatomy
-
States
-
Do's and Don'ts
Feedback and improvement
Continuing with the design process, Sophia and I met with the design team to get any feedback:
-
The user stories are met by the component and elements, but the visuals could be improved
-
Checkbox seems disconnected from the list item
-
Hover color is visually intense
We met with the engineering team to understand the technical feasibility of the component:
-
The image thumbnail for the menu item will have to be custom built by Homebase (with border, checkbox, badge, radius)
-
Making the checkbox white on hover (because the existing checkbox has a tint on hover) will be difficult
-
Closing the padding between the primary text and secondary text may be a challenge, so we will explore what it looks like when padding is zero
Based on feedback from the teams, Sophia and I discussed the changes we needed to make, and created a new base structure for the MenuList:
-
Moved the checkbox to the left side of the list item
-
Toned down the intensity of the hover state
-
Rounded the corners of the menu for a softer look
-
Based on feedback from product teams, we added a "Select all" option for the top of the MenuList
Sophia created the final designs and reviewed with engineering.
Ideally, a component is tested with users in-context while they're completing tasks. We don't always have the chance to test components, but will often work with product teams to see if we can get a component in some user tests.
Documentation, release, and maintenance
The main benefit of this component is that based on problems a product team is designing for, they can toggle on and off whichever features of the MenuList they need.
A typical documentation and release process looks like this:
-
Our engineers build the component based on mocks
-
Usage guidelines are published on our design system website
-
Teams are emailed in a regular newsletter that there is a new component, and are given the option to test that component early if needed
The component goes into "maintenance" mode where we use our support systems to improve it as we learn more from product teams!
Support Systems
Onboarding training sessions
When designers, engineers, and product managers join Wayfair, we educate them on:
-
What is a design system?
-
Why do we use a design system?
-
How do we use the Wayfair Homebase design system?
A design system is a balance between consistency vs. flexibility. We'll often get questions on the drawbacks of a design system, which I will answer that teams may not get to style components as much as they'd like, but it ensures a consistent experience for our customers, suppliers, agents, and corporate end-users.
As a former teacher, I loved helping teams get started with new tools like Sketch and Abstract. I created an Abstract 101 training session that introduced the tool and a new process for reviewing designs to our enterprise team (70 designers).
Office hours and Slack support channel
Our design team hosts weekly office hours and a slack support channel:
-
Help teams identify which components solve their problems
-
Identify new gaps in the system
-
Improve existing components
-
Squash bugs
Contribution process
Since our design system team was supporting 70+ designers by September 2019, we created and shared a process for anyone to contribute to the system. They could follow the same steps that our team does, and check in with our team at certain points to make sure they were on track.
Wayfair's Catalog product design team contributed a variation of our Drawer component to the system by following this process.
Additional Component Work
Data Point Component
I noticed across several products that there was no consistent layout for dashboards or cards displaying statistical data. These are a few examples showing that gap. I created a Data Point Card component based on these needs.
Progress Stepper Component
I collaborated with two different product teams to update our progress stepper component visuals to include icons, status, and mid-step alerts.
Table Component
I established a consistent set of features and layers for our table component. The table component is the most complex component because teams have a wide variety of needs that range from allowing users to view basic data all the way to editing cell data.
Image Thumbnail Component
The way images were displayed across our enterprise applications were wildly inconsistent, so I worked with an engineer on our design system team to come up with one component that could host all of the information teams were hoping to overlay on an image.
Next Steps
The Enterprise Design System components, patterns, and guidelines continued to evolve until the end of 2020, when the system went into maintenance mode. Our team started combining our Storefront Design System with our Enterprise Design System in 2021.
See my Wayfair Partner Home Design Vision project to see what we did!