Car IQ Pay - Fueling

Revamping fueling


Car IQ


Mobile app


6 months


2 UX designers,
1 product manager,
1 product head

My role

Illustrations, UI design, visual design



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.


Icon for seamless, golden ratio
Seamless driver experience

Reduce repeated driver errors that were resulting in fueling failures.

Icon for revenue, clock with coin stacks in front

Generate money through advertising and merchant partnerships.

Array of Car IQ Pay mobile phone mockups.

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.

Hand holding a mobile phone mockup of Car IQ dashboard.

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.

Mobile phone mockup of navigating to a fuel station.

Easy to navigate to fuel stations

Mobile phone mockup of available 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.

Mobile phone mockup of entering a pump number.

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.

Different states for text input fields.
Different states for buttons and cards.

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.

Promotional driver deal cards
Mobile phone screen showcasing a series of driver deals.

Driver deals screen

Fueling screen showing a driver deals toast pop-up at the bottom.

Driver deals within fueling flow


Icon for success, person holding up a finished product
Increase in successful first-time driver fueling

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


Merchant parternships signed

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


App star rating

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