As a UX Design Manager, I supported Panera Bread’s initiative of creating digital guest experiences and features in their Next Generation Cafes. They had been relying on static menus, and the goal was to create a dynamic app to enable easy updates and real-time information.
I led a team of designers in translating the design specs from static to digital and creating an Atomic Design System to assist the vendor with development. The project also involved training the Brand team to assemble upcoming menu boards.
The use of static menus caused several challenges:
My responsibilities included requirements gathering, strategy, developing the Design System, document creation, and collaborating with the vendor, Product, and Brand team.
We had a kickoff meeting with stakeholders and the vendor to ensure everyone understood the project requirements, business goals, the specifics of the existing static menu boards, and information about the vendor’s capabilities.
I developed a project timeline and established clear roles and responsibilities for each team member to ensure everyone stayed on task.
I coordinated with the Brand team to gather all static assets such as typography, colors, images, etc., and files of the existing print menu boards.
Then, I held an Affinity Mapping session to identify all existing elements and break them down into atoms, molecules, organisms, and templates, following the principles of Atomic Design.
We interviewed stakeholders who would interact directly with the design system, including the Vendor, Brand Team, and Product Manager.
- Brand designer
Collaborate with the Vendor
We also interviewed the Vendor and requested a demo of a dynamic application they had previously built to get an idea of how the system they were developing for us would function. We were able to gather some significant insights and details, which further assisted in refining our design system:
- Software Developer
Based on our affinity mapping and the collected assets, we created the Atomic Design System.
Atoms: The fundamental building blocks of the design system, including basic design elements, colors, typography, etc.
Molecules: Atoms combined to form discrete functional units, such as a label and line item.
Organisms: Molecules combined to form more complex components. Example: a header organism could include an icon, label, and several line items.
Templates: Layouts formed by combining organisms, stitched together to form menu boards.
Pages (Menu Boards) – Instances of templates that show what a UI looks like with real content in place.
To streamline communication across teams, business rules, and with the Vendor, we established a consistent naming convention for all design system components.
The design system was then used to create high-fidelity prototypes of the digital menu boards. These prototypes were validated through testing at the lab and refined based on the feedback received.
We worked closely with the Vendor to ensure the design system was implemented correctly. We provided them access to the system and necessary resources.
I delivered training documentation, and the Brand team was trained on using the new Atomic Design System, including the naming convention, assembling future menu boards, and proposing changes or additions to the design system.
Hire me for contract, freelance, or full time hire.