2 UX designers,
1 product manager,
1 product head
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.
Reduce repeated driver errors that were resulting in fueling failures.
Generate money through advertising and merchant partnerships.
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.
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.
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
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 in progress
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.
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
Huge reduction in fueling failures resulting in quicker fueling for drivers.
Illustrations brought personality to Car IQ products, improving overall brand recognition.
While Car IQ Pay grows, users are continuously satisfied with their app experiences.