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.
I was responsible for developing a strategy to translate design specs from print to digital to assist the Vendor with development.
Tools I Used: Figma, Google Sheets & Docs, and Slack
As a result, we created an Atomic Design System containing a repository of reusable components with guidelines to assist with development.
Praise Received:
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.
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.
We conducted interviews and spoke to the Brand Team, the Vendor, and Business Stakeholders, who revealed their needs and pain points.
Key Takeaways:
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:
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:
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
Pain Points
Brand Team Designer
“I must create menu boards to illustrate food we have available.”
Goals/Need
Pain Points
Product Manager
“I must figure out the appropriate time to display certain items on the menu board.”
Goals/Need
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.
We found the following:
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.
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.
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.
Create Design Symbols
We were ready to build our Design System.
Instances of Menu Board Designs. Placeholder content is replaced with real content to give an accurate depiction of what guests will see.
We handed off the Design System to our Vendor to assist them with developing the dynamic app.
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: