Contributing Roles
Product Designer, Art Director
Date
Dec 2016 - Present
Other Contributors
Jenni Won, Sarah Atkinson, Yinka Aaromi
TL;DR
As a part of Wayfair's overall design clean up, my team developed a design system to be used cross functionally within Storefront. I largely contributed by creating and maintaining the Pattern Library .sketch file whilst working cross functionally with both designers and developers to create new components. Because of my first hand knowledge of the design system, I was brought into various moments in the design process to consult on best practices. Below you will find UI components I have directly contributed to the overall library.
UI Icons
Icons were created in Adobe Illustrator on a 32x32 grid. They were made to visually look and feel 16x16 px in size. All icons have been either created or redrawn by me.
8-Point Grid System
For visual and code consistency, we implemented an 8-point (8px) grid system. Using numbers in multiples of 4's and 8's allowed designers to have a clear guideline for spacing and sizing, thus designing more quickly and efficiently.
Atomic Design & Components
Using the principle of atomic design, we designed our elements with reusability in mind. For example, we have a component called a board card, which consistent of 3 main parts: image card, SKU product cards, and information card. Below, you can see the different combinations of components.
Sketch Overrides
Utilizing hacks and plugins, we were able to make the toolkit a powerful system so that designers may save time when swapping out assests and states.