Spetrol – Consumer mobile app

Delivering fuel to businesses and consumers at desired location

Consumer App UI Showcase
User Research
Information Architecture
Visual Design
Interaction Design
Design to Code Audit
Consumer Application
Driver Application
Admin Panel
Marketing Website
Pitch Deck
Marketing Assets
June 2021 - August 2021

Industries, commercial buildings, Telecom towers, agriculture machinery, other businesses, etc. are dependent on power generators which constantly consume a heavy amount of diesel.

There are prescribed guidelines for handling transport and storage of Diesel. Still, fuel procurement is done in a hazardous manner. Fuel is carried in plastic containers, barrels, and canisters that are risky. Apart from businesses, we, citizens also waste a lot of time in traffic and travelling long distances sometimes to reach a fuel station.

How might we fulfil all the fuel requirements of businesses and customers while remaining intact to safe and reliable deliveries?

Project Goals –

  • Build a complete end-to-end solution for to manage and track fuel delivery and usage.
  • Should be as simple as ordering food online.
  • Cater both B2B and B2C customer base in one consumer app.

Desk research

I went ahead to understand how can I design an experience which feels exactly the same as physically going to the fuel station and getting fuel filled. For that, I had to explore on how the fuel delivery process is carried out currently. With a clear goal in mind, I collected as much information as I could through the internet.

The goal of the desk research was to understand and extract the complete fuel delivery process and an outline of the fuel industry.
Spetrol Desk Research

Competitive analysis

I wanted to gather information about the direct and indirect competitors. I made a matrix to visualise where Spetrol is to be placed along the lines of target audience and visual design.

I also screenshot some of the best practices and interesting insights that I found from these competitors and similar applications.

Spetrol Inspiration

Information architecture

I mapped a complete information architecture which included all the end-states and screens that are to be included in the design. This was to get a deeper understanding of all the requirements on a bird-eye view.

Spetrol Information Architecture


I mapped the flow visually through low-fidelity wireframes. The outcome was 4 different flows: user registration and onboarding, fuel ordering, asset management, and order history.

Spetrol Wireframe Showcase
Spetrol Wireframes Showcase

User registration

After a few iterations and fixes in the low-fidelity flow, we agreed to move forward in defining the brand and high-fidelity version.

Home Page Variations

Showing all the edge cases and possibilities in a design is as important. Hence, I presented all possible variations in home page being the first major checkpoint in the fuel ordering process.

It is feels similar to ordering a cab (like Uber, Ola) but for fuel. You can see in real-time if there are any fuel trucks in the map around you. There is a major focus on the fuel prices as they vary everyday in amount. You can change the address you want your fuel to be delivered as well.

Fuel Ordering Flow

The most important flow in this project was to order fuel. After many iterations and meetings with client, we finalised a straight and simple flow for ordering fuel at given location. We made sure that the flow caters both B2B and B2C customers.

Order History

It is important to keep a log of all past and ongoing orders for customer’s reference. Hence, I showed a tabbed layout for clear distinction between ongoing and past orders. If there are no orders, each tab has its own empty state screen which motivates the user to make fuel orders.

Spetrol Order Screens
(Left) Empty order state. (Middle) Past orders list view. (Right) Ongoing order cards with related actions.

Profile and Miscellaneous Screens

To ensure a perfectly designed product, I didn’t compromise on the miscellaneous screens such as profile, my addresses, my assets, and in-app help centre.

Spetrol Profile Screens
(Left) Profile and settings. (Middle) Change PIN. (Right) Logout confirmation modal
Spetrol Payment Screens
(Left) Empty payment methods state. (Middle) Add new Debit/Credit card sheet. (Right) Remove saved methods.
Spetrol Address Screens
(Left) Empty address state. (Middle) Saved addresses list. (Right) Add new address sheet.

Component Library and Style Guide

Spetrol style guide and component library was built as a one-stop for developer reference and future scalability in mind. All components have been built effectively using the most advance Figma Auto-Layout features.

Spetrol Component Library 01
Component Library (part 1) – Inputs, Top Navigation, Search Fields
Spetrol Component Library 01
Component Library (part 2) – Lists, Buttons, Map elements, Tabs, Tags, List Heading

Design to Code Audit

As I was the only designer on the team, I ensured that all the designs were translated into code as pixel perfect. After various collaboration meetings with the developers, I performed a visual audit to make sure all designs are replicated 1-1 in the final products.

Spetrol Design to Code Audit
Contextual annotations to bugs, design discrepancies, or general notes attached to developed screens.


After a successful launch and marketing campaign in target area, within 3 months Spetrol achieved:


Regular Monthly Customers


Litres of Diesel Delivered


Rupees in Revenue