← Back to Portfolio
Case Study

African Food Incorporated: Online Ordering & Reservation System

End-to-end UX Design  |  Four-Component Platform

LiveProduct DesignFigmaWCAG Accessible

Manual and fragmented processes for food ordering and restaurant table reservations were causing customer drop-off, staff operational overload, and zero real-time visibility for management. This project delivered a four-component digital platform designed from first principles, covering every actor in the system from the end customer to the delivery agent.

Platform Components

User Webpage

Customer-facing interface for browsing menus, placing orders, and booking tables

Restaurant Admin Web App

Staff operations panel for managing simultaneous orders and reservation conflicts in real time

Manager Admin System

Performance analytics dashboard with real-time sales insights and data visualisation

Delivery Personnel App

Mobile app with GPS-enabled route optimisation and live order tracking

User Pain Points

Customers

Overwhelmed by excessive options and frustrated by slow, broken checkout flows

Restaurant Staff

Managing simultaneous orders and reservation conflicts with no unified system

Managers

No real-time visibility into sales performance or operational bottlenecks

Delivery Personnel

Inefficient route planning with no live order status or GPS integration

Research & Design Artefacts

Restauranteur Impact-Complexity Matrix

User Impact-Complexity Matrix

AFI Admin Impact-Complexity

Delivery Agent Impact-Complexity

Use Case Diagram

Key Stakeholders Map

Empathy Mapping

Ideas from Pain Points

Ideas Grouped by Actor

Ideas from Opportunities

Customer Journey: Reservation

Customer Journey: Order

AFI Admin Journey Map

Restaurateur Journey Map

Delivery Agent Journey Map

Wireframes & High-Fidelity Designs

Wireframe: Screen 1

Wireframe: Screen 2

Wireframe: Frame 1

Wireframe: Frame 2

Wireframe: Frame 6

High Fidelity: Frame 3

High Fidelity: Frame 5

High Fidelity: Frame 5b

High Fidelity: Frame 8

Key Features

Integrated payment gateway (cards, digital wallets, cash on delivery)
Real-time push notifications across all user roles
GPS-enabled delivery route optimisation
Manager dashboards with live data visualisation
Interactive order and reservation tracking
WCAG-compliant accessible design across all components

Technical Stack

FrontendReact.js, Angular
BackendNode.js, Express
DatabaseMongoDB
InfrastructureAWS hosting
IntegrationRESTful APIs, payment gateways, GPS
DesignFigma (wireframes + high-fidelity)