First step: Laying a Solid Foundation
The new design system I built for Yotpo is based on Brad Frost's Atomic Design Theory. After extensive mapping, I redefined the foundational elements:
Grid & layout: I established a clear and flexible grid system with well-defined rules, allowing for both structure and design freedom. The grid system maintains a consistent layout and responsive sizing.
Color: I unified the color palette by narrowing and expanding it.
The new color tokens help maintain consistent use of color throughout the design system.
Typography: I defined a new set of solid text styles and created clear guidelines for their usage in different contexts. Same as the color tokens, the typography tokens are used to maintain a consistent set of font styles throughout the design system.
Iconography: Based on the Remixicon library, a new icon library was created to unify the appearance of all icons across Yotpo's products.
By defining a primitive tokens, I laid a solid foundation for creating the atomic components that would be the basis for the entire design system.
Yotpo, Email & SMS multi-message
App UX/UI. Prototyping. Usability Testing
