# Avo House — case study

> A practice admin dashboard for a food-delivery business: sales, live orders, branches, drivers and the menu, in one calm desktop tool.

- **Type:** practice
- **Industry:** Food delivery
- **Role:** UI/UX design
- **Platform:** Desktop web app · 1500 × 1000 frames
- **Tools:** Figma
- **Status:** Practice project — design only, not built

- Case study: https://ministar-samuel.com/project/avo-house
- Figma file: https://www.figma.com/design/znO7M4kRh4Dw1COYP892BI/Avo-House?node-id=0-1

![Avo House dashboard: a sidebar with Dashboard, Orders, Restaurants, Products and Drivers; a sales chart, the current offer, a drivers list, recent orders and an Expand map card](https://ministar-samuel.com/case-studies/avo-house/figma/01-dashboard.webp)

## Overview

Avo House is a practice design for the back office of a food-delivery business — the screens its staff would use to run the day, not the ones customers order from. It was designed in Figma on one board of desktop frames, with no client and no build.

An admin signs in and lands on a dashboard; from a fixed sidebar they move between **Orders**, **Restaurants**, **Products** and **Drivers**. Branches are named after Lagos neighbourhoods — Ikoyi, Victoria Island, Lekki — and every number in the frames is sample data. [Open the Figma file](https://www.figma.com/design/znO7M4kRh4Dw1COYP892BI/Avo-House?node-id=0-1) to see the whole board.

- **13** Desktop frames
- **1500 × 1000** Frame size
- **5** Sidebar sections
- **4** Order statuses

## Challenge

Earlier write-ups described Avo House as a customer storefront — appetising imagery, dietary filters and a cart side-panel. The Figma file is the other side of the counter: an admin dashboard for the business. This case study describes what the frames actually show.

*the real problem*

### Four moving parts, one screen.

Whoever runs a delivery business juggles four things at once: orders coming in, branches opening and closing, drivers out on the road, and a menu that changes. The challenge was to keep all four visible and editable without the admin losing their place.

The appetising photography from the brief survives, but inside a calm grey-and-white tool: burger cut-outs on product cards, dining rooms on branch cards.

![Add new product panel over the products grid: name, ingredient chips, a Suitable for vegans checkbox, weight, calories, price and a photo upload](https://ministar-samuel.com/case-studies/avo-house/figma/05-add-product.webp)
*The only “dietary” element in the file: a Suitable for vegans flag that staff set on a product.*

## Goals

*goals, as the frames express them*

**The day at a glance.** Sales, order counts, the current offer and the drivers on one dashboard.

**Any order, fast.** A full table with search, an ETA sort, a status on every row and a phone icon for the driver.

**Know where everyone is.** Branches and drivers on a dark map; a driver’s current delivery drawn as a route.

**Edit in place.** Details and new products open in a side panel over the list, so the admin never leaves it.

**Close the day.** “Send daily report” sits under the sidebar on every screen.

![Restaurants page: four branch cards with photos, hours, Manage restaurant, call and email buttons, one marked Closed; beside them a dark map of Lagos with branch pins and a Show opened restaurants only checkbox](https://ministar-samuel.com/case-studies/avo-house/figma/03-restaurants.webp)
*Restaurants: branch cards beside a map; a closed branch is labelled, with a grey marker in place of the teal one.*

## Research & discovery

Avo House was a practice project, so there was no research with a real business behind it. The work started from the standard shape of an operations dashboard — a summary first, then one page for each thing being managed — and from listing what a delivery business actually runs on.

Read back from the frames, the dashboard holds six kinds of record, and every page is built around one of them:

**What the dashboard manages** (flowchart):

1. Restaurant — A branch: address, opening hours, open or closed, phone, email, a pin on the map.
2. Product — Name, ingredients, vegan or not, weight, calories, price, photo, category (Main courses, Side dishes, Drinks, Others), shown or hidden.
3. Order — Restaurant, items, order ID, client, delivery address, value, ETA, driver, status.
4. Driver — Status (delivered, in delivery, idle), current delivery, deliveries so far, vehicle.
5. Client — A name and a delivery address, as they appear on the order.
6. Vehicle — Model, plate and condition — for example a Vespa Elegante 150 marked “Good condition”.

*Records and fields read off the frames’ tables, cards and panels.*

## Information architecture & flows

The sidebar is the whole map: Dashboard, Orders (with a count badge), Restaurants, Products and Drivers. It never moves, and neither do the search bar, the Export button or “Send daily report”; only the main area changes. One variant of the orders table collapses the sidebar to icons.

**Sitemap** (flowchart):

1. Sign in — “Admin Dashboard”: email and password, or Request access for new staff.
2. Dashboard
3. Orders — The full table; a selected row is outlined in teal.
4. Restaurants — Branch cards and a map; a filter for open branches only.
5. Products — Tabs: Main courses, Side dishes, Drinks, Others.
6. Drivers — Tabs: Driver list and Vehicle list (only the driver list is drawn).
7. Add product panel
8. Driver details panel

**Order lifecycle** (flowchart):

1. Ordered — Grey dot.
2. Pending — Amber dot.
3. In-delivery — Lime dot, with an ETA.
4. Delivered — Green dot; the ETA column shows a dash.

*The four statuses in the orders table, in the order we read them — the file doesn’t spell out the transitions.*

## Wireframes

*playground*

### Blocked out first.

The board starts with a frame called **Playground**: the dashboard as grey blocks — a sidebar, a top bar, three panels across, two stacked on the right, and one wide panel underneath — before any content goes in.

The finished dashboard keeps the idea — a fixed sidebar, a search bar and a grid of white panels on grey — and rearranges the panels around the content: sales and orders on the left; the offer, drivers and map on the right.

Wireframes: Playground (desktop), Dashboard (desktop).

*Code-drawn sketches of the Playground block-out and the finished dashboard (sidebar omitted).*

## Visual design & system

The interface is grey and white with one teal for actions, so the food photography and the status dots carry the colour. Status is never colour alone: every dot sits next to its word.

Off to the side of the board are size squares (8, 16, 24, 32, 36, 40, 48 and 64 px) and a hidden frame named “Competents” holding the parts the screens reuse — six driver avatars, the logo, a scooter and a car — plus a strip of burger photos. There are no shared colour styles, text styles or components in the file; values are set on each layer.

- **Ink** #2E2E2E — Text, icons, the Add product to menu button, dark cards
- **Canvas** #EBEBEB — Behind the content panels
- **White** #FFFFFF — Sidebar, panels and tables
- **Muted** #919191 — Column headings, secondary text, the “Ordered” dot
- **Avo teal** #19D6B2 — Actions: Send daily report, Manage offers, Sign in
- **Selected** #A6FCEB — The active sidebar item (with a #06AD8C edge)
- **Night map** #191A1A — Map panels for branches and routes
- **Delivered** #00C24B — Status dot
- **In delivery** #C6FE25 — Status dot
- **Pending** #F7AE40 — Status dot

- **Inter** — The only typeface. Medium for table text and labels; Semi Bold to Extra Bold for headings and figures.

## Key screens

**1. Dashboard**

The day in one view: a sales curve with today, this month and this year beside it; order counts (ongoing, delivered, total); the latest orders with ETAs and a phone icon; the current offer; and which drivers are delivering and who is on a break.

![Dashboard with sales chart, current offer card, drivers list, recent orders table and Expand map card](https://ministar-samuel.com/case-studies/avo-house/figma/01-dashboard.webp)
*Figma · Dashboard. Every figure is sample data.*

**2. Orders**

The full table adds client, delivery address, driver and status. The summary strip stays on top, the ETA column carries the sort arrow, and a separate frame shows a selected row outlined in teal.

![Orders page: a summary strip of order counts and sales above a table with restaurant, order, ID, client, address, value, ETA, driver and status columns](https://ministar-samuel.com/case-studies/avo-house/figma/02-orders-table.webp)
*Figma · Order data table.*

**3. Restaurants**

Branch cards — photo, address, hours, Manage restaurant, call and email — sit beside a dark map with a pin for each branch. A closed branch is labelled “Closed”, with a grey marker in place of the teal one; a checkbox narrows the map to open branches.

![Restaurants page with branch cards and a dark map of Lagos](https://ministar-samuel.com/case-studies/avo-house/figma/03-restaurants.webp)
*Figma · Restaurants.*

**4. Drivers**

The driver list shows each driver’s status, current delivery, deliveries so far and vehicle. Opening a driver slides a panel over the list: when they joined, their vehicle and its condition, and the current delivery as a route on the map, from branch to doorstep.

![Driver details panel over the driver list: Randall Forbes, a Vespa Elegante 150 in good condition, and the current delivery drawn as a route on a dark map](https://ministar-samuel.com/case-studies/avo-house/figma/04-driver-details.webp)
*Figma · Driver Details.*

![Orders page of the Avo House dashboard](https://ministar-samuel.com/case-studies/avo-house/figma/02-orders-table.webp)

1. **Count badge** — The Orders item carries a count badge on every page.
2. **Export** — Exports today’s stats. The label reads “CVV”; it should read CSV.
3. **Summary strip** — Order counts and sales stay above the table.
4. **Sort by ETA** — The ETA column carries the sort arrow.
5. **Status** — A coloured dot and a word: delivered, in-delivery, pending or ordered.
6. **Close the day** — “Send daily report” is under the sidebar on every page.

## Editing in place

Anything with detail opens as a panel from the right, over a dimmed list, instead of a new page — the same pattern for reading about a driver and for adding a product. Drag the slider to compare the two.

Comparison — Driver details vs Add product:

![Driver details panel over the driver list](https://ministar-samuel.com/case-studies/avo-house/figma/04-driver-details.webp)

![Add new product panel over the products grid](https://ministar-samuel.com/case-studies/avo-house/figma/05-add-product.webp)

**Adding a product** (flowchart):

1. Products — Tabs by category; each card has an eye icon (struck through on one product, so a show/hide toggle) and an edit button.
2. Add new products — The last tile in the grid.
3. Fill in the panel — Name, ingredients as removable chips, the vegan flag, weight, calories, price, and a photo (JPG or PNG, max 2 MB).
4. Add product to menu
5. New card in the grid

*The add-product flow as the frames show it. Validation and error states aren’t designed yet.*

## Outcome & learnings

Avo House is a design exercise: thirteen frames on one Figma board, **not built and not tested** with a real business. It covers signing in, the dashboard, orders, branches, the menu and drivers.

The lesson is in the gaps. The layout is consistent, but nothing is shared — no components, no colour styles — so every repeated row, card and panel was drawn by hand. That’s the first thing a next round would fix, before adding screens.

*open, if it goes further*

- ☐ Components and colour styles for the sidebar, table rows, status dots, cards and panels
- ☐ Screens behind buttons that exist: Manage restaurant, editing a product, the Vehicle list
- ☐ Empty, loading and error states (an order with no driver, a failed photo upload)
- ☐ A copy pass: “Export CVV” should read CSV
- ☐ A contrast check on the lime In-delivery dot against white

![The Avo House Figma board: Dashboard, Order data table, Restaurants, Product and Driver on the top row; Sign in page, the selected-row table, Restaurants opened-only, Add Products and Driver Details below; Sign in filled and a collapsed-sidebar table at the bottom](https://ministar-samuel.com/covers/avo-house.webp)
*The whole board, from the Figma file.*

---
By Samuel Ministar · https://ministar-samuel.com/project/avo-house