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?

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.

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.

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

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.

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

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

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

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.

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.

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

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.

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.

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

500+ regular monthly customers

5,00,000+ litres of diesel delivered

3,00,00,000+ rupees in revenue