Wayfair Nexus Design System

Leading the revision of accessibility first design system, which resulted in 80% UI consistency across 20+ key operational workflows.

 
nexus design system c.png
 
 

MY ROLE

① Design System Lead

② Interaction & Visual Design

③ Project Management

④ Usability Testing 

 

TEAM

Product Manager

Product Designers

Content Strategist

Engineers 

TIMELINE

3 months

 

Background

Nexus is the Android mobile platform built for Wayfair’s scale and evolving warehousing needs.

It will replace all legacy devices that warehouse associates use to execute their daily tasks, such as receiving, picking. Our Warehousing design team was brought in to create a frictionless experience and leverage our internal Nexus Design System to improve over 20 operational workflows.

 
 
 

My dual role

I led the redesign of Nexus Design System to enhance accessibility, usability, and information hierarchy. 

Design leadership 🙌

  • Managed the internal audit of existing components using Google Spreadsheet accessed by 10+ colleagues across Product and Engineering. Prioritized design tasks with other 2 designers.

  • Mentored and trained junior designers on our systems, to help them redesign their components within our operational specifications, including components and color accessibility.

  • Gathered feedback on our component’s iterations and facilitated bi-weekly design reviews with Product Managers and Engineers to constantly improve usability and align on users needs.

  • Partnered with Android engineering to quantitatively analyze all the new components being built.

Craftsmanship 🎨

  • Redesign granular components like buttons, inputs, modals, top nav, main menu and overflow menu. 

  • Built an intuitive component library in Sketch, and renamed all the components to maximize ease of use and functionality. 

 
 
 
 

New component examples

Top Navigation

  • Increased visibility of the Top Navigation section by better highlighting important information, separating CTAs to prevent misclicks, and helping users recognize purple elements as clickable.

  • Changes: lower dividing line, a back arrow at the top left, and purple clickable elements.

  • User feedback: “I like moving the icons! I always used to accidently click the wrong one”

top navigation.png
 
 
 

Buttons

  • Improved information hierarchy by clarifying the distinction between primary and secondary buttons.

  • Changes: moved the primary CTA to the top position, new pill shape, colors are inverted on the secondary button.

  • User feedback:“Sleek!”

 
buttons.png
 
 
 

Dialogs

  • Increased readability of the dialog content while better communicating the urgency and/or importance of the message within.

  • Changes: new dialog colors.

  • User feedback: “Anything that is brighter and bolder is going to be better for us!”

 
 
 
 

Outcomes

“This will be a nice usability and productivity boost for our fulfillment centers and supply chain teams!”

  • The redesign was successfully launched at the end of May 2020. 

  • 4 designers (Boston + Berlin) leveraged the new Nexus Pattern library to 20+ different operational workflows. 

  • We were able to attain 90% UI consistency across different workflows.