Client · Energy delivery
Quicrefil App Design
Product design for on-demand energy delivery: a customer app for ordering cooking gas, petrol, diesel and electricity top-ups, an app for vendors and riders, and a web admin — three apps in one Figma file.
Contents · Overview
Overview
Quicrefill delivers energy on demand: cooking gas, petrol, diesel and electricity top-ups, ordered from a phone. This project is the product design behind it — one Figma file holding three apps: the customer app, an app for vendors and riders, and a web admin for the team that runs the platform.
This case study follows the customer’s main job — refilling a gas cylinder — from the home screen to rating the rider, then looks at the visual system and at the vendor and admin side. The marketing website is a separate project: the Quicrefill website.
Challenge
“Order cooking gas, diesel, petrol or top up electricity — all from your phone.”
the problem
One order, several hands.
Behind that line sits a service with several parties. A customer orders; a nearby vendor, with its own price, accepts; a rider collects the cylinder and brings it back; and the bill adds a delivery fee and a service charge.
The brief for the app was short: ordering a refill should take seconds, even for someone on the move or opening the app for the first time. The design work was keeping everyone else out of the customer’s way — price, vendor, payment and progress had to read at a glance.
Goals
what the screens had to do
- Seconds to order. A short, linear refill flow from a one-tap tile on Home.
- Price before commitment. Prices on the map and the size cards, and the whole bill before paying.
- Always know where it is. One order screen with a status bar, a timeline and a delivery code.
- Big, easy targets. Large service tiles and full-width buttons for people on the move.
home
Everything starts one tap away.
Home answers the first questions in order: where it’s going (the delivery address, with a dropdown to change it), what you can spend (the wallet balance, which an eye icon hides), and what you want — Cooking Gas, Petroleum, Diesel, Electricity as four large tiles.
Below them, recent orders say their status in a word and a colour — “Completed” in green, “Cancelled” in orange — next to the price and a link to the order. The tab bar holds Home, Accessories, Orders and Profile.
Research & discovery
The work starts from the order rather than the screens: who touches it, in what order, and what each of them needs to see at that moment. Mapped that way, one gas refill passes through four hands — the customer, a vendor, a rider and the operations team — and each gets an app or a view of their own.
Two things shaped the customer side. Price isn’t fixed: every vendor sets its own, per kilogram for gas and per litre for fuel, so choosing a vendor means weighing price, distance, delivery time and rating together. And the customer hands over a cylinder, so trust matters — who is coming, when, and proof at the door.
One gas order, four parties
- Customer orders — Picks a vendor and a cylinder size, then pays by transfer, from the wallet or on delivery.
- Web admin — Sees every order by status — completed, in progress, cancelled, disputed, in transit — alongside vendors, riders and withdrawals.
- Vendor accepts — The customer sees “Waiting for vendor to accept order” until it does.
- Rider collects and delivers — “Rider on their way to pick your cylinder”, then “In transit”.
- Handover at the door — The rider’s name, number, call and chat buttons; the customer’s order screen carries a four-digit delivery confirmation code.
- Customer rates rider — One to five stars and an optional comment.
Information architecture & flows
The customer app has four tabs, and the Customer page in Figma is grouped the same way: sign-up and log-in, Home and the refill flows, an accessories shop with its own checkout, the wallet and its funding states, saved addresses, profile, and help & feedback.
Customer app (Figma · Customer page)
- Splash & onboarding — A splash screen and three onboarding screens.
- Sign up / log in — Email verification, OTP, and forgot / create password.
- Home — Delivery address, wallet balance, four service tiles, recent orders and top vendors. Tabs: Home, Accessories, Orders, Profile.
- Refill gas or fuel — Gas has its own main flow; diesel and petroleum share a second one.
- Accessories — Categories, items and item details.
- Wallet — Balance, top-up, history and vouchers.
- Profile — Saved addresses, profile pages, help & feedback and complaints.
- Checkout & order
- Accessories checkout
- Fund wallet — By transfer or by card, each with a success and a failure state.
The refill itself is laid out on the canvas as one row of frames, in the order a customer meets them. Each screen asks for one decision, and the next screen only appears once it’s made.
Main Flow Gas · tile to rating
- Cooking Gas tile — One of the four service tiles on Home.
- Vendors on a map — Price pins around the delivery address; a sheet lists vendors with status, price per kg, delivery time and rating.
- Cylinder size — Size cards with prices, or a typed refill size. Delivery is priced on the next page, and the note says so.
- Checkout — Deliver ASAP, address, phone and a delivery note; pay with transfer, on delivery or from the wallet.
- Order & tracking — Status bar, delivery code and the full bill; a timeline (received, accepted, in transit, completed), a live map and “Rider has arrived!”.
- Rate rider
Screen structure
The file holds finished frames rather than wireframes, so here are three refill screens reduced to their structure. The pattern repeats: what you have already chosen stays pinned at the top — the address, then the vendor, then the order’s status — each screen has one main action, and the running total sits on or just above the button.
Visual design & system
The customer app is warm and plain: amber for anything that moves the order forward, charcoal for text, and white cards on a pale grey page. Status is always a word and a colour together, money is always in naira, and the total sits on or just above the main button.
Waiting for vendor to accept order
The only family: 20 Bold headings, 18 and 16 SemiBold titles, 14 body, 12 labels (definitions board)
The definitions board in the file sets the type and documents buttons, tab-bar states and order cards. It records a blue-and-teal colour set — primary #20A3DF, secondary #4DEADD — rather than the amber of the customer screens, and its tab bar (Home, Services, Orders, Settings) and order cards, which show a customer’s name and delivery address, look like the vendor side. Which app the board was written for isn’t recorded in the file.
Key screens
Pick a vendor on the map
Tapping Cooking Gas opens a map around the delivery address. Each vendor is a price pin; the sheet below lists them with their status — online or offline — price per kg, delivery time or distance, and rating.
Choose a cylinder size
The chosen vendor stays pinned at the top: price per kg, delivery time, distance, orders completed. Below it, cylinder sizes as cards with their prices, an optional typed refill size, and a note that delivery is priced on the next page. The Continue button underneath carries the total.
One screen for the order
After checkout the order has a single home: a status bar, the address and an optional delivery note, the items, a four-digit delivery confirmation code, and the bill — subtotal, delivery fee, service charge, amount paid. A line says any change goes back to the wallet.
Follow it to the door
View timeline opens a sheet with four stages — order received, accepted, in transit, completed — each with a plain sentence and its state. Track order and Contact support sit right above them.
Around the order sit the wallet and the rating. The wallet card repeats Home’s balance with Top-up, History and Apply voucher, and lists money in and out with an arrow and the method — card, wallet or Flutterwave. When the rider arrives, the order ends with a rating out of five and an optional comment.
Vendor, rider & admin
The Rider page covers the other side of an order for two roles — the business owner or vendor, and the rider or delivery rep — with sections for log-in, services, profile management, a help centre, withdrawals, orders and delivery tracking, managing delivery reps, a vendor dashboard and revenue management.
The Web Admin page is the operations console. Its dashboard leads with users, riders, completed services and a satisfaction rating, then revenue split by service, top vendors, recent withdrawals and recent orders. One filter menu narrows it by day or month, order status, payment type (on delivery, wallet, Flutterwave) and service type.
admin areas, from the dashboard’s side menu
- Orders, deliveries, services and accessories
- Users, vendors, delivery reps and staff
- Verification & compliance, fraud watch, audit logs & security
- Revenue, withdrawals and account deletion
- Reports & analytics, crash analytics, feedback
- Operating locations, notifications and system settings
Outcome & learnings
The three apps are designed in one file, and the customer screens now face the public: the live Quicrefill website shows this Home and the vendor map in its hero and on its How it works page. Work on a second version has started in the same file.
The file also shows what to tidy before the next round: the name appears as Quicrefil, Quikrefil and Quikrefill across screens where the live brand is Quicrefill, and the definitions board’s blue-and-teal colours don’t match the amber customer app.
Beyond V1 — sections already in the file
- V1 · three apps
- V2 Vendor Mobile App — A section on the Rider page.
- V2 Updates — A section on the Rider page.
- V2 Solar — A section on the Web Admin page.
open in the file
- One spelling of the brand name across every screen
- One colour set for the definitions board and the customer app
- Copy pass on the timeline stages and wallet history
- The V2 vendor app, updates and solar sections
