Food service, hospitality tech - 2023–2025

DineEase

A web dashboard for running a restaurant's menu, orders, inventory, staff and delivery from one place - built to stay legible when the person reading it is standing up, mid-shift, with three things happening at once.

Role
Product design, full-stack development
Platform
Web-based management platform
Scope
UX research, information architecture, UI design
Year
2023–2025
DineEase home dashboard showing restaurant statistics, a yearly revenue chart and a delivery zone map
Home dashboard - the first screen an owner opens. Total earnings, order count, new customers and returns sit up top; below, a revenue chart they can switch between week, month and year, and a live map of which delivery zone is active.

The problem

A restaurant runs on tools that don't talk to each other

Before DineEase, a single order could touch a separate menu system, a card reader, a staff roster and a delivery tracker - four places to check when a table is waiting or a courier hasn't shown up. I researched restaurant operations across formats, from a fast-casual counter to a fine-dining floor, to find where the handoffs between those tools actually broke, since what a counter needs at lunch rush isn't what a dine-in floor needs at dinner service.

The brief was to fold five jobs into one dashboard: setting up the menu and delivery rules before service, taking and tracking orders during it, and reading the numbers back at close.

Before service - setup

Getting the menu and the delivery map right before the first order

Setup is what an owner configures once, before opening, and staff then depend on for the rest of the shift: restaurant basics, which services are offered (self-pickup, delivery, table reservation, dine-in), legal and tax details, the menu, and payments. Two of those screens carry the most day-to-day weight - the delivery zone map and the menu itself.

Delivery Zones setup screen with a colored radius map and a zone pricing form
Delivery Zones - an owner draws a shape or a circle on the map around the restaurant, names it (Green Zone, Yellow Zone, Red Zone...), then sets a minimum order amount, a free-delivery threshold and a delivery fee for that ring. Every address that comes in on an order is checked against these zones to work out what it costs to deliver there.
Menu Setup screen with dish photo cards, prices and category tabs
Menu Setup - each dish is a photo card with a name and a price, filed under a category (Light Meal, Desserts, Drinks, Burgers, Soups...). The category tabs filter the grid instantly; the three-dot menu on a card opens Edit dish or Remove dish without leaving the page.

Approach

Map the structure before drawing a single screen

I mapped the information architecture first - how Dashboard, Setup, Orders, Analytics, User Management, Messenger and Settings relate to each other and to their own sub-sections - so navigation came from how a restaurant is actually organized, not from whichever screen got designed first. From there I worked with the development team in agile sprints, building the owner-facing and staff-facing workflows side by side rather than one after the other.

Every screen had to work standing up, mid-shift. Not sitting down with a coffee.

During service - staff & shifts

Who's on the floor right now, and what can they touch

Employees screen listing staff with role, shift number and live working-now status
User Management - every employee shows their role (Administrator, Waiter, Courier, Support), their shift number, and a live "working now" dot or a "last active" timestamp if they've clocked off. Filtering by role (the platform shown here runs 42 people across those four roles) is how a manager checks coverage before service starts, not after someone's already short-staffed.

Information architecture

One tree, mapped before a single screen was drawn

The sitemap below is the actual structure I built: seven top-level areas, each broken into the sub-sections staff use daily. Setup alone holds six of them - restaurant basics, services, legal & taxes, menu setup, payments - kept as one branch instead of scattered through the app, which is what makes the rest of the dashboard feel shallow rather than nested three menus deep.

DineEase information architecture diagram mapping Dashboard, Setup, Orders, Analytics, User Management, Messenger and Settings and their sub-sections
Full sitemap - Dashboard (statistics, delivery zone, report, filters), Setup (basics through payments), Orders (recent orders, billings, customers, invoices), Analytics, User Management (employees, progress, messenger), Messenger and Settings. Every dotted box is a sub-section that got its own screen.

Process

From kitchen research to a reordered sequence of steps

  1. Research operations

    Studied how fast-casual counters and fine-dining floors actually run service, to find where separate tools were costing time.

  2. Map the structure

    Built the information architecture - the seven-area sitemap - before any screen was drawn.

  3. Design in sprints

    Worked with full-stack developers in agile sprints, designing owner and staff workflows in parallel.

  4. Reorder the actions

    Rebuilt the sequence of common tasks into a logical order of steps so staff could move through it without stopping to think.

During service - orders

From a list of everything to the one order someone's asking about

Orders is where the shift actually lives: every order comes in tagged Paid, Pending or Cancelled, with its total, its type (Delivery, self-pickup...) and the card it was paid on, filterable by date range. Opening one drops into Order Details - customer contact, order and delivery info, payment method and a running dish-by-dish total, plus a free-text notes field for anything that doesn't fit a form field.

Recent orders list with status, total, payment method and delivery time for each order
Recent Orders - filtered by All, Paid, Pending or Cancelled, with the order ID, total, status, timestamp, delivery type and payment card all in one row so a manager can scan sixty-plus orders without opening any of them.
Order details screen showing customer, order info, delivery, payment info, notes and a dish-by-dish total
Order Details - opening an order surfaces the customer's contact, delivery address and time, payment method, and the menu items with quantity and line total, summed at the bottom. A notes field and a Download Info button sit next to it for handling a dispute on the spot.

Design decisions

Three choices that came from watching the screens get used mid-shift

Outcome

One dashboard instead of four separate systems

DineEase replaced several separate systems with a single dashboard for menu, orders, inventory, staffing and delivery. Navigation was rebuilt around the platform's actual core functions, the interface reworked for clearer, more efficient use, and the sequence of common actions rebuilt into a logical order of steps - the result is a faster, more comprehensible product that staff can learn quickly and run with confidence under pressure.