Wayfair
Servicebase Pattern Library
Creating reusable design patterns for 20+ customer and agent workflow products
Overview
Previously, Wayfair Service Tech teams worked in silos with split responsibilities for agent-facing and customer-facing experiences. Despite similar processes for agents and customers, we had different products for each. This inconsistency led to higher costs and efforts in design and engineering maintenance.
Our teams took on a large-scale initiative to migrate all workflow products to a new platform with a single workflow base that caters to both customer and agent experiences. The platform utilizes new, reusable design patterns that can scale for larger user groups while being re-themed for each end user product.
Timeline
Design: September 2020 - February 2024
Team
5 product designers
Role and Responsibilities
Product design lead
Concept definition
Define user research plan
Oversee final design deliverables and user testing
Content design
End Users
Global Customers
Platform
Web (responsive)
Discover
Insights
Problem
Our products lacked cohesive design patterns due to a siloed working model, resulting in higher design and development efforts.
π Fractured Experiences
Our end-users have inconsistent experiences across different workflow products such as agent wizards and customer self-service. Siloed projects led to inconsistencies in our design patterns across our products, even within the same user journey spaces.
π Redundant Tech Team Efforts
Improving our existing workflows or creating new ones can be challenging because the technology we use is vertically integrated. This means that changes made in one part of the workflow can have an impact on other parts, requiring significant engineering effort to ensure everything works smoothly.
Define
Our Approach
Design Goal
Create and maintain a set of shared design patterns and templates that scale across all Post-Purchase product journeys and platforms.
π Define Our Process
In collaboration with product and engineering, we established process guidelines for creating, versioning, and maintaining our design patterns (referred to as "recipes π³") in Storybook. Airtable streamlined project management as we worked on over 35 design patterns.
πΊ Map the Existing State
We started by mapping and auditing all screens across our workflow products to identify overlapping design patterns. From there, we highlighted unique use cases and conditions that required custom design solutions.
π¨ Create Design Patterns
After identifying potential patterns, we distributed them across our team for concept exploration. We aligned on new "recipes" through regular check-ins with partners and validated them with iterative usability testing.
π©π»βπ« Share and Educate Team
Once the design documentation and pattern library were migrated to Figma, I organized a presentation and demo to onboard and empower our new teammates.
Develop
Concepts
Wireframes and Use Case Requirements
After aligning on the design concepts, we started forming a pattern library in Sketch (our primary design tool at that time). This housed our design documentation and reusable components.
Concept Validation
During the Workflow Platform migration, we tested patterns with customers and agents to identify usability issues for design improvements, using weekly critique sessions to share insights and align on iterations.
Deliver
Design Blueprint
We created design documentation for each recipe, focusing on callouts for engineering on design and interaction specifics, so that the final product would be closely aligned to design expectations:
βοΈ Atomic level breakdown
What components from our larger design system were being used, and any relevant aspects or features.
π Design structure
How the more complex design patterns should be containerized to ensure build matches design requirements.
π€³π» Interaction and expected behavior
How certain aspects of the patterns should function based on different conditions.
π Examples of various states
How the components would look across agent and wizard experiences in different states.
Deliverables
Figma Component Library
Problem
Wayfair was transitioning from Sketch to Figma as our primary design tool, which would required our Service design team to rebuild designs and pattern library.
Solution
Build a reusable Figma component library for our team to use while creating designs, utilizing booleans and auto layouts to help us create responsive variants.Accounted for the two Wayfair brand stylings that we typically use for our products by creating a component for each theme. This provided us with a more efficient UI creation process.
Design Documentation Sheets
Problem
Our updated design patterns could have a lot of complexity, like atomic components being conditionally rendered to cover multitude of use cases. This would be a lot for design and engineering to track with just a sticker sheet.
Solution
We created in-depth design documentation sheets that go beyond just calling out padding and color. These sheets break down what components from Wayfairβs Homebase design system are being used, the abstract structure of the containers, behavior expectations for interactions and scaling across various breakpoints.
Onboarding Documentation
Problem
Since the beginning of this project there have been a ton of new faces across product, design, and engineering. We knew that onboarding would be a difficult task with our current documentation, as a lot of it was now outdated.
Solution
In order to maintain and version our pattern library sustainably, I created a thorough onboarding documentation for our designers, engineers, and PMs.
This documentation covers various aspects such as standard terminologies used to describe frontend and backend components, recommended practices for creating and updating recipes, as well as links to relevant recipe documentation and our Figma toolkit.