Wayfair: Overlays and UI Regions, Oh My! How Do These Stack Up Against Other Design Systems?

This was a blog post written for the Homebase Documentation Site showcasing the process that the design system team takes when a community proposal is submitted to change a current component within the system.

Have You Ever Heard of the Drawer Component?

The drawer is a widely used overlay component across Wayfair users, from the Mini Cart on Storefront to Pricing Filters on the Pricing Home Products tab in the Partner Home experience. Homebase has received various proposals from a wide range of teams to alter the drawer component to fit their need, though oftentimes, it’s actually a different component that’s needed altogether. But how does Homebase come to that conclusion with proper justification? Below we’ll dive into a specific case study on Homebase’s drawer component and how Homebase ultimately determined not to update it based on a community proposal.

The Overlay Component Matrix Audit

An audit conducted of 17 public-facing design systems was done to examine four areas:

What types of overlay components do they support?
What are the dimensions and locations of these components?
What is the behavior and intent of these components?
Do they have something similar to Homebase’s UI Regions?

We then narrowed in specifically on drawer- and UI Region-like components to examine where our opportunity areas are.

The Results

It did not come as a surprise that most design systems do not support a drawer component with 10/17 systems not supporting a drawer. In order to understand the flexibility in sizes offered by other systems and their components like drawers (such as panels, rails, sidebars, etc.) we looked at all of the various sizes offered.

🙋🏽‍♀️ Who remembers High School Math’s Box and Whiskers Plots?

A box and whiskers plot lets you easily visualize the summary of a set of data. Since we had collected all of the dimensions of Drawer- and UI Region-like components already in our audit, all we needed to do was plot them now to see how Wayfair’s drawer compares to that of the other 17 systems that support similar components. This visualization will show us the range of sizes that are standard to support.
‍TL;DR: Between Homebase supported Drawer and UI-Regions, the sizes supported fall well within the standard sizes offered when compared to 17 other design systems.

But What if I’m More of a Visual Person?

We got you. Take a look at the case studies below, comparing Homebase’s Overlay coverage to that of Atlassian and Material Design Systems: the coverage is quite comparable.

What’s Next?

After many activities, it is concluded that between the Drawer and UI Regions, Homebase has many comparable components that other design systems have as well. An output of these exercises has made it clear though that while our Drawer component is serving most use cases, users need additional support implementing UI regions which created an opportunity to build a more flexible component, Sidebar to be created.

Creating a new component: sidebar

A sidebar is a layout component that anchors on either the left or right side of a viewport and
acts as a shell for informational, navigational, or supplementary content.

Homebase received a community proposal to update the existing drawer component to
be more flexible in sizing and anchored placement on the page.
Homebase XD completed an investigation looking at design systems that have overlay
and UI region-like components with the goal to determine if there was a larger gap with
what the current overlay components offered.
It was identified that most design systems looked at do not even offer a drawer similar to
that of Homebase Design System’s drawer. However, there were many systems that
offered a component that was most similar to Homebase’s UI Regions - which are a grid
concept, not an actual component.
Other systems had that offered more flexibility that the original proposal was specifically
asking about: anchored locations and size variations. The takeaway of these exercises
made it clear that while the Homebase drawer component is serving most use cases,
there’s an opportunity to leverage UI regions better, which are more flexible and
functional which lead to the decision to componentize UI regions into Sidebar.

Process Summary

Homebase XD started by drafting usage guidelines for sidebar and vetting the
functionality with Homebase engineering, accessibility, and community partners.
After usage guidelines were drafted, designs began in Figma to build out the variations
that would be supported.
Engineering then built the component and demos to be added to the documentation site.

Overlays and UI Regions, Oh My! How Do These Stack Up Against Other Design Systems?

A look inside the type of work the design system team conducts when receiving a community proposal which turned into developing a new component.