I design for people.
fueltime intro.png

Fueltime

A familiar approach to mobile refueling
(iOS, 2019)

fueltime-main.png

Brief

As participants of Beginex’s Mini Hackathon series, my team worked on a mobile redesign for Fueltime, a B2B2C mobile refueling startup targeting Silicon Valley companies with large campuses. The goal of this redesign was to improve how an existing, logged-in user can order fuel from Fueltime.

We had four hours to design wireframes, create a prototype, and present our idea to a three-person panel consisting of our client and two other startup founders under the Starta Accelerator in New York City.

Our team won Best Overall Design for this project.

 
 
This looks easy to use. I can see myself using this app.
— Evgeny Krasnov, Legal Counsel at Starta Accelerator
 
 

Client

Fueltime (fueltime.co)
Anatoly Ovchinnikov, Founder

Responsibilities

Whiteboarding, Strategy, Feature Prioritization, High-Fidelity Mockups, Prototype, Presentation

TOOLS

Sketch, InVision, Google Suite

 
 

Our Winning Team

fueltime team.png
 
 
 
InVision Prototype

InVision Prototype

 
 
 

Our Client

Fueltime

fueltime.co

logo.png

Fueltime is a mobile gas station that helps drivers and companies refuel cars cheaper and drive less. For the last century, drivers had to go to gas stations to refuel their vehicles; with Fueltime, people can do that simply by using their smartphones.

Fueltime can also provide additional services like pumping up tires, wiping the windshield and more. The product saves users time and money, while reducing drivers’ carbon footprint.


Competitors

Booster (Trybooster.com)
Filled (Filld.com)
Gas Ninjas (Gasninjas.com)
Yoshi (startyoshi.com)

 
 
 

The Current Product

 
 

Product Constraints

  • Fueltime cannot open gas cap in the car; the customer has to open it.

  • Fueltime service is performed by 1000 gallon refueling vehicle.

  • Refueling can be performed only by licensed vehicles.

Process Constraints

  • 4-hour time frame places hard limits on depth of research and scope of redesign

 

The Problem

Mobile refueling will save customers time and money, but it is a relatively new concept that users may find intimidating.

How might we empower car owners to take advantage of this innovative, convenient new fueling solution?

 
 
fueltime_mockup_1.png
 

Our Strategy

UBER-ize it!

Fueltime’s current mobile interface looks clean at first, but the current checkout process includes several redundant steps that can result in drop-off.

Since Fueltime is essentially positioning itself as the UBER of fuel, why not design a familiar interface that reflects that?

We decided to prioritize:

  • Cleaner navigation. Aside from the home page, all other tab functions can be housed within app settings

  • Removing redundant options. If the target users are employees at a specific tech campus, options such as car type, location, and fuel type are unlikely to change with every order.

  • Avoiding long scrolling pages. We wanted to condense and simplify the checkout process as much as possible.

Due to time constraints, we de-prioritized other sections of the Fueltime app such as “Add a Car,” “My Cars,” “My Orders,” “Settings,” “Promotions,” “Settings,” and “Ratings.”

 
 
 

Proto-Persona

persona.png

Bernard Smith, 32

“It’s 2019. Why do we still use gas stations?”

Bernard is a Product Manager at Google in Menlo Park, CA. He’s been extremely routine-based all his life: he’s single, he wakes up at the exact same time and starts each day with a Soylent shake, and he’s driven the same Honda to work since his first Google internship. He spends most of his time between home and work and doesn’t have much time to do anything else unless he’s traveling.

Bernard uses an app for everything. He orders everything online. Why can’t he do the same to refuel his car?

 
 
 

Information Architecture

Original Flow. Click to enlarge.

 

Revised Flow. Click to enlarge.

 
 

Whiteboarding

whiteboard.png
 

Wireframes & Prototype

01.

Home Screen

Green areas on the campus map indicate Fueltime’s scheduled service areas for the next day.

Menu

All profile settings including the user’s cars, workplace, and referral code are housed in the same menu.

Car Picker

User’s primary car is selected by default.

Time Picker

User determines the next day’s fuel delivery time.

fueltime_wireframe1.png
 

02.

Fuel Types

User can scroll among different types of fuel.

Savings

Each fuel selection shows the difference between Fueltime’s prices and retail gas prices.

Custom Fuel Slider

A horizontal slider lets users customize the amount of gas they want. The price updates dynamically.

fueltime_wireframe2.png
 

03.

Additional Services

Users can request Fueltime for additional services such as tire checks and cleaning, for an extra cost

Apple Pay

Users can use Apple Pay for easy checkout.

Confirmation

A message confirms their order, which will then appear under the Active Tab of the “My Orders” page.

fueltime_wireframe3.png
 

Clickable Prototype (InVision)

 
 

Feedback

Our design received positive feedback from the judge panel, which consisted of Fueltime Founder & CEO Anatoly Ovchinnikov, Mobip CEO Jean-Philippe Desmontils, and Starta Accelerator Legal Counsel Evgeny Krasnov.

The judges praised our decision to use a familiar design that empowered users to try a new type of service.

Our team won Best Overall Design, beating six other teams.

 
 
 

Next Steps

Conduct thorough user research to gain a better understanding of Fueltime’s target end-users.

Refine mobile UI to make it less UBER-y, and more robust to include error, confirmation, and inactive states.

Account for variations on “Full Tank” cost, since the cost of a full tank depends on the existing fuel levels and size of the tank.

Add and adjust microcopy to inform users that FuelTime allows users to schedule next day refueling, and to remind users to open their gas caps in order to receive fuel.

Redesign other features that were de-prioritized due to time constraints.

 
 

Team Credits

Henry McNally - Whiteboarding, Strategy, Information Architecture

Shaikat Haque - Strategy, Presentation Design