Priyank Shah

Presently at DevRev

Book a call

Priyank Shah

Presently at DevRev

Back

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

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

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

Role

Product Designer

Collaborators

Just me

Timeline

Jun 2021 – Oct 2021 (5 months)

Role

Product Designer

Collaborators

Just me

Duration

Jun 2021 – Oct 2021 (5 months)

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.

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.

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.

Problem

Problem

Problem

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

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

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

Goals

Goals

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.

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

  • 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

Expanding the problem

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.

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.

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.

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.

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

Building the product

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.

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.

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.

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.

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.

User registeration

User registeration

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.

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

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

Changing delivery address and navigation from home page

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.

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.

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 fuel ordering flow

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.

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.

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

Checking past orders

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.

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.

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.

My profile and miscellaneous screens

My profile and miscellaneous screens

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.

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.

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.

Component library and style guide

Component library and style guide

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

Design to code audit

Design to code audit

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.

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.

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.

Outcomes

Outcomes

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

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

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

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

    Denislav Jeliazkov

    Founder, UI Learn / Figura

  • I don't say this often... Priyank is a diamond in the rough!

    Spencer Scott

    Founder, Median

  • Without him both of my projects would be stuck in newsletter-only land. Already brainstorming what he can help me build next.

    Ryan Gilbert

    Publishing Workspaces + H1 Gallery

Email

Cosmos

Reads

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.

    Denislav Jeliazkov

    Founder, UI Learn / Figura

  • I don't say this often... Priyank is a diamond in the rough!

    Spencer Scott

    Founder, Median

  • Without him both of my projects would be stuck in newsletter-only land. Already brainstorming what he can help me build next.

    Ryan Gilbert

    Publishing Workspaces + H1 Gallery

Email

Cosmos

Reads

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.

    Denislav Jeliazkov

    Founder, UI Learn / Figura

  • I don't say this often... Priyank is a diamond in the rough!

    Spencer Scott

    Founder, Median

  • Without him both of my projects would be stuck in newsletter-only land. Already brainstorming what he can help me build next.

    Ryan Gilbert

    Publishing Workspaces + H1 Gallery

Email

Cosmos

Reads

COMING SOON

BENGALURU, INDIA