CloudTrucks is working with Roady’s to integrate their discounted fuel API to provide truck drivers with more affordable fuel. In this project, we designed an in-app fuel reservation feature which allows drivers to look for discounted fuel in the fuel map and reserve fuel in advance. It has helped divers save $17.9 on fuel per reservation on average. The V2 design launch also saw a 351% increase in fuel reservation.
Fuel purchase is the biggest expense for truck drivers. In order to help truck drivers with fuel expenses, CloudTrucks provides fuel discounts through different fuel partners. However, it's not used a lot by drivers and fuel expense still remains a churn factor.
In order to understand the problem better, we uncovered insights from interviewing 2 drivers and talking with ops team. We found out:
• Drivers are not aware that we are offering different types of discounts in app already.
• Distance is more important than discounts. Drivers are not likely to make detour for a discounted price.
• Drivers are using other products because the current discount providers didn't cover enough areas, making it hard to use.
Then I led a round of UX audit with PM to figure out what is not working with our existing discount program.
After we understood the current problems, the product team decided to work with Roady's to integrate their fuel discount API. Because this gives us an opportunity to provide in-app real-time fuel reserving feature for drivers, and unlock significant discounts at 125+ Roady's participating locations.
We decided to build an in-app fuel reservation feature for drivers. For this project we finalized 3 main goals:
• Improve discoverability and UX of discount program.
• Generate revenue from driver purchasing fuel with CloudTrucks issued cards.
• Increase the usage of CloudTrucks discount program
To measure whether we succeed on each goal. I partnered with PM and Engineer to define the OKRs.
To have a clear vision for our discount program, I partnered with pm and engineer to brainstorm solutions to improve the fuel purchase experience with Roady's API. Then we evaluated each ideas based on UX and business impact, also engineering and design lift, and came up with a final roadmap for the discount program.
And one of the most important plans we made was to build an interactive map where users can find discounted fuel locations in V1. Because user research told us that being able to see the location is very important for drivers when they are planning their trip route.
Validate hypothesis 1 - Low UI discoverability
Our first hypothesis on discoverability issue is caused by low UI discoverability. With limited time and engineering resource, this was the easiest hypothesis that we can quickly validate. So we did a band-aid fix by adding this green banner on the top in V1, followed by a quick update by adding fuel discount on the home page. But our metrics showed it was not working. Our conclusion is Surfacing more UI doesn't work.
Validate hypothesis 2 - Workflow friction
Another hypothesis that this is caused by workflow friction - when drivers book jobs, they have no info about discounted fuel locations and that makes it difficult for them to plan going to a discounted fuel stop in their trips. So we leveraged the existing map in the job detail page, showing trip route and discount fuel stops along the route, so that drivers can see all discounts locations when they book the job. And we saw 3x increase in fuel reservation with this design.
Compromised UX and visual for a fast launch in V1
A key design challenge was displaying discount locations clearly on the map. In V1, we compromised UX and visual by showing all locations simultaneously to avoid extra engineering effort. Although manageable at most zoom levels, it created a poor experience when zoomed out.
Map interaction design in V2
When we had more engineering resource to improve the map experience, I made prototypes to test out different interaction design to optimize both user experience and interaction performance.
When pins are close to each other, we cluster them and display the amount of pins in the cluster. This smoothens the interactions by reducing map loading time while clearly tells users the amount of discounts in a certain area.
Adding fuel discounts to trips allow drivers to see all the discount location in their trips, so that they can better plan their trip. At the same time visualizing discount locations along the trip will potentially encourage them to book the job.
Users can make a reservation immediately or view more details and then decide.
Since we shipped V2 design, we saw there is an 113% increase in users checking the discount program map. And fuel reservation volume increased 351%. In total, drivers have reserved more than 750k gallons of discounted fuel through the mobile app. On average, driver saves $17.9 per reservation.
From testings and researches, we learned that trust and reliability, both in service and financial transactions, are key drivers in building and maintaining long-term customer loyalty. Our next steps will focus on these parts while we bring more discount partners into the program.
