Design Systems: My Process for Creating & Sharing Patterns
Overview
-
With 27 designers adopting a new design system for the redesign of our supplier platform, the organization needed a process for creating and sharing consistent design patterns (groups of components)
-
Working with Therese Bartolini, our design director, I created a process for teams to come up with new patterns and propose them to be shared with the rest of the organization
-
The process was implemented, tested, and improved based on working with a small team to design a new pattern for displaying status alerts throughout our supplier platform applications
Skills
Process Design, Process Modeling, Systems Thinking, Persuasion, Project Management, Competitive Analysis, User Testing, Wireframing, Visual Design, Persuasion, Presenting
Time Frame
3 months to create, test, and share process (February 2021 - April 2021)
Role
Product Design Manager; created the process with Therese Bartolini and led a small team to test the process with a specific pattern in order to improve it
Outcome
-
I successfully implemented the new design system pattern process with several teams composing of 27 designers total
-
Within one month of creating the new pattern process, 11 new component patterns were designed and shared, with 6 more patterns identified for creation
-
As a result, both the business and end-user benefitted, because this was an efficient way for us to create consistent experiences for suppliers across all Wayfair enterprise applications
Problem
We have a new design system... but how do we share common patterns?
Based on the Wayfair Partner Home Design Vision, 27 designers were ready to use our new design system to redesign our supplier platform.
For the first time, product design teams were starting to come together to design one platform, rather than separate applications.
There was no process for how 27 designers could share common design patterns (compositions of components from the library) with each other in a reusable format.
How do we display status in a consistent way across the platform?
Suppliers need to be informed on the status of a product (ie. adding a new product to their catalog), or a process (ie. shipping), so that they can prioritize their actions and make informed decisions.
This problem seemed like a great way to test the new pattern process, so I'll use it as an example to walk through the steps of co-creation.
Design System Patterns: Process for Creation & Sharing
Enabling cross-functional team members to identify and share new patterns
A pattern is a composition of existing design system components, which could be shared across design teams.
The process encouraged designers to share their work, and if they had similar compositions of components (ie. filters above a table, or a similar way of displaying status), they could share that with the design system team (Homebase) and the Partner Home platform team (Front-End Enablement) to become a pattern.
Sharing it with Homebase and Front-End Enablement ensured that a similar pattern didn't already exist. There was the possibility that other design teams across the organization (Storefront and Admin teams) could benefit from the pattern, in which the co-creation team would need to loop them in.
Assembling the right people to design and propose a new pattern
Since patterns could apply to multiple workflows and experiences, it's easy to allow the scope to get too large. This was our learnings from our Status Indication proposal that I'll point out later: too many people involved can slow down the process.
I created a table for the "Assemble" category that helped people to choose who to involve in co-creation so that the scope is narrow enough for the team to deliver a design quickly.
The assembled team could then work on a solution, test it with users, and propose it to become a pattern.
Testing the New Process with Status Indicators
Step 1: Identify
Status indicators help suppliers determine what actions they need to take.
For example, when a product is shipping, a supplier needs to understand what part of the process it's in, if there are any problems, and if they need to fix those problems.
We gathered several screenshots in Miro to show how inconsistent statuses were displayed across the supplier experience:
-
Inconsistent visuals (notice "Opportunities" appears in a yellow badge in one screenshot, but appears as a green link with a checkmark in another screenshot)
-
Inconsistent language (notice "Needs Attention," "Warning," and "Violations" all are communicating an urgent-level status but not using the same language)
I identified this problem with Pablo Franco, a design manager, and we knew we had the opportunity to display statuses more consistently throughout the experience.
Step 2: Share
Pablo and I shared this problem and its use cases from the Miro board with Therese, our design director, along with other Partner Home design leads to start this co-creation.
We learned later on that it wasn't scalable to share the problem with a random selection of leads, so I updated the process to sharing work with the Homebase design system team (to catch if patterns could scale beyond supplier experiences) and the Front-End Enablement team (a new team created to review, document, and maintain patterns after they're proposed).
Step 3: Assemble
After getting the green light to start co-creation, Pablo and I assembled a cross-functional team:
-
4 designers (Will Li, Maryna Popovichenko, Runming Dai, Heru Rubin)
-
2 content strategists (Kristen Bonstein and Sara Heilbronner)
-
1 engineer (Justin Mak)
We later learned that involving so many designers (and bringing in more each week) caused us to slow down more than we wanted to. It's a tight balance between delivering on 80% of use cases and making sure that a pattern is fully scalable across 100% of supplier patterns. I created a table to help teams decide who needs to be involved.
Step 4: Design
To start, I asked Will and Maryna to explore other design systems to see how they handle status and to make sure we didn't miss any use cases.
Kristen, our content strategist, started drafting definitions for status and notifications so that everyone was on the same page, along with a list of consolidated statuses.
We pulled in more designers from other areas on the team to brainstorm a new component that was flexible enough to display status across the experience.
The assumption we heard from other Partner Home designers was that we needed to tone down the status visuals because there were so many on each page (this turned out to be an incorrect assumption based on supplier testing.)
We reviewed our idea for a new status indicator component with Homebase, and received feedback that it was very similar to our existing Badge component. Runming and I conducted 7 user tests with suppliers to understand which status indicator helped them most.
-
Imagine that you uploaded images to be associated with a product on site. What do you see on this page?
-
What actions would you take on this page?
-
Anything else?
The results were:
-
Toned-down visuals (0 out of 7 suppliers chose this one)
-
Badges with no icon (3 out of 7 suppliers chose this one because it popped and was much easier to recognize)
-
Badges with an icon (3 out of 7 suppliers chose this one because the icons can help those who speak English as a second language)
Suppliers also mentioned that they expected to get more information when hovering on the badge. Kristen updated her status labels list and I updated the designs to feature an icon within a badge.
Step 5: Propose
Kristen and I submitted proposals to the Homebase design system team:
-
Add icons to badges to improve accessibility for those who speak English as a second language or have color blindness
-
Allow a popover to appear when interacting with a badge
-
Introduce a new list of global status labels to choose from
I also worked with a designer, Hannah, to help test the icons outside of context, and we found that the outlined icons were much more understandable than the original shapes we proposed.
Product design teams could now use a single component for displaying statuses across cards, tables, drawers, and pages in their experiences while using the same language.
Making these changes across the experience (over time) will help reduce the amount of time it takes for suppliers to recognize and interpret a status label in Partner Home.
Retrospective of Status Indicators Pattern Creation
What went well and what needed improvement
I asked the team members involved in creating Status Indicators to join me for a retrospective and let me know what went well with co-creation and what needed improvement:
-
Team collaboration and communication among cross-functional team members was the greatest part of co-creation
-
Frequent design critiques helped us get everyone's ideas while moving us forward
-
The question around when it's best to pull in other team members, along with how broad the scope should get, was the main topic for needing improvement
-
As we pulled in more team members, some felt lost and didn't have the context to fully contribute
Action items
While reviewing the "improvement" sticky notes, I created a section for action items:
-
Assign a Direct Responsible Individual (Pablo mentioned that the process would have been faster if I was able to make more decisions without his input)
-
Create a list of who needs to be involved in each co-creation (I created the "Roles" table above and added it to our internal documentation)
-
Establish a formal kick-off and set expectations for new members joining (added a kick-off step to the process)
Communication and Implementation of New Process
I sent a revised process document that dubbed this process "Co-Creation"to Partner Home leads for alignment and any final tweaks.
Afterwards, I communicated the process through Slack and email to our designers, and talked about the process in our Show & Tell. I also worked with Raquel, a Homebase designer, to build it into our regular training sessions for new hires working on Partner Home experiences.
Next Steps
16 more co-creation efforts were created and aligned to this process, so that product designers know who to talk to, when to share work with stakeholders, and how patterns turn from ideas to reality!
Next steps include sharing this co-creation process beyond Partner Home designers, so that all designers at Wayfair have a framework for identifying, sharing, and creating design patterns. Check out the Wayfair Partner Home Design Vision project for more context.
