Designing a Restaurant Management System Multi-Platforms Experience
MK Restaurant Group is a renowned food service company with over 700 restaurants in five countries. For nearly 40 years, it has been a cherished destination, offering memorable dining experiences centered around togetherness and happiness for Thai families and friends.
As the food industry in Thailand continues to grow, MK Restaurant Group faces increasing pressure to scale operations effectively. To remain competitive, the organization needs to transition from manual processes to digital solutions, ultimately reducing operational costs and improving efficiency.
Legacy System - Payment
Legacy System - Manage Table
Brief
Design and implement a design system of app and console
Design for Platforms:
Customer Self Ordering (CSO) – App
Staff System (POS/Point of sales) – Handheld
Head Quarter Management – Console
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: Designing a scalable system to support future growth and stay competitive in the evolving market.
Approach
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
Ideate & Iterate
Initially, we created low-fidelity wireframes, and feedback revealed some aspects were too complex, hindering user navigation across platforms. In the next iteration, we simplified the designs, focusing on essential features and streamlining user flows, resulting in clearer, more effective solutions for each platform.
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: The initial release focused on core functionalities, providing users with a streamlined interface for managing restaurant operations. This release addressed fundamental usability issues and received positive feedback from early adopters, allowing us to gather valuable insights for further improvements.
Release 2: Currently in progress, the second release aims to implement significant enhancements, including a simplified design, optimized workflows, and improved data visualization. A major focus of this release is the introduction of stock management, which addresses the complexities of managing inventory across 700 branches. This feature is expected to streamline inventory tracking and replenishment processes, further enhancing user satisfaction and operational efficiency.
