Priyank Shah
Product Designer
Priyank Shah
Product Designer
Designing an end-to-end solution to order doorstep fuel
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.
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
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
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
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.
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.
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
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
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 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
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
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
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
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
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. I think he is a bit too much into a single style and can improve upon that.
Denislav Jeliazkov
Founder, UI Learn / Figura
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
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
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
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
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
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
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
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
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
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
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