Shepherd
Timeline
Apr. 2024- Jun. 2024
Roles
UX Designer
Team
Shiyang Wang, Rishai Ludaliar
Deliverables
Overview
About the project
Join us on an exciting journey as we introduce Shepherd, the complete design system created for Chobani. We've put together thorough documentation. Plus, we've built a captivating story around Shepherd and delivered a powerful pitch to stakeholders.
Discover how Shepherd transforms design workflows and boosts teamwork with its consistent, playful, and adaptable approach.
Discover how Shepherd transforms design workflows and boosts teamwork with its consistent, playful, and adaptable approach.
Background
Chobani: Shaping the future of food
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.
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.
Design Process
Why does Chobani need a design system?
Findings
01
Brand Identity
Building on Chobani’s brand identity, a design system would enhance its digital platforms, making them more consistent, efficient, and accessible for customers.
02
Guidelines And Resuable
This design system would also benefit internal teams, providing them with clear guidelines and reusable components, streamlining the development process and fostering efficiency.
Research
What’s impeding Chobani’s digital transformation: inconsistency, nonuniformity and inaccessibility
Chobani’s current website was deconstructed into several categories according to the Atomic Design methodology.
Findings
01
Inconsistency Despite Strong Branding
- 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.
- The varied use of UI components for different functions leads to a fragmented and disjointed experience on the website.
02
Redundancy & Lack of Standardization
- 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.
- This inconsistency is driven more by aesthetic appeal than functional uniformity.
“Shepherd”
At this stage, the design system was named Shepherd.
The name is derived from the Turkish word “çoban,” meaning shepherd, as a nod to the founder Hamdi Ulukaya's Turkish heritage.
Shepherd is designed to guide users in creating more accessible and sustainable digital products for everyone.
Principle
Aligning our system with the Chobani’s principles
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:
Shepherd’s Design Principles
Putting People First
The system ensures all content and interactions are intuitive and universally accessible, embracing inclusivity and clarity at every touchpoint in the design system.
Innovation & Fun
The design system embraces innovative approaches to traditional elements, ensuring a joyful and fun visual design throughout.
Giving Back
The design system is open-sourced and built for universal use, featuring a clear hierarchy and straightforward instructions for easy understanding and accessibility.
Sustainability
Similar to real life sustainability practices, the system allows users to create interfaces with a minimal amount of unique elements. No elements are wasted or redundant.
Addressing Critical Issues through Accessibility Evaluation and Element Usage Assessment
UI Inventory
Determining style choices according to accessibility needs
Image:Various colours in inventory
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.
Image:Finalised colours in UI kit
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.
Making Trade-offs Based on Component Usage Frequency
Image: multiple button styles in inventory
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.
Image: multiple button styles in inventory
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).
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).
Following this evaluation, we organized the UI inventory into three sections and 24 categories, each with additional subcategories, to streamline our design system more effectively.
UI Kit
Consistency
We used a 4-point spacing system to ensure spacing consistency across components. This makes development more efficient.
Flexibility
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.
Documentation
Documenting Shepherd for Application
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:
Concise
The documentation employs succinct language, offering accessible and intuitive guidelines at a glance.
Comprehensive
It encompasses all essential aspects of the design system, including an introduction, governance, design elements, and resources.
Creative
Reflecting Chobani’s unique brand identity, the documentation channels creativity to maintain consistent branding across all elements.
To see more about the documentation, click here: Shepherd Design System
Takeaway
1. On System: Enhancing Flexibility in Shepherd Design System for Practical Use
The Shepherd design system has received positive feedback for being well-organized, comprehensive, and user-friendly. This has led to improved overall consistency on the site.
However, one critical piece of feedback highlighted a "lack of control over pre-defined components." Many of the patterns we provided were designed to function independently, which could limit designers' creative flexibility. Moving forward, I plan to closely examine how designers use these patterns in real-world applications and adjust the system to offer greater flexibility and enhanced accessibility.
However, one critical piece of feedback highlighted a "lack of control over pre-defined components." Many of the patterns we provided were designed to function independently, which could limit designers' creative flexibility. Moving forward, I plan to closely examine how designers use these patterns in real-world applications and adjust the system to offer greater flexibility and enhanced accessibility.
2. On Chobani: Aligning Chobani's Business Values with the Shepherd Design System
Developing the Shepherd design system gave us a fresh perspective on integrating business values into our design strategies for a class project. We were inspired by how well the system aligns with Chobani's actual business plans and its potential to offer benefits both internally and externally.
Take card components as an example,Shepherd can improve the project efficiency by 65+% using cards (hypothetically).
Moving forward, I aim to validate these findings with actual data from the company, turning this initiative into a concrete project that demonstrates real-world impact.
Take card components as an example,Shepherd can improve the project efficiency by 65+% using cards (hypothetically).
Moving forward, I aim to validate these findings with actual data from the company, turning this initiative into a concrete project that demonstrates real-world impact.
3. On Teamwork: Collaborating with Cross-Functional Teams in Design System Development
Recognizing the importance of a robust design system, we understand that involving stakeholders is crucial to ensure the system's practical application and value. I am eager to delve into design tokens and learn how to deliver value to developers and, ultimately, the product.
Within our own team, I prefer to work in a specific role rather than splitting tasks evenly. I am keen on collaborating with cross-functional teams—including developers, content writers, and managers—to fully develop and refine the design system for effective real-world use.
Within our own team, I prefer to work in a specific role rather than splitting tasks evenly. I am keen on collaborating with cross-functional teams—including developers, content writers, and managers—to fully develop and refine the design system for effective real-world use.