Shepherd: a playful and consistent design system for Chobani
OverviewRole
Product Designer
Duration
8 weeks
Team
Rishi Mudaliar
Jennie Lin
Shuyang Lin
Anne Kuo (me)
Introduction
Embark on a journey with us as we unveil Shepherd, the fully-fledged design system crafted for Chobani. We included comprehensive documentation along with a ready-to-use Figma UI kit. Additionally, we crafted a compelling narrative around Shepherd and delivered an impactful stakeholder pitch.
Explore how Shepherd revolutionizes design processes and enhances collaboration with its consistent, playful, and flexible approach.
BackgroundChobani: Shaping the future of food
Founded in 2005, Chobani has grown to become one of the leading yogurt brands globally, known for its commitment to high-quality ingredients and delicious taste.
In the 2018 rebranding, Chobani switched to a more humanist approach introducing its own fonts, color palette, and illustration styles. The playful and hand-crafted styles successfully planted a sustainable and wholesome image in the customers’ hearts.
Why does Chobani need a design system?
Building on top of Chobani’s brand identity, a design system would make its digital platforms more consistent, efficient and accessible for customers.
A design system also benefits internal teams, giving them a clear guide to follow and reusable building blocks for efficient development.
Process01
02
03
04
Branding — tell the story of our design system
05
Create an UI inventory that includes all the UI elements
Sort, combine, and create the UI Kit
Provide guidelines and support in the documentation
Advocate the system to stakeholders
01BRANDING & PRINCIPLES
Shepherd — A name connecting Chobani’s rich history
A great design system isn't just about functionality; it's about identity. That's why we delved into Chobani's rich history, tracing its roots back to the Turkish word 'çoban,' meaning shepherd.
Inspired by this connection, we proudly introduce 'Shepherd,' our design system's fitting namesake. It embodies our commitment to guiding designers and developers with the same care and purpose as a shepherd leading their flock through the vast landscape of digital creativity.
Aligning our system with the Chobani’s principles
We made sure our design principles resonated with Chobani's culture and values. After a brainstorming session listing out important design values we all hold, and combining them with the core values of Chobani, we came up with the following design principles that would 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.
Innovative & Fun
The design system does not shy away from taking innovative and unconventional approaches to traditional design elements wherever suitable. The system’s visual design maintains a sense of joy and fun across all the elements.
Giving Back
The design system is built for everyone to use. We ensure the design system and its components are open-sourced. The system should provide a clear hierarchy and understandable instructions, facilitating easy comprehension and usage by all.
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.
02UI INVENTORY
Housekeeping time —
reducing redundancy
We reduced the numbers of elements to make sure each one of them serves a specific purpose. This is done by inspecting the entire site, screenshotting each elements, grouping them according to corresponding categories, and discussing which to keep.
For instance, there were 6 different shades of beige and 7 different button styles. After filtering and organizing, we were able to cut it down to 3 different beiges and 4 different button styles.
03UI Kit
Crafting consistent and flexible lego blocks of the website
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.
Consistency
We used a 4-point spacing system to ensure spacing consistency across components. This makes development more efficient
04DOCUMENTATION
Guiding + supporting designers and developers
Onboarding and Support
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Guidelines & Accessibility
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
05PITCHING
Presenting the business impact of a well-governed design system
Bringing design systems into an established team is no easy task. That's why we put together a convincing pitch to show top-level decision-makers why having a design system is important and how it promotes efficiency and saves cost in the long run.
NEXT STEPS
Expanding the design system to adapt to different screens
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
