Brewing a new design system

Starbucks at Home is the set of retail products where customers can enjoy and discover Starbucks coffee in the comfort of their own kitchen. With the massive growth of brew at home coffee, Starbucks re-designed the website to improve the experience and better align with the brand. However, the designs needed to scale for all 36 markets and future design implementations. As the creative lead, I took the initial designs and components and created a design system adopting an atomic design theory.

Results:

A re-structured atomic design system of 50+ core site elements, application to 22 key journeys, and an organized design file ready for production.

THINKING ABOUT THE USERS

A lot of design systems fail due to them being too complicated. By incorporating a little UX, I identified the core use cases and ensured that the various end-users of the system were always in mind. This not only made the design system more universally usable but also more scalable and manageable.

Initial Audit

It was crucial to identify how the designs were currently built and the theory behind them.  Not only did this minimized the transition period, but it also helped make the system more customized to the project. Through consolidating the designs and a deep-dive audit, I identified the key elements and began creating a basic structure.

A GOOD DESIGN SYSTEM IS ONE WHERE EVEN A DESIGNER WITH NO EXPERIENCE CAN UNDERSTAND AND USE.

RESPONSIVE DESIGNS

There are two parts of creating responsive designs within a design system - building elements to be responsive themselves and building the element for key screen sizes. For each individual element, through auto-layout and pinning, I was able to adjust each element’s size. Through the employment of Figma variants & properties, users can select the appropriate screen size.

INFORMATION ARCHITECTURE

Findability of elements is just as important as the elements themselves. For the users looking for a specific element, search is primarily employed. To help them, I named each elements as simple and universal as possible. As for users that browse, I ensured that each element was properly categorized.

REsults

With this new design system, we were able to turn the scattered designs into a sanitized and centralized manner. By improving both the elements and their organization, it allowed future designers to intuitively use the system. Ultimately, this helped all future design to be scalable and consistent.

BREAKING ATOMIC

Atomic design philosophy is an amazing methodology but should be flexible in practical application. For example, frequently used elements such as buttons & CTA’s are separated out from atoms allowing easier access for designers and ultimately, a more usable design system.

Other
Projects:

Deliveroo Restaurant Homepage

American Express Keyword Visualizer