Wayfair.com: Spotlight on Pattern Libraries
Let’s shine some light on the power of Pattern Libraries. Organizational design to optimize creative output efficiencies is extremely important to me as a design leader. One way to achieve this within any design team is by creating Pattern Libraries or Design System Management (DSM). These Pattern Libraries essentially follow fundamental atomic design principles.
At Wayfair we managed to execute an extensive Pattern Library for both UX & UI designers in three days. The finished product enabled product designers to pull elements they needed quickly into their mocks by using existing cards. However, when the need for a new card function was needed we discussed as a team whether it was worth making the new card function or try to fit it within an existing card to minimize engineering work.
Patterns
We started by examining all the different user flows and funnel progression of the online consumer to identify all the necessary cards. Once we identified the cards, we built out card elements with minimum design fidelity. When the UX Pattern Library was complete we were able to quickly build out the UI Pattern Library shown below (UX Lead: Jesse Kaddy, UI Lead: Jenni Won).
Pattern Libraries In Use
UX Mocks
I’ve used Wayfair Registry mocks to show how the Pattern Library can be put to use. It is crucial for UX mocks to be in low design fidelity so product management teams can focus on function without getting distracted by design elements.
UI Mocks
Following the Wayfair Registry UX wireframes are the UI build outs in high fidelity. This is where we focus on pixel perfection in testing sites. A great thing about corresponding UX && UI Libraries is that we could ship the UX wireframes straight to engineering or the front end team without having to build out UI mocks — a huge time saver that minimizes turn-around time.