FoodFlow

The project

FoodFlow is the back office of a restaurant's online store. It is where the owner of a branch sees what is selling, keeps the menu up to date, follows every order from the kitchen to the doorstep, and grows sales with promotions. Everything a busy restaurant needs to sell online, on eight pages, in a light and a dark theme.

DarkLight

Key features

• Dashboard. Today's orders, deliveries in transit, average delivery time and revenue, followed by popular dishes, a revenue split (dine-in, delivery, takeout) and recent orders.
• Menu management. The menu as a visual catalogue: photo, category, price, dietary tags and an availability switch on every dish, with search, filters and category chips.
• Order management. A searchable table of every order with type, time, total, payment and a colour-coded status (completed, preparing, delivering).
• Delivery. Active deliveries with their driver and arrival time, driver availability and delivery performance.
• Reviews. Rating overview, what guests love, and inline replies so no review goes unanswered.
• Promotions and analytics. Offer cards with codes and results, and revenue, channels and top dishes over time.
• Settings. Restaurant profile, business hours and order preferences like auto-accepting paid orders.

Visual style

FoodFlow uses one appetising orange for everything the user can act on, on top of a warm off-white page and soft rounded cards. Food photography does a lot of the work on the menu and promotion pages, so the interface around it stays quiet: thin borders, gray secondary text, and colour only where it means something. Status colours (green, amber, blue) are kept separate from the brand orange so an order's state is never confused with an action.

Colour palette

The full UI kit for this project is in the FoodFlow design system.

More screens