Car IQ Pay - Fueling

Revamping fueling

Client

Car IQ

Project

Mobile app

Duration

6 months

Team

2 UX designers,
1 product manager,
1 product head

My role

Illustrations, UI design, visual design

Overview

Background

Car IQ Pay is a mobile payment app for fleet drivers to pay for numerous vehicle services, such as fueling, parking and maintenance.

The mobile app had two main problems, 1) while the mobile app allowed drivers to perform a series of different vehicle services, fueling was its core function and drivers were experiencing a number of fueling failures and 2) Car IQ relied heavily on investment funding and needed to diversify their revenue streams.

Alongside 2 other UX designers, I outlined and redesigned the steps for the fueling flow to create an intuitive and seamless fueling experience for drivers and alternative revenue opportunities for Car IQ.

Goals

Seamless driver experience

Reduce repeated driver errors that were resulting in fueling failures.

Revenue

Generate money through advertising and merchant partnerships.

Refining the Fueling Flow

What was happening under the hood

Drivers were having difficulty fueling their vehicles while using a mobile app. They were either lifting the nozzle too early or forgetting altogether to lift the nozzle while pumping gas. These actions caused failures that would then require drivers to restart the fueling process, causing a lot of frustration for them.

Keeping it simple

Since fleet drivers are constantly on the go, I had to design the fueling flow to be easy-to-use. Drivers might be driving when using Car IQ Pay to navigate to and find fuel services so it was important to allow the app to be used with one hand or in a quick glance.

Dashboard screens

Drivers would be able to quickly tap to the fuel stations around them and filter through specific fueling needs, including by fuel type and gas stations. Once drivers select a station and input the pump number, they'll be met with an interstitial loading screen as the pump is being authorized. This screen was pertinent in reducing fueling failures and needed to signify to the driver to not lift the nozzle.

Easy to navigate to fuel stations

Nearby fuel stations

Search for specific fuel stations

Authorizing fuel pump

Fueling in progress

I went through many design iterations of the fueling instructions including carousels and modals, while ultimately landing on a single page experience so drivers can view all the fueling steps at once. This kept the screen from looking over-cluttered and instructions readily available for drivers that need them.

Even while fueling is in progress, drivers will be able to navigate in and out of the fueling flow through a bottom status bar. Once the fueling process is complete, they'll be prompted with a complete receipt detailing their fueling purchase.

Enter fuel pump number

Fueling instructions

Fueling in progress

Receipt confirmation

Upholding accessibility standards

Throughout this revised fueling flow, I ensured that the app met WCAG standards across the board including, but not limited to contrast, tap targets, and different states.

Bring on the Partnerships

Introducing driver deals

I integrated driver deals into the fueling flow as drivers would need to pause here while their vehicles are fueling. These driver deals generated revenue for Car IQ through advertising and merchant partnerships. Making sure that these advertisements wouldn’t be intrusive to the rest of the app experience, I designed them to be secondary to the rest of the screen.

Driver deals screen

Driver deals within fueling flow

Impact

Increase in successful first-time driver fueling

Huge reduction in fueling failures resulting in quicker fueling for drivers.

15+

Merchant parternships signed

Illustrations brought personality to Car IQ products, improving overall brand recognition.

5.0

App star rating

While Car IQ Pay grows, users are continuously satisfied with their app experiences.