UX audit & design-system plan
Overview
A UX audit and design-system plan for a restaurant-management platform. Gaolo carries two operator roles behind one product. A Restaurant Owner runs a single kitchen: menu, orders, reviews, coupons, refunds. A Platform Admin runs the estate above it: restaurants, users, couriers, support and billing. The file covers 129 screens across desktop and mobile, in three bands. What it does not carry is a system: no variables, no styles, and not a single component.
Interface audit · Design system review
Desktop 1920 · Mobile 375
Restaurant Owner · Platform Admin
Client
We keep the client's name and internal figures confidential; every finding here comes from the product file itself, read as a UX audit and turned into a design system plan for the dashboard both operators share.
The problem
The surface is finished and consistent to look at. Underneath, every button, field, table row and card is a hand-copied frame. That is why the same metric can read one number on desktop and a different number on mobile, and why one name ends up on nine different screens.
129 screens, 0 shared components. A change to the primary button is 129 manual edits.
24 frame names are used more than once. “Delivery Management” names nine different screens; “Settings_notifications” names three, including Billing and Payment Method.
New Customer reads 9,419 on the desktop dashboard and 3,174 on the mobile one. Total Revenue reads 9,419 with no currency, and $3.5M on mobile.
Who it serves
The same interface shell serves a kitchen and a head office. The Owner works inside one restaurant and needs today's numbers to be right. The Admin works across all of them and needs every record to be findable. Both profiles below are drawn from what the screens actually ask for.
Goals
Move 242 loose fill colors, 34 size-and-weight pairings and 20 line-height values onto named tokens and styles, in one collection with a dark mode.
Nothing in the file is an instance. The button, field, table row, status chip, food card and KPI tile carry the whole interface and should be six components.
Desktop and mobile must agree on the same metric, coupon codes must be unique, and a Delivered order must stop saying the driver is on the way.
Eight of 129 screens have a dark variant and all eight are mobile. Either complete it as a mode or drop it: a dark theme on 8 of 129 screens is worse than none.
Audit
Every screen, flow and piece of copy was read before anything was concluded. Each count below is measured from the file, not estimated.
“Lorem ipsum is a dummy text” sits under all four dashboard KPIs, in every customer review, on every Top Selling Item card and in the delivery tracker’s description.
Refund order IDs run #56974 to #56982. The Admin user table reuses the identical range for User IDs, with the same nine names: refunds and user accounts share one list.
Three of four dashboard KPIs read 9,419. Nine menu items each show exactly (104) reviews. Eight restaurants each rate 4.5. One coupon code, JKHD54DHJJ, is issued to four different coupons.
Delivery cards read “Order Delivered” and “Order Cancelled” while both still show “Driver on the way” and a 25-minute ETA, with “Estimated Arrival · Now” above it.
24 frame names are used more than once. “Delivery Management” alone names nine different screens, so no screen can be found by name.
Both headline charts start their Y-axis at $50k rather than zero, and the order axis mixes 1k and 5K capitals.
Architecture
Onboarding is shared. Below it the product forks into two operator shells with different navigation, then converges again on the same records pattern: list, detail, create, delete.
Foundations
Desktop screens are drawn on a 1920 frame; mobile on 375. Screen heights run from a 720px popup to a 3,900px analytics page, so the product is built to scroll rather than paginate.
Components
Six shapes carry the entire product: the pill button, the search field, the table row, the status chip, the food card and the KPI tile. Not one of them is a component: the file holds zero instances, so every one of them has been copied by hand into 129 screens.
Feature 01
Sign-in, sign-up, OTP, success, forgot-password, verification and reset: the full loop, in both canvases. The same shell then routes to two entirely different products depending on who signed in.
Feature 02
The owner's landing screen leads with Total Orders, Total Delivered, New Customer and Total Revenue, then a sales curve, reviews, recent orders and top sellers. Three of the four KPIs read 9,419, Total Revenue carries no currency symbol, and all four descriptions still say “Lorem ipsum is a dummy text”. The mobile version of the same screen disagrees with every one of those numbers.
Click map
A design-intent click map of the owner dashboard: heat sits only on interactive targets (buttons, tabs, links, menus), weighted by how central each action is to the owner's day. It maps layout decisions, not recorded sessions.
The owner reads orders all day, so Orders carries the hottest spot in the top navigation. It sits third in an eight-item bar, behind the Dashboard and Menu tabs.
Keeping the menu accurate and answering reviews are the owner’s next most frequent jobs, so both tabs run warm. Analytics and Marketing cool off from there.
The only control on the order table, and the fastest way to narrow today’s list. It earns heat close to the Orders tab.
Two period controls sit right on the charts, so the owner can change a chart’s range in one tap without leaving the dashboard.
Bell, mail, settings, avatar, download and View all are checked rather than worked in. Dashboard is the current page, so its tab gets little. KPI tiles and charts carry no heat.
Design-intent map, not recorded data.
Feature 03
Menu management carries item, rating, preparation time, price, offer and stock state, with a four-step add flow and edit, disable and delete confirmations behind it. The pattern is sound; the data under it is not: every one of the nine items reports exactly (104) reviews, and the offer column mixes “Out of Stock” with “Buy 2 get 1 free” as if they were the same kind of value.
Feature 04
Order pairs a live summary donut (delivered, upcoming, cancelled, ongoing) with an incoming-order curve and the order table beneath. Customer Review sits alongside it with rating distribution and a monthly trend. The order axis reads 1k, 5K, 10K, 15K, 20k: two different capitalizations of the same unit, and a first step of 4k where every other step is 5k.
Feature 05
Analytics and reporting stacks sales, earnings, categories, loyal customers, top sellers and top menu items into a single page: 2,737px on desktop, 3,900px on mobile, the deepest screen in the product. Both headline charts start their Y-axis at $50k rather than zero, which flatters every rise on them, and their period controls are swapped: the one labelled Yearly is showing a July tooltip.
Feature 06
Marketing and promotion covers coupon creation, a remaining-quantity meter, CSV import and export, and the redemption table, with Refund, refund details and rejection sitting next to it. Four different coupons in the list are issued the identical code, JKHD54DHJJ, and the same offer name appears three times, so the table cannot be read as a list of distinct promotions.
Feature 07
The admin shell swaps the owner’s navigation for users, restaurants, menus, orders, delivery, analytics and support. Delivery Management is its most complex surface: a live map with courier routing beside a tracking list. Nine separate frames share that single name, all three cards show order #264100, and a card marked “Order Delivered” still reports a driver on the way with a 25-minute ETA.
Data integrity
The owner dashboard exists in a desktop and a mobile version. They are not showing the same numbers. New Customer reads 9,419 on one and 3,174 on the other; Total Revenue reads 9,419 with no currency symbol on desktop and $3.5M on mobile. Whichever is right, the product currently ships both, and all four cards still carry the same placeholder description.
Charts
Both headline charts begin their Y-axis at $50k instead of zero, so every peak looks larger than it is and a flat year reads as growth. The control above this one says Yearly while its tooltip reports “2021, July”, and the neighboring Total Earning chart says Monthly above an axis labeled 2018 to 2023: the two period controls are the wrong way round. The tooltip also reports $248k against a point sitting nearer $220k.
$50k, not $0: on both dashboard charts and their mobile counterparts.
“Yearly” shows a July tooltip; “Monthly” is plotted across six years.
Canceled orders sit above Sales for most of the six-year series.
1k · 5K · 10K · 15K · 20k: mixed capitals, and an uneven first step.
Mobile & dark
Mobile is not a cut-down of desktop here: it is 77 screens with its own drawer navigation, its own card stacking and, on the analytics page, a 3,900px scroll. Dark mode is the gap: eight screens carry a dark variant, all eight are mobile, and no desktop screen has one. A dark theme on 8 of 129 screens is harder to ship than none, because it has to be maintained twice and finished later.
Visual language
Gaolo runs a single warm yellow against a near-black chrome, with the food photography carrying most of the color. That pairing is the product's strongest asset, and the reason the 242 loose fill values underneath it are worth consolidating: seven roles are doing the work, and 235 near-duplicates are along for the ride. Type is set in Poppins, with Inter, Outfit and Open Sans appearing on 98 stray nodes.
Typography
Before / After
0 shared components across 129 screens. Every button, field, row and card is a hand-copied frame.
Six components (pill button, search field, table row, status chip, food card, KPI tile) carry all 129 screens.
Three of four desktop KPIs read 9,419, Total Revenue has no currency, and every description is lorem ipsum.
Pick the correct KPI set once and let one component render it on desktop and mobile.
24 frame names are used more than once; “Settings_notifications” names three screens.
Unique names make a 129-screen file navigable and make a duplicate obvious.
Design-system plan
Every count is measured from the file. Each pair reads as found → proposed for the next pass; none of it has shipped yet.
Design-level findings from the audit. Proposed targets, not shipped results.
Recommendations
The pill button, search field, table row, status chip, food card and KPI tile carry all 129 screens. Six components remove most of the duplication.
24 names are reused; one covers nine screens. Naming is what makes a 129-screen file navigable, and what makes a duplicate obvious.
Pick the correct KPI set once, then let one component render it on both canvases. Two hand-built dashboards will always drift apart.
A $50k floor flatters every chart on the page. If the range genuinely needs truncating, say so on the axis rather than hiding it.
Eight mobile screens is not a theme. Tokens make it a switch; leaving it partial makes it a maintenance cost with no user benefit.
Lorem ipsum under the KPIs, reviews and top sellers survived to a finished-looking file. A pre-handoff copy pass catches every one.
Have a product like this? Let's talk. Book a call
Or see more case studies, including WorkHub, an HR platform designed on the same template.
PDF, 3 MB
Get a free UI/UX audit and discover what’s holding your site back
