Making designing at Jamba Juice better, easier, and more fun
Building a Design System for Jamba Juice
︎︎︎JJ UI Kit on Figma
Team
Keyi Zhang, Alexis Li, Mary HawsResponsibilities
Creating UI Inventory, designing and documenting styles, accessibility, banners, buttons, cards, headers, tabs, radio buttons, text area, gotta help JJ, and building them on Zeroheight.Duration
6 Weeks, Oct – Dec 2023Tools
Figma, Google Suites, Zero HeightWhy does Jamba need a design system?
Jamba Juice is an American quick-service restaurant and juice bar chain that sells blended fruit and vegetable juices, smoothies and other food products. Jamba's website offers a diverse menu, featuring online ordering and nutritional info, making it easy for health-conscious individuals to enjoy Jamba's vibrant flavors on the go.
Jamba's website, while vibrant, presents challenges for users due to its colorful palette and accessibility issues. Internally, the absence of a design system has led to some problems within the team.
Let's explore a conversation between a designer and a developer within the product team to uncover these problems:
Without a design system, the team has these problems:
1. Inefficient processes that led to thankless and menial work
2. Knowledge gaps between design and development
3. Inconsistent UX across flows, products, and platforms
That’s why we decided to create a design system. We believe implementing a design system is essential to address user concerns, enhance accessibility, and boost efficiency. 2. Knowledge gaps between design and development
3. Inconsistent UX across flows, products, and platforms
Our methodology: Atomic design
Brad Frost’s Atomic design is methodology for creating our design system - The atomic units bond together to form molecules, which in turn combine into more complex organisms to ultimately create all matter in an interface. This approach allows us to create a consistent, scalable, and flexible system.
We deconstructed Jamba’s interface by documenting each component
Notable issues included the overuse of diverse button styles and colors, as well as an excessive variety of typefaces and styles.
We made two versions of inventory, in the revised one we reorganized some large categories into more exact ones that are more precise ones, enhancing clarity for next steps to create components.
UI inventory version1 & version 2
We used tokens to create foundational color styles
To start our design system, we established a set of foundational styles - Colors, Typography, and Layout.
Defining a consistent and flexible color palette for Jamba is a challenge.
To address this, we initially leveraged Jamba's four logo colors and expanded our scope to define a comprehensive color ramp with seven degrees. Then we decided to tokenized colors which allow you to separate choosing a value and using a value and simplify communication between designers and developers. We created another two layers of colors: L2 - Theme color (Primary, Secondary, Neutral, etc) and L3 - Elements color (e.g., card-primary, card-secondary, on-card). To ensure accessibility, we employed a Color contrast checker when determining the use of Elements colors. Detailed naming and usage guidelines can be found here.
In the remaining foundation, we streamlined our typography by minimizing the variety of typefaces and categorizing them into "Heading" "Subheading" "Body text" and "Label", with Jamba's original font, Filson Soft, and another handwritten font, Cutie Patootie.
To ensure uniform layout and alignment across different screen sizes, our system incorporates grids tailored for four screen sizes: Small, Medium, Large, and Extra Large. We also established specific spacing guidelines between elements.
To ensure uniform layout and alignment across different screen sizes, our system incorporates grids tailored for four screen sizes: Small, Medium, Large, and Extra Large. We also established specific spacing guidelines between elements.
Accessibility is an integral aspect of our foundational principles before delving into specific components. We strive to use design system to make room for as many people as possible - including those with disabilities that use assistive technology to access digital content. Every component is infused with accessibility considerations, such as establishing a minimum target size of 44 x 44 pixels for icons and incorporating focus states for most components. We also provide basic rules in the documentation to ensure comprehensive accessibility standards across the entire system, covering Structure and Hierarchy, Color & Contrast, Touch and Pointer Targets, Keyboard Navigation, and Text and Writing.
Wait, let’s learn JJ’s lingo first
JJ is the name of our design system, and our aim is to make it approachable and enjoyable for everyone to work with. What’s realky makes JJ special it the fun we've infused into it. This fun extends to our entire system, including the language and tone in our documentation and UI Kit. First, lets’s learn JJ’s lingo!
Work with JJ, using Flavor, Ingredient and Receipe
We created in total 25 types of components, with 222 variants, and 269 images (as components). Leveraging our predefined colors, typography, and spacing guidelines, we took a systematic approach to craft cohesive design elements.
Our predefined colors variables, typography, and spacing guidelines helped us take a systematic approach to creating cohesive molecules. Starting from the smallest components like icons and dividers, we were able to progress to larger ones such as buttons and banners. For components with multiple properties (e.g., Text field with 5 states and optional message or label), we not only introduced the “Ingredient” section to show how they consist of subcomponents, also made a “ready-made” section for the most commonly used instances. In this way, we make it more intuitive and efficient to work with JJ.
Can we make building complex components even easier?
In Jamba, we found the most complex organisms are the modal and form. They are groups of molecules joined together to form a relatively complex, distinct section. Jamba features numerous forms, modules, and lists, each employing various components that, while similar, differ in quantity and type. While it is possible to construct them using individual components from scratch, this approach proves time-consuming. What if we made them into components?We use slots to make it happen. How to use slots to make different modals and forms? Take form as an example. We’ve set layout and essential elements of a form. By double-clicking a slot, you can choose 1 or 2 slots in a line and seamlessly swap instances with dedicated form-specific ingredients or other components such as buttons and text fields.
We documented JJ for collaboration and governance
We wrote the documentation using ZeroHeight, a platform integrated with Figma for easy collaboration and maintenance of web-based design system documentation. Our documentation lays out all the essentials and specifics from getting started to how to implement JJ to suit your design purposes. We documented design values, useful toolkit, accessibility standards, and all the components with varients and recipe - a set of guidelines for using them. You can also find ways to contribute named “Gotta help JJ!”.
How can you enhance your design decision-making using documentation?
Picture yourself as a new UX designer at Jamba, working on a button within a form with the text 'Use my location.' Unsure whether to use a medium or long button? Simply refer to the documentation, explore the Recipe section, and discover a clear guide for usage.
Why should Jamba adopt JJ?
JJ benifits users a lot. A consistent design will make it easier for users to accomplish their goals and foster more trust. Additionally, accessibility has been instilled in JJ and will ensure a seamless experience for a broader range of users on Jamba's website.
JJ also benifits internal teams, by streamlining tasks and minimizing repetitive work, freeing up valuable time for designers, developers, and other team menbers to focus on innovative problem-solving. JJ facilitates quicker solution creation based on established guidelines, tokens, components, and templates, reducing development time. Additionally, JJ contributes to a smoother onboarding process for new team members and promotes alignment with adjacent teams.
What I’ve learned
It significantly accelerated my design process from learning and practicing using Figma’s advanced features, for example, frame resizing , auto-layouts, making components with different variants, instances swapping, and local variants for tokens. We actually spent a lot of time fixing problems in regards of creating slots components, which may seem laborious, but enhanced our expertise and proficiency in using Figma.
This project highlighted the intricate considerations involved in developing a design system— it’s much more than a UI Kit with components. JJ, much like a human, needs both soul and a body that function seamlessly. Comprehensive documentation, encompassing principles, foundations, and usage guidelines, proved to be crucial.
As a team of three UX designers, we collaborated quite smooth, characterized by regular meetings and mutual support, not only strengthens our current efforts but also anticipates the potential integration of a development team in the future. It underscores the importance of cultivating enhanced flexibility and effective communication skills.
Team (Keyi, Alexis, Mary) and Jamba!