Design System

UX Design Lead
Mentorship
Documentation
Implementation

Overview

Bread House is a quick-service and fast-casual restaurant with over 2,000 locations in the US and Canada. The company offers bakery items, pasta, salads, sandwiches, soups, and specialty drinks.

Problem
The company used static menus in their cafes and drive-thrus, and when they released new items, it was costly to reprint and refit the menu displays, so they needed flexibility in making quick updates and a way to inform customers when items were out of stock.

Goal
The goal was to build digital menus driven by a dynamic app. They aimed to roll out the digital menu boards to their Next-Gen Cafes for testing.

My Role

I was responsible for developing a strategy to translate design specs from print to digital to assist the Vendor with development.

I was hands-on throughout the process and coached designers through the motions of building and delivering an Atomic Design System.
I also collaborated with the Product Manager, the Brand Team, the Vendor, and other stakeholders.

Tools I Used: Figma, Google Sheets & Docs, and Slack

Solution

As a result, we created an Atomic Design System containing a repository of reusable components with guidelines to assist with development.

The system aligned our teams by giving them a more structured & guided way to build a dynamic app to display digital menu boards.
And it sped up our design and development process: with a ready-made library and patterns that the Brand Team used to create and test layouts much faster.

Praise Received:

"I wish all clients were on your level when it comes to understanding Atomic Design and clear direction."

This is the most thorough, complete, crisp, clean, thoughtful design documentation I think I've ever seen in my career. Really great. Thank you so much for taking this on."

My Process

Gather Requirements

Kickoff

To gather requirements, we had a kickoff to ensure we aligned with the needs and goals of the business and Vendor. I had 12 weeks to work with my team and deliver the Design System.

Gathering of Assets

The Brand Team provided the existing print menu board design & Brand guidelines to follow. These assets gave me an overall view of what was necessary to tackle.

Research

Interviews

We conducted interviews and spoke to the Brand Team, the Vendor, and Business Stakeholders, who revealed their needs and pain points.

"For every update, we have to reprint the menu boards and install them again. This a financial and time-absorbing investment every time."

"Without having to reprint paper menus, it will be easier to experiment with offers, different menu designs, upsells, and changes in pricing."

Key Takeaways:

The way the company currently handles menu updates is a manual process. They provide the Vendor with assets (png and jpg).
The Brand Design Team used a print tool, InDesign, to create static menu boards and wanted to learn how to use Figma to create upcoming menu board designs.
The Vendor needed design specs and rules around how and when to display the content on the menu boards.
They also required their clients to use the Atomic Design Method of organizing the specs defined by Brad Frost, which consisted of Atoms, Molecules, Organisms, and Templates.

Demo of the Vendor's System

I also requested that we get a demo of the system that the Vendor built previously, which would be different than what they would develop for us. This gave me a general idea of how they would input the digital menus into the system.

Key Takeaways:

They were not using a framework but would use custom code to build the dynamic app
They would schedule menus to be displayed dynamically and use an API to place content within the menu regions, so they needed business rules around the items on the menus.
- Our Product Manager took on the responsibility of putting this together for them.

Demo of the Vendor's System

Our Vendor gave us a demo of what one of their dynamic apps consists of, which would be different than what they would develop for us. This gave us an idea of how they would incorporate menu boards to be displayed.

Key Takeaways:

They were not using a framework but would use custom code to build the dynamic app and manage and schedule items displayed on the digital menu boards.
They planned to use an API to place content within the menu regions and needed to know business rules around displaying the items on the menu. Our Project Manager took on the responsibility of putting this together for them.

User Personas

Next, we conducted a workshop to define personas to have a better understanding of who the users are. I wanted to ensure we addressed their needs for the Design System.

Developer Dave (Vendor)

“It would be helpful if I could find all the components in a centralized library instead of me having to start over and write each line of code.”

Goals/Needs

Better time management
Work more efficiently
Juggling multiple projects

Pain Points

No single source
Lack of technical documentation available

Brand Team Designer

“I must create menu boards to illustrate food we have available.”

Goals/Need

Improve consistency
Best practices on when to use things/how to implement them

Pain Points

Duplication of work, no single source of truth.
Lack of consistency across the menu boards.

Product Manager

“I must figure out the appropriate time to display certain items on the menu board.”

Goals/Need

A naming convention to map the components on the menus to the business rules

Audit Existing Menu Boards

Affinity Mapping

To get a bird’s eye view of all the use cases we needed to cater to, we conducted an audit of our existing menu boards.

For this, I coached the team through an Affinity Mapping exercise in FigJam, where we took screenshots of the designs that the Brand Team provided and organized them in groups based on similarity in layouts.
Then, we worked backward and broke them down into the Atomic design levels: Templates, Organisms, and Molecules – all the way down to the smallest elements, the Atoms.
We went through several iterations to simplify the templates. First, they were very complicated, and then we narrowed them down from 9 to 5 templates that would accommodate multiple layouts.

We found the following:

We were dealing with Drive-Thru and Interior menu boards that consisted of 3-7 panels across the dayparts (breakfast, lunch, and dinner).
Some menus varied in size, depending on whether they were placed inside the cafes or outside in drive-thrus.

Naming Convention

To encourage better communication between disciplines, I developed a naming convention so we would reference the same components in the design system, the business rules, and the code to be clear on its intent.

List Out Components

We listed down the components we defined from our audit. This gave me an overview of what needed to be incorporated into the system so I could keep track and plan time accordingly.

This list was used later to map out the structure of the Design System and the Table of Contents to assist users with finding components.

Timeline

Next, I mapped out a timeline of what needed to be done and by who. This helped to keep stakeholders updated on the progress, and it helped me facilitate resource allocation.

I planned for the following: creating components in Figma and designing pages for the design system. I updated the timeline weekly based on our progress.

Patterns such as Typography, Colors, and Layout were important to tackle first, as they laid the foundation that the components would be based on.

We had weekly check-ins with stakeholders and the development team to collect their input and share our progress.

The goal of the discussions was to talk about components, properties, and establish guidelines.

I documented our discussions on Google Docs to keep track of decisions, which was helpful when we had to revisit components that were discussed previously. Having these notes tracked past thought processes.

Design System Creation

Create Design Symbols

We were ready to build our Design System.

First, we designed mockups for each page that included a header.
Then, we focused on the foundational elements (the Atoms), such as spacing, color palette, fonts, grids, and lines.
And we moved on to more complex blocks and pieces (the Molecules, Organisms, and Templates leading up to the Menu Boards).
We used the Variants feature with the Organisms. If line items got added, the component would adjust accordingly.
We also documented guidelines and rules for each component, including a description and best practices.

Atoms

Basic building blocks of a menu board.

Molecules

Simple combinations of atoms bonded together.

Organisms

Groups of molecules joined together to form a menu board. Organisms consisted of similar and/or different molecule types.

Templates

Templates consist mostly of groups of organisms put together to form menu boards. Here is where the menu board designs come together.

Menu Boards

Instances of Menu Board Designs. Placeholder content is replaced with real content to give an accurate depiction of what guests will see.

Handoff

We handed off the Design System to our Vendor to assist them with developing the dynamic app.

Next Steps:

The Design System is an ongoing project. We have a set of components for MVP, which is game-changing for our team.

The next steps would include the following:

- Forming a Design Team and creating a process for introducing new components and maintaining documentation to ensure the system stays up to date.
- Raising awareness by setting up a Slack Channel to promote adoption, communicate updates, and receive feedback.
- Testing – once the Vendor develops the app, test the menu boards to find any issues and make adjustments.
- Training – the Brand Design Team to use the system to assemble upcoming menu boards.