Founded in 2005, Chobani has rapidly become one of the world's leading yogurt brands, celebrated for its dedication to high-quality ingredients and delicious flavors.

During its 2018 rebranding, Chobani embraced a more humanistic approach, introducing unique fonts, a new color palette, and distinctive illustration styles. These playful and hand-crafted elements successfully conveyed a sustainable and wholesome image, resonating deeply with customers.

Building on Chobani’s brand identity, a design system would enhance its digital platforms, making them more consistent, efficient, and accessible for customers.

This design system would also benefit internal teams, providing them with clear guidelines and reusable components, streamlining the development process and fostering efficiency.

Chobani’s current website was deconstructed into several categories according to the Atomic Design methodology.

- Despite having a strong branding guide, Chobani struggles with inconsistency across its user interface.
- The varied use of UI components for different functions leads to a fragmented and disjointed experience on the website.

- There is a noticeable lack of standardization within the UI components, with a single component appearing in multiple variations across the website.
- This inconsistency is driven more by aesthetic appeal than functional uniformity.

We ensured our design principles aligned with Chobani's culture and values. After a brainstorming session where we listed important design values and combined them with Chobani's core values, we developed the following design principles to guide our design process:

Guided by our core principles, we began developing the design system by creating the UI kit. One challenge we faced was selecting styles that complemented Chobani's vibrant and distinctive graphic design branding. A major concern was the potential impact on the brand identity in its online ecosystem if we altered any key style elements.

To resolve this, we shifted our focus to a more practical perspective, prioritising accessibility within the digital product environment. We evaluated all colours and fonts on the current Chobani website against WCAG standards. Colours and fonts that failed to meet accessibility criteria were eliminated.

Another critical challenge is the complicated decisions about which complicated decisions due to the existing inconsistencies and lack of standardisation, which I was mainly responsible for its solution. Despite the redundancy of some UI elements, they effectively embody Chobani’s strong brand identity and align with the company’s values.

My role at this stage involved overseeing the progress, creating checklists, and rebuilding foundational elements such as icons, logos, and components including checkboxes, navigation bars, etc.

To tackle the issue of redundancy, we refined the checklist by analysing the components' usage frequency before beginning the design process. Lacking access to internal usage data, I adopted the stoplight chart method to assess usage frequency using four key metrics: component utilisation rate, frequency of access, reuse ratio, and key function (considered from a designer’s perspective).

We used a 4-point spacing system to ensure spacing consistency across components. This makes development more efficient.

Although we strive for a unified design style, we do think our components should be as versatile as possible. Therefore, we created varients to easily switch between different sizes and content.

A design system is incomplete without proper documentation. After finalizing the UI kit, we used Zeroheight to create detailed and comprehensive documentation, establishing a centralized resource for the entire Shepherd system. This documentation is fully integrated with our Shepherd UI kit on Figma, adhering to three key principles to ensure clarity and utility:

The documentation employs succinct language, offering accessible and intuitive guidelines at a glance.

It encompasses all essential aspects of the design system, including an introduction, governance, design elements, and resources.

Reflecting Chobani’s unique brand identity, the documentation channels creativity to maintain consistent branding across all elements.