Project Aurora:
Amway Design System
Building a solid and scalable design system is a massive endeavor. The goal was to create a scalable design system that encourages maximum usability and clarity for all Amway brands. Create components to give designers and developers enough creative freedom to create a unique user experience while remaining aligned and consistent with the brand.
We started with the foundational elements that will serve as building blocks to create engaging end-to-end user experience. This includes typography, iconography, layout, and structure.
Amway Brand and Design Standards is built to help create beautiful and consistent experiences across all platforms – encourages maximum usability and clarity.
Agency: Publicis Groupe - Digitas North America
My role: Lead Experience Designer
Team: Commerce/Shopping Experience, Design System
The Grid / Type / Color
We used a Fluid Grid System where the size of the columns is variable –allowing the contents to be flexible and fully utilize the browser sizes on any breakpoints.
After the grid system is finalized, the next task is to define and build the type system for desktop, tablet, and mobile. I started exploring the different type scale and created several example use cases, taking into consideration the different languages such as French and Spanish.
The goal is to establish a clear visual hierarchy and maximize legibility.
After a few rounds, the team approved the proposed 1.15 type scale. We also added parameters and guidelines to ensure the line length and the vertical line spacing are optimal for reading. While there is no right way to measure the perfect width for text, a good goal is to aim for between 60 and 100 characters per line, including spacing. Setting an optimal line length will break up content into easily digestible information.
The Type Matrix is completed after a couple of reviews. Next up – creating the other Foundational elements.
The Atoms / Molecules / Organisms
We audited the the current experience and defined a list of elements that will serve as the building blocks of all things UI
Buttons / Navigation / Fields /Tables / Charts / Lists / Cards / Icons
We added over thirty elements and design patterns, and each has its requirement and acceptance criteria or is a part of a larger epic.
Design Patterns / Templates
Homepage Promo / Product Detail Merchandising / Product Cards
Product Attributes / Form Fields / Lifestyle Gallery
Testimonial / Collection Cards / Product Showcase
Over a thousand artboards created. Countless design explorations.
A year after we started building the system, we continued to add and update elements and components.
More 1,000 Artboards / 200+ Users Stories / 12 Amazing People / 3 Teams