Priyank Shah

Presently at DevRev

Priyank Shah

Presently at DevRev

Back

Spetrol

Designing an end-to-end solution to order doorstep fuel

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.

The problem

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

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.

Expanding the problem

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.

Building the product

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.

Spetrol Wireframes Showcase

Now let's look at the high fidelity prototypes and designs done for these key flows.

User registeration

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

Changing delivery address and navigation from home page

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

Checking past orders

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.

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

My profile and miscellaneous screens

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.

(Left) Profile and settings. (Middle) Change PIN. (Right) Logout confirmation modal

(Left) Empty payment methods state. (Middle) Add new Debit/Credit card sheet. (Right) Remove saved methods.

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

Component Library (part 1) – Inputs, Top Navigation, Search Fields

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.

Contextual annotations to bugs, design discrepancies, or general notes attached to developed screens.

Outcomes

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

Published on 25-03-2024, 4:44 AM

  • Priyank's work ethic, performance and diligence exceeded my expectations, and he would always happily over deliver on every project at Mizko Media.

    Michael Wong

    Founder, Designership

  • It is amazing how quickly Priyank can take complex problems and make them effortlessly simple, a talent and finesse that not all designers possess.

    Ram Budime

    CBDO, ShiftBits

  • Priyank is a great problem solver. I’m consistently impressed by his ability to take complex outlines and turn them into visually engaging designs.

    Stephen Wise

    Founder, DemandFlow

  • Even if the project was complex and early stage, Priyank demonstrated to me that he is a good problem solver.

    Julien Fischer

    Creative Director & Brand Consultant

  • Working on projects big and small, Priyank just puts the effort needed to get it of the ground. I think he is a bit too much into a single style and can improve upon that.

    Denislav Jeliazkov

    Founder, UI Learn / Figura

The Vault

COMING SOON

BENGALURU, INDIA

  • Priyank's work ethic, performance and diligence exceeded my expectations, and he would always happily over deliver on every project at Mizko Media.

    Michael Wong

    Founder, Designership

  • It is amazing how quickly Priyank can take complex problems and make them effortlessly simple, a talent and finesse that not all designers possess.

    Ram Budime

    CBDO, ShiftBits

  • Priyank is a great problem solver. I’m consistently impressed by his ability to take complex outlines and turn them into visually engaging designs.

    Stephen Wise

    Founder, DemandFlow

  • Even if the project was complex and early stage, Priyank demonstrated to me that he is a good problem solver.

    Julien Fischer

    Creative Director & Brand Consultant

  • Working on projects big and small, Priyank just puts the effort needed to get it of the ground. I think he is a bit too much into a single style and can improve upon that.

    Denislav Jeliazkov

    Founder, UI Learn / Figura

The Vault

COMING SOON

BENGALURU, INDIA

  • Priyank's work ethic, performance and diligence exceeded my expectations, and he would always happily over deliver on every project at Mizko Media.

    Michael Wong

    Founder, Designership

  • It is amazing how quickly Priyank can take complex problems and make them effortlessly simple, a talent and finesse that not all designers possess.

    Ram Budime

    CBDO, ShiftBits

  • Priyank is a great problem solver. I’m consistently impressed by his ability to take complex outlines and turn them into visually engaging designs.

    Stephen Wise

    Founder, DemandFlow

  • Even if the project was complex and early stage, Priyank demonstrated to me that he is a good problem solver.

    Julien Fischer

    Creative Director & Brand Consultant

  • Working on projects big and small, Priyank just puts the effort needed to get it of the ground. I think he is a bit too much into a single style and can improve upon that.

    Denislav Jeliazkov

    Founder, UI Learn / Figura

The Vault

COMING SOON

BENGALURU, INDIA