
Designing an Industry-first, all-digital payment solution designed to streamline and simplify fuel advances for the Over Road Fright Industry.
Revolutionizing the Future: Crafting an Industry-First Product with Customer-Centric Design

The Team
-
Director of Product Experience:
John Karl
​
-
Product Owner:
Evan Johnson
​
Business Analyst:
Jonathan Scallon
​
-
Development Architect :
Felix Lopez
​
​
Applications
-
Figma
-
Maze
-
After Effects



About
Client - Transflo (Partner COMDATA):
Software solutions for over-the-road freight movement.
Roles & Responsibilities:
-
Lead UX/UI Designer: As the lead UX/UI designer, I took ownership of the overall user experience and interface design of the product.
-
User Research: I conducted user interviews and extensive user research to identify pain points, needs, and preferences of the target users.
-
Problem Definition and Ideation: Based on the user research findings, I defined the problems and generated ideas for potential solutions through brainstorming and ideation sessions.
-
User Journey Mapping and User Flows: I created user journey maps and user flows to visualize the end-to-end user experience, identifying key touchpoints and interactions.
-
Wireframing: I developed mid-fidelity and high-fidelity wireframes to visualize the layout, structure, and functionality of the product's user interface.
-
User Testing: I led user testing sessions to gather feedback and insights from real users, iterating and refining the design based on the feedback received.
​
Project Timeline:
I took the project in October 2022 and development is currently underway. The product is slated to GTM in June.
​

Overview
-
Conducted interviews and discussions with clients and payment partners to understand the current fuel advance process.
-
Identified pain points and challenges in the existing process through in-depth conversations and active listening.
-
Collaborated closely with the Chief Product Officer (CPO), Product Owner (PO), and Business Analyst (BA) to complete a competitive analysis of the sector.
-
Conducted market research to identify gaps and opportunities for innovation in the industry.
-
Utilized various UX processes, such as user research, persona development, and user journey mapping, to discover and define the problem comprehensively.
-
Employed techniques such as brainstorming and ideation sessions with the team to generate potential solutions.
-
Leveraged iterative design processes, including mid-fidelity and high-fidelity wireframing, prototyping, and user testing, to refine and validate the solution.
-
Developed an industry-first solution that revolutionized the fuel advance process, addressing the identified pain points and capitalizing on the opportunities in the sector.
-
Collaborated closely with the CPO, PO, BA, and other stakeholders to ensure the solution aligns with the business goals, user needs, and market demands.
-
Ensured continuous communication and collaboration among team members to ensure a seamless and efficient UX design process.
Key Terms
-
Fuel Advance: A Fuel advance refers to a financial service that provides upfront cash or credit to cover fuel expenses for carriers or trucking companies. It is a form of short-term financing that allows carriers to access immediate funds to pay for fuel, which is a significant operational cost in the freight transportation business.
-
Broker: A freight broker is a middleman or intermediary who connects shippers with carriers to facilitate the transportation of goods. They typically do not own any trucks or transportation assets themselves but instead act as a liaison between shippers and carriers, coordinating freight shipments, negotiating rates, and managing logistics to ensure smooth transportation operations.
-
Carrier: A trucking company or individual truck driver that operates long-haul or interstate routes, transporting goods across state or national borders.
-
Fleet Check: A fleet check is a type of financial transaction that allows fleet owners or managers to provide funds to their drivers on the road, typically for the purpose of covering fuel costs, repairs, or other expenses related to operating a commercial vehicle.

Understanding the Problem
We hit the road to talk to the movers and shakers of the transportation industry - the carriers and brokers - to dig deep into their fuel-related woes. Armed with our trusty user experience interviewing skills, we picked the brains of industry pros and uncovered some valuable insights that helped us develop an understanding of their frustrations with the current fuel landscape, and some key takeaways that helped us to find the problem we need to address.

-
Fuel prices have more than doubled in last 2-years ($2.43 on Nov '20 to $5.21 in Oct ‘22)
-
Fuel represents 30-35% of the load value
-
$250 million annually in estimated costs associated with fuel card skimming (reported by the NACS)
-
Carriers feel the impact from fuel fraud through card skimming
-
Funds are illicitly pulled from their credit lines – reducing or removing working capital
-
Money drawn from fleet checks does not get used for operational expenses
Today's Fuel Landscap


Competitive Analysis
To develop a competitive and user-centric solution, I conducted a thorough competitive analysis of existing solutions in the market. By examining the strengths and weaknesses of competitors' products, we were able to identify opportunities for market penetration and areas where we could differentiate ourselves. Through our UX competitive analysis, we also gained a deeper understanding of user needs and preferences, enabling us to design a solution that was not only better than the competition but also more aligned with user expectations.



Defining What We A Solving
-
Revolutionize fuel payments in the transportation industry by creating a seamless, digital experience for drivers to receive fuel advances from brokers.
-
Create an end-to-end solution that streamlines the way brokers and carriers manage fuel advances, from requesting and approving advances to making payments and reconciling transactions.
-
Design a user-friendly mobile application that enables drivers to easily request and receive fuel advances and make fuel purchases at any fuel provider.
-
Empower brokers to share their fuel network discounts with small fleets and drivers, fostering greater transparency and equity in the industry.
Concepting
-
To develop a comprehensive understanding of the pain points surrounding fuel advances in the transportation industry, we created a product advisory team consisting of brokers, carriers, and drivers. By tapping into the expertise and insights of industry professionals, we were able to identify the most pressing problems and develop a user-centered solution that met the needs of all stakeholders. Our product advisory team was instrumental in guiding our design decisions and ensuring that our solution addressed the real-world challenges faced by those in the industry.


-
After gathering insights from our product advisory team, we created high-level journey maps for each persona involved in the fuel advance process, with the aim of developing potential solutions to eliminate pain points. By visualizing the end-to-end process from each stakeholder's perspective and brainstorming potential solutions, we were able to generate a range of ideas that would improve the user experience. Our journey maps allowed us to think creatively about the problem and provided a framework for exploring different design options.


-
After creating high-level journey maps to develop potential solutions, our next step was to deep dive and design a more detailed journey map that addressed possible questions, made decisions, and clarified outcomes before moving on to actual design. By planning and mapping out the user journey in detail, we were able to anticipate and address any potential roadblocks or issues that might arise during the design process. This allowed us to create a more efficient and effective design strategy, as we were able to avoid costly mistakes and course-correct early on in the process. Our detailed journey map provided a roadmap for our design decisions and ensured that we were always aligned with our goals and objectives.
-
After creating detailed journey maps to clarify outcomes and decisions, the next step was to design low-fidelity wireframes that described the potential fuel advance process. These low-fidelity designs allowed us to iterate and get buy-in from stakeholders before investing time and resources into high-fidelity designs. By creating rough sketches of the user interface and functionality, we were able to quickly test and refine our design ideas based on stakeholder feedback.

-
In conjunction with designing low-fidelity wireframes, our team, including myself as the UX/UI designer, the product owner, and the chief product officer, worked closely with our payment rail partner COMDATA and potential fuel provider partners to architect how transactions would work. This was a crucial step in the process because we needed to understand how the back-end would operate in order to design a UI that would effectively support the transaction process. By collaborating with our payment and fuel provider partners early on in the process, we were able to design a seamless experience for our users that integrated smoothly with the payment and fuel provider systems. This helped to ensure a smooth and successful implementation of the fuel advance solution, meeting the needs of our users and stakeholders alike.



Concept One
-
With all the information we had gathered from the previous steps, we were now ready to start designing a high-fidelity concept for the fuel advance solution. Our main focus was on creating a user-friendly experience for the drivers, while also ensuring seamless integration for brokers and carriers, so that they wouldn't have to take extra steps to manage the fuel advance process. We utilized the insights and feedback gathered from the product advisory team, user interviews, competitive analysis, and our collaboration with payment and fuel provider partners to create a design that was intuitive, efficient, and met the needs of all stakeholders. The high-fidelity design concept would serve as a blueprint for the development of the final product.
Back On the Road
-
We hit the road again to showcase our concept to potential clients and fuel providors and were overwhelmed by the positive feedback we received. While demonstrating the product, we also identified some major changes that needed to be made in order to further improve the user experience and address pain points.
Key Takaways

Can't Pay at the Pump?
After realizing the development time required to integrate with all fuel providers for turn-on at the pump fueling, we had to come up with a new concept. That's when I spoke to my CPO and asked if we could use COMDATA's ability to text single-use card details to create secure digital cards with custom parameters. With this solution, widely accepted and controlled by us, we received the green light from COMDATA and moved forward with designing the new concept.

Broker and Carrier Portal
Due to the integration time required for Transportation Management Systems (TMS), we devised a portal design specifically for brokers. Leveraging the existing carrier portal design, we created a solution that enables brokers to provide fuel advances to carriers even before API integration is fully completed. This portal design served as an interim solution, allowing brokers to streamline their fuel advance processes and provide timely support to carriers while the comprehensive API integration was being developed.

Reimagining the journey
-
After receiving feedback from stakeholders, the business analyst and I worked together to redesign the user flow and journey map with the updated concept. These changes were made in order to improve the user experience and address any pain points that were identified during the initial feedback sessions.


High level Overview:
The New Transflo Fuel Advance
-
After reimagining the flow based on customer requirements, we demonstrated our agility in adapting to their needs and technical constraints. This iterative process enabled us to design a solution that effectively addressed all their requirements. With the redesigned flow in place, we proceeded to develop high-fidelity mockups that we continuously validated and refined with our clients, ensuring that the final design met their expectations and delivered a seamless user experience.



Retro
In conclusion, this compelling UX case study showcases my cross-functional collaboration and user-centric approach in revolutionizing the fuel advance process in the transportation industry.
Leveraging my expertise in both product design and UX design, I created an industry-first solution that seamlessly integrated with the fintech landscape. Through comprehensive user research, iterative design, and feedback loops, I crafted a user-centric interface that enhanced the experiences of drivers, brokers, and carriers.
This case study exemplifies the power of product and UX design in driving innovation, transforming industries, and creating solutions that truly resonate with users.
​
To continue learning about my design process and see more innovative designs please read my case study about creating the Transflo one portal.