Wayfair Partner Home Design Vision
Overview
-
Our goal was to evolve our supplier platform from a set of complex and disconnected tools to a unified experience
-
To accomplish this, we needed to set a vision and obtain buy-in through several workshops and contributions from 266 team members who design for the supplier platform
-
The vision focused on simplifying the platform's information architecture, create new common page layouts, and establish consistent design fundamentals (color, type, space, shape)
-
I managed the sprints for our team of designers and facilitated workshops, while Therese Bartolini owned, supported, and scoped the project for our team
Skills
User Research, Brand Research, Competitive Analysis, User Flows, Information Architecture, Prototyping, Wireframing, Visual Design, Persuasion, Presenting, Workshop Facilitation, Project Management
Time Frame
8 weeks to run 12 workshops and define the new vision (August 2020 - October 2020)
Role
Product Design Manager planning and leading 1-week sprints, along with facilitating the Information Architecture and Design Fundamental spaces (definitions, workshops, final design work) on a team of 6 designers, 1 researcher, and 1 content strategist
Outcome
-
I managed the design vision team through 8 sprints to create an initial vision and facilitate 12 collaborative workshops with the design org to finalize the vision
-
By facilitating 12 collaborative workshops, we involved all 266 design team members on establishing the new vision:
- Help suppliers find applications easier with a new navigation interface
-
Inform suppliers on the actions they need to take to grow their business
-
Create a consistent experience across all applications with recognizable page layouts and consistent design fundamentals (page layout, color, type, space, and shape)
-
We updated our design system to reflect the new vision
-
I set up guidelines for designers to implement the vision, use the new design system, and redesign their applications
-
Suppliers had a better experience managing their inventory and sales with Wayfair compared to other competitors (based on testing of the new platform)
Problem
Wayfair-focused, not supplier-focused
Wayfair's partner platform (Partner Home) is used by suppliers to manage their catalog of furniture, shipments, and sales information all in one place.
The problem is that because Wayfair grew so quickly from 2013 to 2020, a vast array of applications were created all in silos to serve the supplier's needs. This resulted in a set of complex and disconnected applications rather than one platform.
While an enterprise design system helped the applications look similar, they didn't feel similar or exist as a truly unified platform. Our team of 9 decided to focus on three specific areas to improve Partner Home:
-
Information Architecture
-
Layout Frameworks
-
Design Fundamentals
Planning and Leading Sprints
I led our team in 1-week sprints by having everyone add tickets to a confluence backlog. We would review the tickets at the beginning of each sprint and determine which ones to pull in based on the estimates we gave them (1pt = 1 day's worth of work). Throughout the week, I would remind team members to comment updates on their tickets to hold them accountable for their work.
By the end of the 8 weeks, we had successfully created a vision for the supplier platform!
Defining Heuristics
Supplier-Focused
Our Partner Home supplier platform had been engineered in the way that Wayfair wanted to work with suppliers. This means that:
-
Suppliers completed tasks and filled out forms in the way that worked for Wayfair, not their ideal workflows (ie. uploading media to several different applications rather than one)
-
Suppliers sometimes didn't understand Wayfair terminology (ie. "Lead time")
-
Suppliers also saw applications that didn't pertain to them (ie. an application that allows people at Wayfair to QA supplier-submitted imagery)
To fix this, we focused on making the platform supplier-focused, meaning:
-
Workflows would be designed to fit supplier needs and the way they work
-
Language and terminology used on site would be updated to reflect what suppliers understand
-
Suppliers would be empowered to work quickly and efficiently
Intuitive
Since there were so many applications for suppliers to work through, we heard through research that the platform was confusing to use:
-
Suppliers had no way to search for specific applications or workflows
-
Layouts were often different from application to application, which made it difficult to complete similar tasks and workflows
-
Suppliers had no sense of where they were on the platform because the applications did not work together
To fix this, we focused on making the platform intuitive, meaning:
-
Suppliers would be able to find the data and tasks they need to complete
-
Layouts and patterns would be repeatable, meaning that working in one area could feel the same as working in another area
-
A new information architecture and navigation would be worked on so that suppliers could have a clearer sense of place
Trustworthy
The applications were so disjointed that data, behavior patterns, and visuals did not match from one workflow to the next:
-
Suppliers had to learn new ways of interacting with applications every time they entered a new one because they weren't similar
-
Accessibility was not an initial focus when building out the applications, meaning color contrast, language, and other fundamentals were inaccessible to some suppliers
-
Our Help Center was tough to search through and was not always up to date
To fix this, we focused on making the platform trustworthy, meaning:
-
Aiming to create a consistent experience no matter where the supplier is on the platform
-
Accessible for all suppliers by improving color contrast, language support, and access through screen readers
-
Create a proactively helpful Help Center, which could give the supplier support in the context of the situation they are in
Information Architecture
Complex, duplicative, and Wayfair-focused
The information architecture of Partner Home had been built at a fast pace, meaning new applications were added as they were created. This caused a few issues:
-
Confusing categorization and nesting of applications
-
Duplicative and Wayfair-focused terminology (ie. we had 3 separate applications that used the title "Order Management")
-
Navigation was based on how Wayfair expected suppliers to work, not how they actually work
Workshops to simplify the navigation
I collaborated with Alex, a designer, and Heather, a content strategist, to create and lead two workshops. Our team's main goals were to:
-
Simplify the presentation of the navigation
-
Use consistent, supplier-focused terminology
-
Orient the navigation around the supplier's workflows, goals, and tasks
To accomplish this, I ran a workshop where we had 104 designers write down as many questions as possible around this topic. Writing questions down helps keep people from solutioning right away and aligning on the problem. I worked with our content strategist, Heather, to categorize the questions and it showed everyone was aligned:
-
Simplify the navigation structure
-
Base navigation around supplier's goals, tasks, and roles
-
Use supplier terminology
-
Create a process for adding more applications to the navigation
Start Doing
Stop Doing
Next, I facilitated an activity where the designers completed a Start, Stop, Continue exercise on what we should try to do for the navigation moving forward. The consensus was:
-
Consolidate similar applications
-
Remove irrelevant applications
-
Create a less dense navigation (maximum 2 levels)
-
Test new structure with suppliers
Former Information Architecture Tree
Edited Information Architecture Tree
To get a baseline for a consolidated navigation that we could test with suppliers, I created a diagram in Miro of the existing navigation and broke designers up in groups to edit it. Heather reviewed all of the edited navigation diagrams and created 3 to test with suppliers.
To test our 3 navigation trees, Heather and I worked with our researcher Chris to have suppliers navigate a tree-jack study to understand where they would expect to go to complete tasks. This narrowed down our new navigation and information architecture.
The workshops helped obtain buy-in and allowed us to come up with a tested solution for a consolidated information architecture and a new collapsible sidebar navigation design.
Layout Frameworks
Inconsistent and complex layouts
When suppliers jumped from application to application in Partner Home, the layout of content was always different, even if those applications have similar workflow models. Raquel and Phil led a workshop with the following goals:
-
Create layouts that are responsive
-
Focus on app-oriented layouts compared to marketing website layouts
-
Consistent patterns across applications
Simplified and repeatable layout patterns
Our team aligned with Wayfair Storefront design system by going from a 4px grid to an 8px grid. In our deisgn
Layout thumbnails we had designers give feedback on
8 most common layouts after workshop
Based on the workshop, our team determined 8 common layouts that we would recommend designers to start using when redesigning for Partner Home.
Design Fundamentals
A need for a consistent visual language
Design fundamentals are how we communicate information and direct the user's attention.
I conducted a workshop on design fundamentals with Pablo, a designer, and Heather, our content strategist. I started the presentation with a map of the London transit system. The lack of consistent visuals and the overwhelming noise of the map was very similar to how Partner Home applications existed at the time.
I shared a cleaner version of the map, which helped show how consistent design fundamentals can help direct a user's attention better.
Color
Color must support complex visual hierarchy, with a meaning to orient user decisions, while addressing accessibility concerns.
Therese and I worked with the Wayfair Brand team to align on a new, darker, more professional purple for Partner Home. I also pushed for us to use the same "Universal Colors" as the Wayfair Storefront design system for neutrals, blacks, and alert colors. This made our "Universal Colors" across all customer and supplier experiences the same.
Type
Type must be readable, scalable, scannable, support multiple languages, and accessible.
We used to use Proxima Nova, but we had a chance to improve our supplier platform font. When exploring new typefaces, I chose Lato for the following reasons:
-
Supports all languages including CJK languages
-
Monospaced which makes vertical scanning easier (an advantage over our former Proxima Nova)
-
Large x-height for easy legibility
-
Implemented a type scale so that headings and captions scale appropriately based on the size of the base (paragraph) text
I also pushed for black headings so that they stood out and would be easier to spot while scanning pages.
Space
Space must contribute to organize and emphasize hierarchy between elements.
Our team aligned with Wayfair Storefront design system by going from a 4px grid to an 8px grid. In our design guidelines, Raquel and I added that white space should be taken advantage of rather than using dividers or borders to group content so that information is more easily digestible.
Shape
Shapes must direct attention, identify components, and communicate a visual tone of voice.
Our former component shapes were inconsistent
Rounded shapes are easier to digest, and with our design system, we were able to make the shapes consistent across components
I researched other design systems to learn how they were using shape styles to help direct the user's eye and make information more digestible. I found that rounder shapes were easier to digest, and we could use our design system to scale rounded corners across our components.
Iconography
Iconography must carry a similar visual weight by intentional use of fill, outlines and size.
Former icons
Updated icons
Based on additional research I did, we updated our icons from filled to outlined because they are easier for the brain to process. I also decided to use the same icons as the Wayfair Storefront design system so that our iconography across experiences stayed the same.
Final Vision
Supplier-focused, intuitive, and trustworthy
Based on the workshops we ran with 266 team members on improving the information architecture, layout frameworks, and design fundamentals, our small team achieved the buy-in we needed to create a full vision for a supplier-focused platform.
I worked with Karolina, a designer, and Raquel, a designer, to create a prototype that showed "a day in the life of a supplier":
-
Login
-
Checking catalog performance
-
Using the updated navigation
-
Responding to tickets
-
Getting help in-context
-
Updating media
-
Launching a new product
-
Editing a product
I presented the prototype to senior leadership and the designers who had participated in the workshops. The feedback was very positive, with teams asking when they could get started on redesigning their applications!
Redesigns with the new vision and design system updates
After the project in November and December, we asked a small set of designers to use the updated Partner Home design system to "reflow" their layouts by replacing former components with the new ones. This was done to identify any gaps in the new design system.
This "stress test" of the vision and the new design system was led by both me and Raquel.
Catalog View: Before (Credit: Heru Rubin)
Catalog View: After (Credit: Heru Rubin)
Asset Detail View: Before (Credit: Hannah Einarsen)
Asset Detail View: After (Credit: Hannah Einarsen)
I regularly checked in with the designers over the month and made sure any questions they had were answered through office hours and slack. We enabled the team members to make their own decisions based on the heuristics of the vision and helped them to present their redesigns to the organization.
Results
Based on the vision and the reflows, Partner Home product teams started setting up their roadmaps to redesign their applications in 2021. This would require adopting a new design system, redesigning their pages, and getting support from our design system team.
Usability testing and interviews showed that suppliers enjoyed managing their inventory and sales with Wayfair more than Amazon and other competitors.
To see how I helped establish a process for teams to create design patterns, see my Design System: My Process for Creating & Sharing Patterns.