Fizz Design System

PROJECT OVERVIEW

Crafting a Vibrant, Future-Proof Design System to Codify Olipop's Visual Identity

Olipop is one of the fastest growing soda brands in the U.S., with sales of its health-conscious prebiotic sodas set to double in 2024. As it grows, Olipop needs a design system that brings designers and developers together around a common visual language to ensure a consistent, accessible, and on-brand digital experience.

Figma UI Kit

Zeroheight Documentation

Role

UI Inventory, UI Component Design, Design Tokens, Design System Documentation

Team

Madhu K. and Shreedhar V.

Duration

8 Weeks

Tools

Figma, Zeroheight

CHALLENGE

How can we maintain Olipop's vibrant visual identity while streamlining and standardizing design decisions to support future growth?

Olipop's playful product branding isn't translating smoothly onto the website. With 78 color styles, 28 text styles, and 17 button styles used across pages, variety has become a liability.

In addition to the lack of consistency, we noted multiple, slight variations of the same styles and components, creating a sense of redundancy and seeming randomness to certain design choices. Color combinations, at times, veer dangerously close to inaccessible levels of contrast.

Eliminating unnecessary variations and streamlining the foundational styles could significantly reduce visual clutter and boost cohesiveness across Olipop’s digital products. With a comprehensive design system, designers and engineers can save time and creative energy for the bigger challenges rather than recreating styles and components.

OUR PROCESS

With these issues in mind, we set out to build a new design system for Olipop from scratch, following a 3-step process.

Deconstruct Olipop's current UI down to the atomic level and audit for inconsistencies and accessibility issues.

Define design principles and foundational styles and build a new UI kit with design tokens, components, and patterns.

Publish implementation guidelines for styles and components to ensure consistent and effective use.

UI INVENTORY

We took a fine-tooth comb to Olipop's website to document every unique style and component.

Focusing on the homepage, Shop All, a single flavor product page, the blog, a single blog post page, and Subscribe, we captured screenshots of all the unique components used, from buttons (atoms) to cards (molecules) to page sections (organisms). This required more than a once-over, with dozens of minute variations on colors and components to be identified.

Once we were confident we had combed every inch of these pages, we then grouped each component by functionality, including navigation, buttons, input fields, and more, compiling our UI inventory.

We also identified all the variations in color and typography and added them to our inventory, creating a comprehensive overview of Olipop's UI.

Why so many shades of cream?

Reviewing our UI inventory as a whole, we found 78 color styles (many nearly indistinguishable from each other), 28 text styles, and 17 button styles, with no rhyme or reason to their use.

We had our work cut out for us. We wanted to whittle these styles down to what was truly needed, identify opportunities for standardization, and eliminate redundancy, while integrating accessibility throughout the new design system to ensure it would work for all users.

DESIGN PRINCIPLES

With Olipop's vibrant brand in mind, we selected design principles that stayed true to who Olipop is: fun, simple, and friendly.

Olipop’s brand is all about the joy of health for everyone. We translated this clear brand identity into design principles that not only reinforce company values but also promote digital experiences that feel like a natural part of Olipop's world.

Fun

Surprise and delight users with intentional use of vibrant color and cheerful voice and tone to make interactions joyful and memorable.

Simple

Focus on what matters most with a foundational color palette, a consistent page structure, and uncomplicated UI elements.

Friendly

Convey welcome and inclusivity toward all, encouraging users of all backgrounds and experience levels to explore and engage with ease.

These principles also led us to the name of our design system...Fizz! Referring to the sound soda makes when opened, Fizz is not only a fun word but also feels friendly and approachable. It's also not overly complicated; people don't have to think too hard about what it means.

DESIGN FOUNDATIONS

Next, we established a pared-down slate of foundational styles and semantic-level design tokens to create a unified visual language.

Creating standardized, streamlined systems for color, typography, spacing, radius, and iconography immediately resolved some of the redundancy and inconsistency with the current site. It also prepared our team to create consistent, unified components that spoke the same language.

Our new color system reduced the number of colors by more than half while accounting for needed product colors.

We removed very similar colors, focusing on those used most often and eliminating the outliers, to devise a simpler color system that preempts color confusion and chaos.

We addressed Olipop's seemingly arbitrary use of fonts and sizes with typography for specific use cases.

Olipop's site already specified two font families, Windsor EF and Ano Semibold, but they were used in a variety of contexts and in sizes from as small as 12px to as big as 80px. We significantly streamlined the number of font styles and delineated the use cases of Windsor EF for headings and Ano Semibold for subheadings and paragraphs only.

A spacing system based on an 8px base unit and standard layout take the guesswork out of building new pages.

We set a 12-column grid layout with 80px margins and 16px gutters, based on our spacing system with an 8px base unit.

We also set a radius scheme from sharpest to softest corners, maxing out at 32px for buttons.

DESIGN TOKENS

As we formulated these foundational styles, we operationalized them as semantic tokens that both designers and developers could use.

To lay the foundation for the next stage, creating new components, we set up our tokens in Figma as local styles and variables. We first created primitive tokens to store our raw values for spacing, color, radius, and typography. Primitives not only set a baseline for our token system now, but also allow for seamless, system-wide changes in the future.
‍
Next we leveled up to semantics, setting them to component-level specificity, so that designers and developers can quickly and easily pinpoint the token for each property of any component.

Primitives | Color / Green

Semantics | Color / Footer

BUILDING COMPONENTS

Putting our tokens into practice, we created a set of new components adaptable to different use cases and content while staying true to our design principles.

We built all of our components with multiple use cases in mind. Rather than creating multiple versions of components for different contexts, we leveraged Figma variables to nest all needed variations and states of one component together, keeping our component library simple and organized by functionality. Designers can toggle properties on and off to adjust components according to their needs while maintaining the integrity of the component design.

We started with smaller, atomic components like buttons, which are prominent throughout the website, accounting for states, sizes, and icons.

We combined these smaller components to create molecular components like cards all the way up to more complex organisms like product selection grids and product carousels.

With flexibility and responsiveness built-in to each component, no matter how small, designers can simply drag and drop from our component library to build pages in a matter of minutes, as in the homepage below:

DOCUMENTATION SITE

Designers need more than a UI kit — they need the guidance and resources to use it as intended.

Our documentation site includes a link to our component library in Figma with our design tokens, but equally as or perhaps more important is all the other information showing how to use Fizz's foundations and components and why. We used Zeroheight to build the singular resource for using Fizz, including our design principles, foundational styles, components, patterns, guidance for getting started, contribution guidelines, and additional resources.

Since design systems aren't necessarily for the ones who create it, we wanted our documentation site to meet the needs of both designers and developers. We included resources for learning and support and ways to collect input from those using the design system to ensure buy-in and continual improvement.

Each component has a dedicated page with more specific, detailed guidance on the purpose of each component, the variants available, usage, and accessibility considerations. Helpfully, Zeroheight allows annotations on components, which aided us in pointing out properties of note in each component.

We also took advantage of Zeroheight's "dos and don'ts" feature to demonstrate how to properly use each component. This helped put our design best practices into visual format rather than overwhelming users with text.

Focusing on getting our design tokens right made building components and patterns easy and simple.

Form the beginning of the process of building our own design system, we prioritized design tokens. Once we had decided on our primitive values, we focused on setting up our semantic tokens properly, since using Figma's local styles and variables was a first for us. It was a learning curve we were proud to summit! Once we moved onto the component building stage of this process, we didn't have to think about what color or spacing to use. It was already done.

I also strengthened my skills with some of Figma's more advanced features, particularly auto-layout, variables, properties, and variants. I feel confident that I know my way around these features, and already found myself using them adeptly in other courses and on other projects.

Pop, Click, Fizz