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.”
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
InVision Prototype
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?
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
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
Whiteboarding
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.
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.
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.
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