# Quicrefil App Design — case study

> 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.

- **Client:** Quicrefill
- **Type:** client
- **Industry:** Energy delivery
- **Role:** UI/UX design
- **Platform:** Mobile apps (customer, vendor & rider) · web admin
- **Tools:** Figma
- **Status:** Designed in Figma; V2 sections already started in the same file

- Case study: https://ministar-samuel.com/project/quicrefil-app-design
- Figma file: https://www.figma.com/design/Wh3UG5enoJIN3FwAbHm6xU/Quicrefil-Design?node-id=0-1

![Figma canvas: the Main Flow Gas frames from Home to Rating, with Saved addresses, Add address and the fuel flow below](https://ministar-samuel.com/covers/quicrefil-app-design.webp)

## 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](https://ministar-samuel.com/project/quicrefill).

- **3** Apps in one Figma file
- **4** Energy services on Home
- **≈130** Top-level frames on the Customer page

## Challenge

> Order cooking gas, diesel, petrol or top up electricity — all from your phone.
>
> — quicrefill.com, home page

*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.

![Quicrefil splash screen: the drop logo and “Everything energy in one place” on amber, with a dark arrow button](https://ministar-samuel.com/case-studies/quicrefil-app-design/figma/01-splash.webp)
*Splash — “Everything energy in one place.”*

## 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.

![Quicrefil Home: delivery address and wallet balance on an amber header, four service tiles, recent orders with status, and the tab bar](https://ministar-samuel.com/case-studies/quicrefil-app-design/figma/02-home.webp)
*Home (sample data)*

## 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** (flowchart):

1. Customer orders — Picks a vendor and a cylinder size, then pays by transfer, from the wallet or on delivery.
2. Web admin — Sees every order by status — completed, in progress, cancelled, disputed, in transit — alongside vendors, riders and withdrawals.
3. Vendor accepts — The customer sees “Waiting for vendor to accept order” until it does.
4. Rider collects and delivers — “Rider on their way to pick your cylinder”, then “In transit”.
5. 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.
6. Customer rates rider — One to five stars and an optional comment.

*Mapped from the order timeline, the rating screen and the admin dashboard’s filters.*

## 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)** (flowchart):

1. Splash & onboarding — A splash screen and three onboarding screens.
2. Sign up / log in — Email verification, OTP, and forgot / create password.
3. Home — Delivery address, wallet balance, four service tiles, recent orders and top vendors. Tabs: Home, Accessories, Orders, Profile.
4. Refill gas or fuel — Gas has its own main flow; diesel and petroleum share a second one.
5. Accessories — Categories, items and item details.
6. Wallet — Balance, top-up, history and vouchers.
7. Profile — Saved addresses, profile pages, help & feedback and complaints.
8. Checkout & order
9. Accessories checkout
10. 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** (flowchart):

1. Cooking Gas tile — One of the four service tiles on Home.
2. Vendors on a map — Price pins around the delivery address; a sheet lists vendors with status, price per kg, delivery time and rating.
3. Cylinder size — Size cards with prices, or a typed refill size. Delivery is priced on the next page, and the note says so.
4. Checkout — Deliver ASAP, address, phone and a delivery note; pay with transfer, on delivery or from the wallet.
5. Order & tracking — Status bar, delivery code and the full bill; a timeline (received, accepted, in transit, completed), a live map and “Rider has arrived!”.
6. Rate rider

*Diesel and petroleum follow the same steps, with an amount and a pump instead of cylinder sizes.*

## 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.

Wireframes: Vendors (phone), Cylinder size (phone), Order (phone).

*Drawn from the final frames, not from original wireframes.*

## 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.

- **Amber** #ffc533 — Home header, rating stars
- **Honey** #ffd366 — Splash background, active tab pill
- **Deep amber** #ffb600 — Logo drop, button gradient, accent links, delivery code
- **Charcoal** #2c2c2c — Text, wordmark, splash button
- **Linen** #f7f6f2 — Chips and the code panel
- **Mist** #f5f5f5 — Page background
- **Completed** #2bbd6f — Status: completed
- **Cancelled** #dc5513 — Status: cancelled

- **Plus Jakarta Sans** — 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.

![Figma definitions board: six colour swatches, Plus Jakarta Sans in three weights, font sizes, primary button states, tab-bar states, the logo and order cards](https://ministar-samuel.com/case-studies/quicrefil-app-design/figma/09-definitions.webp)
*Figma · definitions board: colour, type and sizes, the primary button’s states, a tab bar in four states, and order cards.*

## Key screens

**1. 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.

![Refill gas: a map of Gwarinpa with naira price pins, and a sheet listing gas vendors with status, price and rating](https://ministar-samuel.com/case-studies/quicrefil-app-design/figma/03-refill-gas.webp)

**2. 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.

![Vendor screen: Gas Hub card, a large gas cylinder, cylinder size cards with 12 kg selected, a refill size field, a delivery note and a Continue ₦18,000 button](https://ministar-samuel.com/case-studies/quicrefil-app-design/figma/04-refill-vendor.webp)

**3. 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.

![Order 001120: waiting for vendor to accept, delivery address, order details, delivery confirmation code 1585 and the amount paid](https://ministar-samuel.com/case-studies/quicrefil-app-design/figma/05-refill-order.webp)

**4. 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.

![Order timeline sheet: waiting for rider, a Track order button, and four pending stages from order received to order completed](https://ministar-samuel.com/case-studies/quicrefil-app-design/figma/06-refill-timeline.webp)

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.

![Wallet: balance card with Top-up, History and Apply voucher, and a list of recent payments](https://ministar-samuel.com/case-studies/quicrefil-app-design/figma/07-wallet.webp)
*Wallet*

![Rate rider: three of five stars selected, a comment box and a Done button](https://ministar-samuel.com/case-studies/quicrefil-app-design/figma/08-rating.webp)
*Rate rider*

## 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.

![Six versions of the Quicrefill Admin dashboard side by side: the default view, then its filter menu and order-status, payment-type, service-type and date pickers open](https://ministar-samuel.com/case-studies/quicrefil-app-design/figma/10-admin-dashboard.webp)
*Web Admin · Dashboard Metrics: the default view, then the filter menu and each of its pickers (sample figures).*

*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](https://ministar-samuel.com/project/quicrefill) 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** (flowchart):

1. V1 · three apps
2. V2 Vendor Mobile App — A section on the Rider page.
3. V2 Updates — A section on the Rider page.
4. V2 Solar — A section on the Web Admin page.

*From the file’s page listing; what these sections contain isn’t covered here.*

*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

---
By Samuel Ministar · https://ministar-samuel.com/project/quicrefil-app-design