MenuOnline
Restaurant management SaaS with 13 operational modules — POS, Kitchen Display, reservations, waitlisting, inventory, multi-channel marketing, and analytics — designed and engineered solo as a UX Engineer. 5 user roles, real-time order state machine.
My Role
UX Engineer — Design + Frontend Code
Duration
3–4 months
Year
2023
Tools
Figma · React · TypeScript · MUI v5 · GraphQL · AG Grid
Project Brief
Design and engineer a comprehensive restaurant management SaaS platform — 13 primary modules covering POS, KDS, reservations, inventory, marketing automation, and analytics — for Admin, Manager, Kitchen, Waiter, and Driver roles across dine-in, online orders, and delivery simultaneously.
Restaurant management SaaS with 13 operational modules — POS, Kitchen Display, reservations, waitlisting, inventory, multi-channel marketing, and analytics — designed and engineered solo as a UX Engineer. 5 user roles, real-time order state machine.
The Problem
13 restaurant operations. 5 user roles. No unified platform. POS, KDS, reservations, and marketing lived in separate tools — none sharing the same order state.
Multi-service food businesses run on fragmented systems. The POS doesn't talk to the KDS. The KDS doesn't update the Counter Display. Marketing campaigns don't integrate with the customer database. Reservations and waitlisting are separate from table management.
Order state not shared across systems
POS accepted an order that KDS had to manually re-enter. Counter Display was updated by kitchen staff calling across the floor.
Marketing had no customer data
SMS and email campaigns required manual export from POS into a separate marketing tool — audience targeting was always stale.
No multi-location architecture
Multi-outlet restaurant brands had no way to manage settings and reporting across locations from a single admin.
Role-based access not designed
Kitchen staff, waiters, and drivers were using the same admin interface — seeing more than they needed, less context than they required.
UX Audit
What was broken before we redesigned
A heuristic evaluation of the existing system identified these critical issues before any design decisions were made.
No shared order state machine
Order status wasn't synchronised across POS, KDS, Counter Display, and customer SMS notification — chaos during peak service.
State ManagementRole-based access not designed
Kitchen staff and owners used the same admin interface — different needs, same UI.
RBAC GapTax system one-size-fits-all
Multi-named tax configuration (GST, HST, Service Tax, Alcohol Tax, Meat Tax) impossible in existing systems.
Compliance GapOur approach: One order state. Five role views. Thirteen modules.
Designed a real-time order state machine (New → In Process → Ready → Completed → Cancelled) synchronised across POS, KDS, Counter Display, and customer SMS. 5 role-appropriate interfaces. Multi-axis tax engine, geospatial delivery, multi-gateway payments, embeddable widget system. Engineered in React + TypeScript + MUI v5.
Process & Approach
How I approached the challenge
Platform Architecture
Mapped 13 module interdependencies, 5 role permission scopes, and order state lifecycle before designing a single screen.
3-Panel POS Interface
Category sidebar, item grid with modifier groups, live order panel with real-time tax calculation and coupon engine — the most complex single screen in the system.
KDS Kanban Design
Real-time Kanban: status columns (New/In Process/Ready), per-ticket countdown timers, chef assignment, item-level check-off. State syncs to POS and Counter Display.
13-Module System
POS, Order Management, KDS, Counter Display, Menus, Tools, Reservations, Waiting List, Tables, Customers, Staff & Roles, Store Setup, Inventory, Marketing (Email/SMS/WhatsApp), Analytics, Online Store.
React Engineering
Sole frontend engineer. React + TypeScript + MUI v5 + GraphQL + AG Grid. Multi-axis tax engine, SMS template variable injection (${{Customer_Name}}), embeddable iframe widget generators.
Design Principles
One order. Five views. Zero synchronisation delay.
Every module in MenuOnline is designed around a shared order state — not as a standalone feature.
State machine before features
The order lifecycle (New → In Process → Ready → Completed → Cancelled) was designed as an architectural decision. Every module that touches orders is a view of that state.
Role views, not feature flags
Kitchen staff see orders only. Waiters see tables and orders. Managers see everything. Role interfaces designed from the ground up — not filtered from an admin screen.
Embeddable = extensible
Menu widget and reservation widget iframe generators allow operators to extend MenuOnline to their own websites — a product-within-a-product decision.
Tax as configuration
GST, HST, Service Tax, Alcohol Tax, Meat Tax — each named, numbered, and percentage-configurable. Multi-axis tax is the operational reality of multi-region F&B.
A restaurant POS is not a checkout form. It's an operational command centre for the most time-pressured business environment in retail.
Why This Was Hard
Complexity signals
What set this project apart from standard product design work — the technical, systemic, and domain-specific challenges that demanded real depth.
3-panel POS interface
Category sidebar + item grid with modifier groups + live order panel with real-time tax, coupons, and contextual waiter/table/customer assignment — the most complex single screen in the system.
Real-time order state machine
New → In Process → Ready → Completed → Cancelled — synchronised across POS, KDS, Counter Display, and SMS notifications simultaneously.
Multi-axis tax engine
Named taxes (GST, HST, Service Tax, Alcohol Tax, Meat Tax) with configurable numbers and percentages — item-level tax assignment across all order contexts.
Embeddable widget system
Iframe code generator for Menu and Reservation widgets — operators embed MenuOnline functionality directly in their own restaurant websites.
SMS template variable injection
Dynamic message templates with `{Customer_Name}`, `{Waiting_Time}` variable syntax across Online Order, Cashier, and Reservation notification contexts.
13 modules. 5 user roles. One order state machine. Designed and engineered solo as a UX Engineer.
UI Screens
57 pages
Complete restaurant SaaS platform — 13 modules, 5 roles, designed and engineered solo.
Feature Highlights
Platform capabilities
3-Panel POS Interface
Category sidebar, item grid with modifiers, live order panel with real-time tax and coupons — the core of every restaurant's daily operation.
Core FeatureKanban Kitchen Display (KDS)
Real-time order board: status columns, per-ticket countdown timers, chef assignment, item-level check-off — synced to POS and Counter Display.
OperationsMulti-Channel Marketing
Email, SMS, WhatsApp campaign templates with {Customer_Name} variable injection — using real customer data from the platform.
MarketingEmbeddable Widgets
Iframe code generators for Menu and Reservation widgets — operators embed MenuOnline in their own restaurant websites.
Platform ExtensionDesign System
Tokens, typography & components
A shared token-based system built to ensure consistency across every screen and state.
Color Tokens
Type Scale
Components
User Flow
Core order pipeline
Login
Role-based
POS Order
3-panel UI
KDS Kitchen
Kanban flow
Payment
Multi-gateway
Order Complete
SMS notification
Tech Stack
Tools & technologies
Design
Frontend Engineering
React
TypeScript
MUI v5
GraphQLMy Contribution
Solo UX Engineering
01
UX Engineer — Design + Code
Sole designer and sole frontend engineer. Platform architecture, 13-module design, 57 screens, and full React + TypeScript + MUI v5 implementation including real-time state management.
Impact & Performance
Project at a glance
13
Platform modules
57
Pages designed
5
User roles
8.4/10
Portfolio score
Timeline
3–4 months: design system to production engineering
Month 1
Architecture + POS + KDS
Platform module map, order state machine, 3-panel POS, Kanban KDS. Role-based access architecture defined.
Month 2
13-Module System Design
All 13 modules: Menus, Reservations, Waiting List, Tables, Customers, Staff, Store Setup, Inventory, Marketing, Analytics, Online Store.
Month 3–4
React Engineering
Full React + TypeScript + MUI v5 implementation. Multi-axis tax engine, SMS template variables, payment gateway orchestration, iframe widget generators.
Outcomes
The impact we shipped
Measured results from usability testing, stakeholder reviews, and post-launch adoption tracking.
13
Modules designed
57
Pages designed
5
User roles
8.4
Portfolio score
"Delivered a comprehensive restaurant management SaaS — 13 modules, 5 role-based interfaces, real-time order state synchronisation across POS/KDS/Counter Display/SMS — designed and engineered by a single UX Engineer."
Learnings & Reflection
What I'd do differently
01
Order state before module design
Designing the shared order state machine before any module UI was the right sequencing. Modules built on a defined state are coherent; independently built modules connected afterwards are not.
Interested in working together?
Let's talk about your project or open role.
Live Prototype
Explore the Figma design