Drivers need to pay hundreds of dollars for fuel as an on trip expense before they get paid at the end of the job. Many drivers do not have the cash to pay for fuel expenses to start the trip. To solve this problem, CloudTrucks decided to introduce Fuel Card.
By launching CT Fuel card, we hope to:
Increase fleet fuel spend on CT-issued cards from 57% to 80%.
Increase auto-generated fuel receipts on CT-card transactions from 9% to 70%.
Reduce fuel related churn by 90%.
When I received this task, I first researched the existing solutions to understand why they aren’t effective, so we could avoid repeating past mistakes. I discovered that our current fuel card alternatives—CT Credit Card and Pickup Pay—have several limitations.
Next, I conducted user interviews to better understand drivers’ needs when using a fuel card. The key insights are:
• Drivers frequently use fuel cards daily when they’re on the road.
• Drivers don’t want to spend extra time tracking payment deadlines, and they strongly dislike late fees.
• Drivers prefer easier ways to track fuel expenses, particularly for IFTA reporting.
After gaining deeper insights into the problem, understanding user needs, and considering the business objectives, I finalized the following design goals:
• Develop essential features for the CT Fuel Card, including:
• Smooth fuel card signup process
• Payment functionality
• Viewing card balance and available credit
• Transaction history and statements
• Card and cardholder management
• Revamp the Cash home page to accommodate the new fuel card feature and additional improvements.
At the same time, I collaborated with the product team to establish OKRs aligned with our design and business goals.
With all the insights, we identified a few key challenges in achieving the goals:
How might we provides a more holistic view of users’ finances?
With the launch of the Fuel Card, we need to update the existing CloudTrucks Cash page's information architecture to accommodate new use cases and clearly convey users’ finance.
How might we balance between risks and UX in payment collections?
Collecting payments for the Fuel Card balance is challenging given users’ unique spending patterns and the typical financial constraints of truck drivers. In addition to mitigating risk, we must prioritize a smooth payment experience.
How might we streamline the sign-up flow to reduce potential frictions?
We are partnering with Stripe and Cross River Bank to launch Fuel Card, and we need to streamline the sign-up flow to reduce any frictions caused by integration of Stripe KYC flow and bank compliance.
Designing for Fuel Card opened an opportunity for us to redesign the Cash page that was not working well to accommodate changes with new features coming in. We cleaned up the information architecture, making it easier to navigate through different accounts and increasing scalability.
Based on the new information architecture, we went through many UI explorations for CT Cash page. And after rounds of design critique, we had a winner for it has a more clear visual hierarchy and more consistent design pattern which help reduce distractions.
Many rounds of iteration
Before
Information architecture is messy and not scalable to accommodate new changes. Related informations are disconnected.
After
Clear view of driver’s financial performance across different accounts. Easier to view account details or manage account separately.
I led a discussion session with the product, engineering, and risk teams, using design to facilitate alignment on a strategy that minimizes financial risks without significantly compromising user experience. Ultimately, we decided to implement a waterfall payment collection approach, prioritizing risk reduction and proactively preventing late fees. This decision was informed by lessons learned from our previous unsuccessful credit product.
Simulate payment scenarios to help the team make a decision
However, with waterfall payment collection, users might feel unpleasantly surprised when payments occur unexpectedly. To prevent this, the design should clearly communicate exactly when and how payments are collected. In this example, we use straightforward language and clear visual design to convey card payment status. Since approximately 95% of payments will occur automatically each week, it’s crucial to keep users consistently informed about their account status rather than prompting them repeatedly to make payments.
We also ensured the transparency by labeling out pending payments, to help users avoid making repetitive payments.
When we tested the design for mvp with beta users, we found two problems with the sign-up flow. Firstly, on the sign-up page, some users missed important information. One big change is that user's Pickup Pay limit will drop from 30% of load price to 15%. Users called us after they applied for Fuel Card and complaint that they didn't know because they didn't read terms and conditions.
Another issue is when users failed Stripe verification, they will need to answer additional security questions. And if they fail to do that they will not be able to sign up for Fuel Card.
So we updated the design and refined the content to make it more scannable. We also added a video to explain how CT Fuel Card works. Users will also need to confirm that they have acknowledged important changes to Prickup Pay once they get approved.
To help users who failed Stripe verification, we are working with Stripe on pre-populating more info that CloudTrucks already saved for users to reduce the frictions. Meanwhile, as bandage fix, we send out an email with instructions on how to answer the security questions. And we choose email instead of displaying instructions in-app because email allows users to reference back to the instructions as they are answering questions.
Here are some highlight of the final design.
We revamped the Cash homepage by bringing the Fuel Card and Maintenance Fund directly to the main screen. This allows drivers to easily view and manage available balances across different accounts. Additionally, we separated pending and completed transactions to enhance transaction transparency.
Unlike a traditional credit product, CT Fuel card mostly collects funds from job payment automatically, so we brought highlight on the available amount over current balance. Status pill changes based on the status of last statement balance. Despite autopay from job payments, users can also easily make a payment from their CT Cash balance or linked bank account.
User can manage their fuel cards, adding cardholders, and lock card on the web app.
We launched the product for 10% users in Jan 2025 and for all users in Mar 2025. While we are waiting for more metrics, the initial metrics are positive. We saw an 84% sign-up approval rate, which has increased 19% from 65% back in January for beta users. $111k fuel purchase only from beta users in Jan and Feb. And only 1 call asking about the auto payment.
While waiting for more metrics, we are currently designing additional features to support user's needs. For example, increase credit limit, Fuel card complaints and in-app transaction dispute.
