Mealport

Mealport is a food ordering and delivery platform connecting customers, restaurants and riders.

We worked across the entire experience: establishing the brand, designing the five products that make the service work, and engineering the mobile apps, marketing website and operational platform.

That scope meant thinking beyond individual screens. Every order moves through several people and systems before it reaches the customer.

Ordering food is the visible part of the experience. Behind it, a restaurant has to receive and prepare the order, a rider has to be assigned and complete the delivery, payments have to move correctly, and Mealport needs visibility over the entire process.

Each person needs something different from the same order.

The challenge was making those individual experiences simple without losing the coordination required between them.

Mealport needed an identity that could live comfortably across consumer, restaurant, rider and operational touchpoints.

We developed the brand alongside the product rather than treating it as a layer added afterwards. The visual language, typography and interface foundations were designed to remain recognisable as the experience moved between marketing, ordering, fulfilment and delivery.

Rather than designing five independent products, we used the order lifecycle as the thread connecting them.

A customer places an order. The vendor receives it. Mealport coordinates fulfilment. A rider completes the delivery. Each interface presents a different view of the same underlying process.

Customers need confidence and visibility. Vendors need to respond quickly. Riders need to know what to do next. Operations needs oversight.

We reduced each experience around those responsibilities instead of exposing the complexity of the whole system to everyone.

Discovery, restaurant browsing, ordering, checkout, payment and order tracking were brought into one continuous customer journey.

The rider experience focuses on assignment, pickup and delivery, keeping the next action clear while updating the wider system as the order moves.

The operational layer gives Mealport a wider view of the marketplace, including active and historical orders, vendor and rider applications, users, payments, support and platform settings.

With five products sharing the same underlying processes, consistency needed to extend beyond appearance.

We established reusable typography, components, states and interaction patterns across the product while allowing each platform to behave appropriately for its user and context.

The result is a shared design language rather than five interfaces that simply look alike.

Designing across the whole ecosystem also meant we could carry the same product logic into implementation.

The mobile experiences were built in Flutter, while the marketing website and Admin Platform use Next.js and TypeScript. Paystack handles the payment layer, including the transaction flows required between customers, Mealport and vendors.

Shared patterns were translated into reusable implementation wherever practical, helping the designed states and behaviours remain consistent as the products moved into development.

The Mealport apps progressed through implementation into testing and deployment, including the separate customer, vendor and rider experiences.

This stage exposed the less visible parts of the product: edge cases between order states, onboarding and verification, payment behaviour, notifications and the handoffs between vendors, riders and operations.

Resolving those relationships was as important as refining the interfaces themselves.

The engagement produced a connected set of brand, product and engineering outputs across Mealport's public and operational experience.

Mealport progressed from an early product proposition into a functioning ecosystem spanning ordering, restaurant operations, delivery and internal management.

The five core platforms now share the same product logic and are moving through testing and deployment, giving Mealport a foundation for its initial restaurant service and future expansion.

Mealport made one thing particularly clear: the quality of a multi-sided product is often determined by what happens between its interfaces.

Designing and building the ecosystem together allowed us to see those dependencies early. A change to an order state wasn't simply a change to one screen; it could affect a customer waiting for food, a restaurant preparing it, a rider expecting an assignment and an operations team trying to understand what was happening.