Atomic Design System
Project Overview
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.
Problem
The use of static menus caused several challenges:
- Flexibility: Whenever the cafe introduced new items or promotions, they had to reprint and refit their menu displays across all locations. This process was expensive and time-consuming.
- Real-time information: There was no way to inform customers about out-of-stock items. This resulted in customer dissatisfaction when they ordered something that was no longer available.
My Role
My responsibilities included requirements gathering, strategy, developing the Design System, document creation, and collaborating with the vendor, Product, and Brand team.
Tools Used
Figma
Figjam
Slack
Asana
Zoom
Google suite
My Process
Kickoff Meeting
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.
Key Takeaways:
- The Vendor preferred an Atomic design system that was easy to interpret and implement.
- Timeline: 12 weeks
Planning
Timeline
I developed a project timeline and established clear roles and responsibilities for each team member to ensure everyone stayed on task.
Discovery & Research
Asset Gathering/Audit
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.
Affinity Mapping
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.
User Interviews
We interviewed stakeholders who would interact directly with the design system, including the Vendor, Brand Team, and Product Manager.
Key Takeaways:
- Need for real-time menu updates, especially regarding out-of-stock items.
- The way the company currently handles menu updates is a manual process. They provide the Vendor with assets (png and jpg).
- The Brand team needed training on how to use the new Atomic Design System to ensure they could assemble future menu boards efficiently.
The static menus are hard to manage. Every update or out-of-stock item is a hassle.
- 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:
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.
- The vendor system was flexible and capable of handling different layouts and design variations.
- The vendor system supported various types of visual elements, such as images, typography, and colors.
- The system allowed backend control over what was displayed on the menu, providing flexibility to handle out-of-stock situations efficiently.
An organized design system can speed up our development process.
- Software Developer
Define
User Personas & User Journeys
Based on the insights gathered from research, we create personas that reflect the primary users. Additionally, mapped out user journeys that depict how these users would interact with the Design System.
Creating the Atomic Design System
Based on our affinity mapping and the collected assets, we created the Atomic Design System.
This involved:
- Translating static design elements into digital, breaking down the design into atoms, molecules, organisms, templates, and menu boards.
- Design the behavior of the system when items go out of stock.
- Creating reusable components to build digital menu boards.
- Document the entire design system, usage guidelines, best practices, and the naming convention for reference and updates.
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.
Naming Convention
To streamline communication across teams, business rules, and with the Vendor, we established a consistent naming convention for all design system components.
Prototype & Validation
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.
Handoff
We worked closely with the Vendor to ensure the design system was implemented correctly. We provided them access to the system and necessary resources.
Training the Brand Team
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.
Let's Work Together on Your Next Project!
Hire me for contract, freelance, or full time hire.
Copyright © 2023. All rights reserved.