Design System-old

Atomic

Design System-old

UX Lead
Strategy
Mentorship
Implementation

Project 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 use of traditional static menu boards to display food items presented the company with the following challenges:

- Price changes were becoming more frequent, but were being held up or put off due to long turnaround and high costs of reprinting and refitting menu displays.
- Unable to notify customers when items are out of stock.

Need/Goal

The company needed the flexibility to make quick updates to do so and wanted a dynamic app that's data-driven to do so. They partnered with a Vendor to do the development work and I was responsible for translating the menu design specs from print to digital. The Vendor planned to use an API to place content within the menu regions.

The company wants to roll the new Digital Menus out to some of their NextGen cafes that they recently built in the last quarter of the year.

Process

Discovery

Kickoff Meeting

We kicked the project off with a meeting that included stakeholders to review the details and ensure everyone was aligned on needs, goals, limitations to consider, and our role in the project.

Brief

I worked with the Product Manager to craft a Scoping Document that outlined the objective, goals, methodology, and timeline.

Gathering of Assets

Brand Team provided existing print menu board designs & Brand guidelines for UX to follow.

Timeline

I had 12 weeks to deliver the Design System, so I created a timeline to keep us on track.

Research

In doing research, I used mixed-methods to get deeper insights from stakeholders, including the following:

Stakeholder Interviews

To understand needs and challenges, we interviewed stakeholders and used this information to influence the development process of the design system.

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

Key Takeaways

Brand Design Team uses a print tool, InDesign, to create static menu boards and would like to learn how to use Figma to create upcoming menu board designs.
The way they currently handle menu updates is a manual process. They provide the vendor with assets (png, jpg, pdf)
The Vendor needed to know sizing, colors, and menu IDs to display the content dynamically. They also recommended that we use the Atomic Method to

Define

Users
Users are internal product teams and third-party vendors building across the same customer experience.

Vendor (Developers)

Brand Design Team

Product Manager

Problem Statement

Audit

Affinity Map

I guided the team through an Affinity Mapping exercise using FigJam to get an inventory of existing menu design boards.

We were dealing with Drive-Thru and Interior menu boards that consisted of 3-7 panels across the dayparts (breakfast, lunch, and dinner).

The activity consisted of the following steps:

Gather

Brought screenshots of the menus to the FigJam Board.

Group

We grouped the menus based on layout similarities to define the templates.

Categorize

Then, we broke the menu elements down and categorized them into Atomic Design Levels (atoms, molecules, and organisms).

Naming Convention

I worked across teams to come up with a naming convention that tied the design elements, rules, and code together. The names are referenced in the business rules, Design System, and backend code.

Document Structure

I generated a list of design elements to map out the structure of the Design System, which will be used as the Table of Contents and assist users with finding elements.

Design System Creation

We used the inventory collected in the audit to build the design system using the Atomic Design Framework by Brad Frost and findings from research to determine the information most valuable to include for MVP.

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 can consist 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.

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."

Next Steps

The Digital Menu Board App is currently in development.

Test

Train

Maintenance

Create a process for introducing new components in the design system and communicating the changes.