From Chaos to Control
Reinventing Restaurant Operations and Customer Experience with Multi-Platform Design
Role & Responsibility
UX/UI, Researcher, Interaction Design, Prototyping
Industry
Restaurant and Management
Year
2024
Collaborators
Context
MK Restaurant Group, a leading food service company with over 700 restaurants in five countries, has been a cherished dining destination for Thai families and friends for nearly 40 years.
In this project, I'm a UX/UI Designer working with three other designers. We were tasked with starting to build the product from scratch, from user research to prototyping and delivering.
Problem
With the rapid growth of Thailand’s food industry, MK Restaurant Group faces pressure to scale efficiently. The company needed to transition from manual processes to digital solutions to reduce costs and boost operational efficiency.
Brief
Design and implement a design system of app and console
App - Customer Self-Ordering (CSO)
Handheld - Staff System (POS)
Console - Head Quarter Management (HQ)
Implement the new app and console using the newly-created design system.
Challenge
Key challenges are:
Diverse User Personas: Catering to the different needs of B2B (restaurant owners/managers) and B2C (diners) users while ensuring a consistent design across sub-brands.
Consistency Across Sub-Brands: Maintaining visual and experiential consistency across multiple sub-brands while allowing for brand-specific variations.
Legacy System Constraints: Implementing the new design in an old, familiar system posed technical constraints and adoption challenges for traditional users.
Scalability: The system needed to support future growth and help MK stay competitive in the evolving market.
Solution
User Interviews: We conducted interviews across various departments, including IT team, managers, accounting, marketing, and staff in the restaurant.
Field Study: Observing real-world scenarios at one of Bangkok’s busiest MK Restaurants (Central World), we identified usability issues that arise specifically in the restaurant environment.
User Personas, Information Architecture & User Flow: We mapped the system across POS, handheld devices, CSO, and the HQ dashboard to understand how these elements connected and how users navigated the workflow from start to finish.
Design System
As part of the project, we were tasked with creating a new design system. We collaborated with the branding team to gather the existing style guide and used MUI as the foundation for the system, aligning it with the development team’s preferences. Below are key highlights of the process:
Color Library: We simplified the extensive MUI color palette into a more compact library to ensure consistency and better alignment with the brand’s visual identity.
Type Scale: Working with MK’s type scale (in Thai), we discovered that the default line height didn’t fit the design requirements. After consulting the marketing team, we adjusted the line height while maintaining the original font family to improve readability.
Table Design: To optimize the headquarters dashboard, which heavily relies on tables for tasks such as setting promotions, managing items, and generating reports, we redesigned the table component to support all necessary features in the most efficient way possible.
MK design system
Outcome
After 11 months of dedicated work, we successfully delivered a comprehensive restaurant management system that significantly improved usability and efficiency for both B2B and B2C users.
Release 1:
We launched the core system, focusing on key functionalities. This initial release addressed usability concerns, received positive feedback, and provided valuable insights for future iterations.Release 2:
Currently in progress, this release focuses on enhanced design, optimized workflows, and better data visualization. Key additions include a stock management feature, designed to streamline inventory across 700 branches.
HQ Dashboard
The final design for headquarter management dashboard
dashboard: signin, Menu, setting banner, add banner
Customer Self Ordering
The app allows users to order food, complete payments, or request staff assistance.
