The Microsoft Dish Health Dashboard is a web app designed to help dining teams monitor the status of self-service machines across Microsoft cafés. It shows if a machine is offline, low on paper, or needs attention, all in one place. This makes it easier for staff to respond quickly, reduce downtime, and keep the dining experience smooth and efficient for everyone.
Role
Product Designer – User Research, Visual Design, Interaction and Prototype
Tool Kit
Figma, Adobe Illustrator and Adobe Photoshop
The Problem
Microsoft cafés rely on automated machines like self-checkout kiosks and smart dispensers to provide a smooth and efficient dining experience. However, when these machines go offline or run out of receipt paper, it disrupts service and causes frustration for both customers and staff. The challenge was visibility. There was no centralized way to monitor the status of these devices. Issues were often discovered too late, only after someone reported them, leading to delays, manual checks, and reactive support. To maintain a reliable dining experience, there was a clear need for a real-time dashboard that could track the health of these systems and help teams respond quickly and efficiently.
The Solution
To solve this, we created the Microsoft Dish Health Dashboard, a centralized web app that gives dining teams real-time visibility into the status of all their machines.
The dashboard helps staff:
• See which devices are online or offline • Get alerts when receipt paper runs out • Monitor multiple locations in one place • Act quickly to keep operations running smoothly
With this tool, teams no longer need to rely on manual checks or wait for reports. They can now catch issues early, respond faster, and deliver a better dining experience every day.
The Process
Site Map
Components
Developing the Designs
Establishing the Core Layout I began by designing the core structure of the health dashboard, focusing on how to clearly display machine statuses and surface important alerts like offline systems or low paper. Jumping into mid-fidelity layouts allowed me to quickly define the flow and prioritize key information areas for operational teams.
Refining with Visual Elements Once the layout was solid, I introduced visual elements such as typography, colors, and spacing. Since this dashboard would be used in fast-paced environments, I focused on clean design and visual hierarchy to ensure important statuses stood out at a glance.
Component Creation & Reusability During the process, I identified recurring elements like status cards, alert badges, filter dropdowns, and summary tiles. I turned these into reusable components to keep the design consistent and speed up future iterations.
Interactive Prototype & Feedback I built an interactive prototype to show how users could navigate between sites, view machine health, and respond to alerts. This helped gather early feedback from stakeholders and dining operations teams, which led to improvements in layout and information grouping.
Final Design Polish After multiple rounds of feedback, I refined the layout and visuals with close attention to alignment, spacing, and interactive elements. The final design focused on clarity, responsiveness, and ease of use for day to day operations.
1.Designing for Operational Clarity is Essential Designing a layout that highlights machine status and alerts clearly made it easier for staff to take quick action. Visual simplicity had a big impact on usability in high-paced environments.
2. Building with Real Context in Mind Helps Designing while considering the real workflows of café staff made the dashboard more practical. Thinking beyond the screen helped align design decisions with everyday use.
3. Reusable Components Speed Things Up Creating and using components early on saved time and made updates easier. It also ensured a clean and consistent interface as more features were added.
4. Quick Feedback Loops Make a Difference Even informal feedback from stakeholders helped catch issues early. Iterating with real input led to better decisions and a smoother user experience.
5. Small Details Add Real Value Micro interactions, spacing, and clear visual hierarchy made the final design not just functional, but more enjoyable and less stressful to use during busy times.
