With the massive growth of brew-at-home coffee, Starbucks re-designed its website to improve the experience and align with its brand. To help scale designs at speed, we created a new design system to ensure consistency across the entire site. We first identified how current designs were being built, who our users of the design system were, and the future roadmap. This initial groundwork was crucial as it allowed the design system to be more universally usable, scalable, and manageable. From it, we could turn the scattered designs into a sanitized and centralized manner. We first created responsive components to be used across all screen sizes and devices. We accomplished this in two steps. First, our components were to be responsive within themselves to house diverse permutations of content. This was done through Figma AutoLayout and pinning. Second, each component itself needed to scale to a screen size. Through the employment of Figma variants & properties, users can select the appropriate screen size.
‍
Afterward, we created a basic information architecture. This improved findability and significantly improves usability. of the design system. Simple universal naming conventions helped with searchability, while proper categorization helped with browsability. Furthermore, frequently used elements such as buttons are separated from traditional atomic structure to allow easier access for designers.We then stress-tested and adapted the design system with the launch of Starbucks products in Arabic and Hebrew markets. I led the implementation of right-to-left language support. This includes font selection and implementation, mirrored interactions, and reworked components.By creating a design system, future designers can intuitively create new designs at scale and consistently.