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.
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.
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.
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.
I worked with the Product Manager to craft a Scoping Document that outlined the objective, goals, methodology, and timeline.
Brand Team provided existing print menu board designs & Brand guidelines for UX to follow.
I had 12 weeks to deliver the Design System, so I created a timeline to keep us on track.
In doing research, I used mixed-methods to get deeper insights from stakeholders, including the following:
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
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
Users
Users are internal product teams and third-party vendors building across the same customer experience.
Problem Statement
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:
Brought screenshots of the menus to the FigJam Board.
We grouped the menus based on layout similarities to define the templates.
Then, we broke the menu elements down and categorized them into Atomic Design Levels (atoms, molecules, and organisms).
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.
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.
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.
Menu Boards
Instances of Menu Board Designs. Placeholder content is replaced with real content to give an accurate depiction of what guests will see.
The Digital Menu Board App is currently in development.
Create a process for introducing new components in the design system and communicating the changes.