# LOFT: case study by Yusuf Ibrahim (Saint) > The logistics side of Sabi Market: a driver app that confirms every pickup and drop-off, and an admin portal that turns orders into trips. Page: https://madebysaint.xyz/work/loft - Role: Senior Product Designer · At Sabi Africa - Timeline: 2023 – 2024 - Status: Shipped - Shipped: Driver mobile app and logistics admin portal - Tags: At Sabi Africa · Senior Product Designer · Logistics app and admin portal ## At a glance - Problem: Deliveries for Sabi Market ran on paperwork and manual dispatch, with no live view of where a vehicle or an order was. - What he did: Designed across the driver app and the admin portal, task by task with a small design team. - Outcome: Shipped: trips the driver accepts order by order, quantities confirmed at pickup and drop-off, a buyer delivery code, and carrier onboarding with KYC. Hi, this is LOFT, the logistics app I worked on at Sabi Africa. When a shop owner orders on Sabi Market, LOFT is how it gets there. It shipped. Ask away, or just scroll. ## What is LOFT? LOFT is the logistics product behind Sabi Market. Orders placed on the marketplace become trips, and LOFT carries them from supplier to shop. It's two products: a driver app that confirms each step on the road, and an admin portal where the operations team onboards carriers, drivers and vehicles and plans the trips. It shipped. ![Manage deliveries, track orders and verify deliveries](https://res.cloudinary.com/dljwhrpqh/image/upload/f_auto,q_auto,w_900/casestudies/loft/store-3.png) ![Optimise routes, save time, cut costs](https://res.cloudinary.com/dljwhrpqh/image/upload/f_auto,q_auto,w_900/casestudies/loft/store-1.png) ![Collect payment for delivery in the app](https://res.cloudinary.com/dljwhrpqh/image/upload/f_auto,q_auto,w_900/casestudies/loft/store-2.png) ![Track delivery performance](https://res.cloudinary.com/dljwhrpqh/image/upload/f_auto,q_auto,w_900/casestudies/loft/store-4.png) *The store listing for the driver app.* ## What did you do on it? I was a Senior Product Designer at Sabi Africa. Like Sabi Market, LOFT was shared across a small design team and picked up task by task, so I designed across both sides: the driver app and the admin portal. I designed it; Sabi's engineers built it. ## What was broken before? The research framed it plainly: traditional logistics ran on manual paperwork and inefficient dispatching, and without real-time vehicle tracking nobody could see where an order was. That meant delays and higher costs. The goal was a digital flow where every handover is recorded as it happens. - **Before:** Paperwork, manual dispatch and no live view of the vehicle. Delays and costs nobody could trace. - **With LOFT:** Orders become trips in the admin portal, and the driver confirms pickup, quantities and delivery in the app. ## How does a driver take on a trip? A trip bundles several orders. The driver sees the delivery window, the trip's value and every order's pickup and drop-off on a map, then chooses which orders to accept before confirming. They can reject the whole trip. Once confirmed, the app sends them straight to pickup. ![Driver home: assigned and completed trips, each with its orders and value](https://res.cloudinary.com/dljwhrpqh/image/upload/c_fill,ar_9:20,g_north/f_auto,q_auto,w_900/casestudies/loft/new-trips.png) ![Confirm trip: the delivery window, a route map and the orders to accept one by one](https://res.cloudinary.com/dljwhrpqh/image/upload/c_fill,ar_9:20,g_north/f_auto,q_auto,w_900/casestudies/loft/new-trip-detail.png) ![Trip accepted, proceed to pickup](https://res.cloudinary.com/dljwhrpqh/image/upload/c_fill,ar_9:20,g_north/f_auto,q_auto,w_900/casestudies/loft/new-success.png) ## What if the supplier doesn't have everything? It happens, so the app plans for it. At pickup the driver enters the quantity actually available for each item, or reports an issue. The delivery then shows items ordered and items picked up side by side, with the cash due, before the driver starts the trip. Nobody finds the shortfall at the shop door. ![At pickup: select or enter the available quantity for each item, or report an issue](https://res.cloudinary.com/dljwhrpqh/image/upload/f_auto,q_auto,w_900/casestudies/loft/sheet-a.png) ![Delivery details: the timeline, items ordered against items picked up, and Start trip. Phone number blurred.](https://res.cloudinary.com/dljwhrpqh/image/upload/c_fill,ar_9:20,g_north/e_pixelate_region:24,x_140,y_585,w_190,h_45/f_auto,q_auto,w_900/casestudies/loft/home-e.png) ## How do you prove a delivery happened? At the drop-off the driver records the quantity the buyer received for each item, with a reason for any rejection, such as items close to expiry or damaged. The buyer gives the driver a delivery code to confirm the package, and only then does the driver collect payment. Every handover leaves a record. ![Confirm items delivered: the quantity received by the buyer and a reason for any rejection](https://res.cloudinary.com/dljwhrpqh/image/upload/f_auto,q_auto,w_900/casestudies/loft/sheet-b.png) ![Items picked up against items delivered, with near-expiry and damaged items noted. Phone number blurred.](https://res.cloudinary.com/dljwhrpqh/image/upload/c_fill,ar_9:20,g_north/e_pixelate_region:24,x_140,y_645,w_190,h_45/f_auto,q_auto,w_900/casestudies/loft/trip-c.png) ![Enter the delivery code the buyer provides to confirm the package](https://res.cloudinary.com/dljwhrpqh/image/upload/c_fill,ar_9:20,g_north/f_auto,q_auto,w_900/casestudies/loft/c-home.png) ![Package on the way, with Complete delivery](https://res.cloudinary.com/dljwhrpqh/image/upload/c_fill,ar_9:20,g_north/f_auto,q_auto,w_900/casestudies/loft/c-track.png) ## Who gets to drive for LOFT? Carriers are vetted before they dispatch anything. Adding one is four steps, business, contact, bank and KYC documents, from proof of address and CAC certificate to insurance, the executed contract and guarantors' IDs, then a preview and an approve or decline. Each carrier has its drivers (online or offline, and suspendable with a reason) and its vehicles, tracked by capacity and condition. ![Carriers: totals and every carrier with its category and verification status. Contact details blurred.](https://res.cloudinary.com/dljwhrpqh/image/upload/e_pixelate_region:24,x_1150,y_15,w_290,h_70/e_pixelate_region:24,x_500,y_430,w_360,h_420/c_fill,ar_3:2,g_north/f_auto,q_auto,w_1600/casestudies/loft/partners.png) ![Add carrier: business details and the carrier category, structured, semi-structured or unstructured](https://res.cloudinary.com/dljwhrpqh/image/upload/e_pixelate_region:24,x_1150,y_15,w_290,h_70/c_fill,ar_3:2,g_north/f_auto,q_auto,w_1600/casestudies/loft/partner-add.png) ![A carrier's drivers with availability and status. Phone numbers blurred.](https://res.cloudinary.com/dljwhrpqh/image/upload/e_pixelate_region:24,x_680,y_470,w_130,h_490/c_fill,ar_3:2,g_north/f_auto,q_auto,w_1600/casestudies/loft/partner-drivers.png) ![Vehicles by capacity, driver, condition and assignment](https://res.cloudinary.com/dljwhrpqh/image/upload/e_pixelate_region:24,x_1150,y_15,w_290,h_70/c_fill,ar_3:2,g_north/f_auto,q_auto,w_1600/casestudies/loft/vehicles.png) ## How does an order become a trip? In the admin portal, ops selects orders, from Sabi Market or LOFT's own clients, then assigns a vehicle filtered by condition, capacity and status, reviews it and creates the trip. Each order keeps a timeline that tells the truth, including when a driver declined and the package was reassigned, and when it was delivered partially. ![Create trip: select orders by source and status](https://res.cloudinary.com/dljwhrpqh/image/upload/e_pixelate_region:24,x_1150,y_15,w_290,h_70/c_fill,ar_3:2,g_north/f_auto,q_auto,w_1600/casestudies/loft/trip-create.png) ![Assign a vehicle to the selected orders by condition and capacity](https://res.cloudinary.com/dljwhrpqh/image/upload/e_pixelate_region:24,x_1150,y_15,w_290,h_70/c_fill,ar_3:2,g_north/f_auto,q_auto,w_1600/casestudies/loft/trip-assign.png) ![Trips: all, in transit, delivered and declined, with the trip history](https://res.cloudinary.com/dljwhrpqh/image/upload/e_pixelate_region:24,x_1150,y_15,w_290,h_70/c_fill,ar_3:2,g_north/f_auto,q_auto,w_1600/casestudies/loft/trips-admin.png) ![Order detail: a timeline with a declined driver, reassignment and a partial delivery](https://res.cloudinary.com/dljwhrpqh/image/upload/e_pixelate_region:24,x_1150,y_15,w_290,h_70/c_fill,ar_3:2,g_north/f_auto,q_auto,w_1600/casestudies/loft/order-detail.png) ## What does LOFT look like? A deep maroon and a house-shaped mark: LOFT is about getting goods home. I didn't design the logo, but the same palette runs through the screens I worked on, the driver app and the admin portal, and the store listing, where each screenshot leads with one job the app does. ![The LOFT logo](https://res.cloudinary.com/dljwhrpqh/image/upload/c_pad,ar_4:1,b_white/f_auto,q_auto,w_1200/casestudies/loft/logo.png) *The LOFT mark. I didn't design the logo.* ## What did LOFT teach you? That logistics is a chain of handovers, and each one needs a record: what was picked up, what was received, and who confirmed it. That the plan changes on the road, so partial pickups, rejections and reassignments are the normal path, not edge cases. And that the admin and the driver must see the same truth. - **Design the partial path:** Short pickups and partial deliveries happen daily; give them a screen. - **Proof at every handover:** Quantities at pickup, quantities received, and a code from the buyer. - **Vet before you dispatch:** Carrier KYC comes before the first trip, not after the first problem. - **One timeline for everyone:** Declines and reassignments show up for ops as they happen.