Role
Product Designer
Timeline
Q2 2025
Project Type
Product Improvement
Result
Solved Inefficiency & Unclarity: Built the Digital Invoice Core to Accelerate Payments and Scale B2B Financial Processes.
The Context
Darter's Portal is a Business-to-Business (B2B) platform designed to facilitate and manage logistics and usage-based services, primarily serving two key user types: Brokers (non-asset intermediaries who arrange transport services) and Transportation Providers (TPs) (asset-based companies who own and operate the fleet).
Brokers manage and secure eligible usage or services, while TPs execute or provide those services on the platform. The complex billing mechanism relies on various factors, including subscription plans, eligible contract usage, and prepaid payment logic. Darter's business model relies on these users (Brokers/TPs) subscribing to plans, with final billing calculated based on active usage determined by these transactions. The Admin and Finance teams of these companies are responsible for managing these payments. This project was initiated to move the management of financial records from an offline, manual process (relying on emails and support requests) to a transparent, self-service digital experience.
Defining
The Problems
The core problem could be encapsulated by the user story:
"As a user (TP/Broker), I lack a clear, centralized list of all my company's invoices, which makes it difficult to track payment status, reconcile accounts, and predict future expenses."
Finding a specific invoice for audit, clarifying amounts, or checking due dates required manual sifting through communication archives, forcing users to rely on time-consuming interactions with the Darter support team for basic documentation or information.
Users lacked a single, unified point to access, control, and manage all payments. Furthermore, without a standardized view, they had no immediate or reliable way to confirm the precise status of an invoice (Paid, Unpaid, or Pending), leading to reconciliation errors.
Qualitative Insights
Problem Validation
Tracking payment reconciliation and finding documentation was tedious, often requiring Admin/Finance personnel to spend hours cross-referencing external bank statements, email chains, and support tickets to confirm a single invoice status.
Admin/Finance users reported low confidence in external status updates, citing reconciliation errors and late payments due to confusion over the actual status of an invoice
The lack of any visible urgency meter meant invoices were routinely paid late, resulting in follow-up support interactions and operational friction.
Understanding
The Goals
To conquer our UI/UX obstacles, we conducted focused desk research to establish the fundamental truths necessary for the design. This evidence will directly inform the solution.
Increase Efficiency
Minimize the volume of billing-related support inquiries and eliminate time-consuming interactions with the Darter Support team.
Establish Single-Point Invoices Management
Create a single, unified point of access for users to view, track, and manage all financial artifacts, providing all essential invoice details.
How Might we create a unified portal that eliminates billing inefficiency and ambiguity while maximizing financial transparency?
Understanding
Information Structure
After defining the problem, knowing the goals, I try to transform it to the information structure to make it more visible so…
User Needs
Identifying what matters most to the users. Understanding their priorities to guide the right design decisions.
Core Functionality
Defining the key actions the product must deliver. Ensuring every function directly supports the user’s goals.
Mapping
Connecting needs and functions into a clear structure. Making the flow easier to understand and act on.
Process
Utilizing AI to Accelerate Design Exploration
After defining the information structure, I leverage AI (Stitch by Google) to explore early design directions faster. It helps me turn those structured insights into rough concepts, giving me a solid first draft to refine and push forward.
Moving Forward
Dashboard Design Finalization
Final dashboard screens assembled and specified, integrating key insights from AI-assisted ideation for rapid iteration.
Design Exploration
Invoice Details
Design Exploration for Invoice Details View.
Design Iteration
Invoice Details: Clarity & Conversion
This exploration ensures the Invoice Details view achieves two critical objectives: complete financial and status visibility and a crystal-clear, context-specific CTA at every stage of the lifecycle. The result is a highly predictable and actionable user experience.
Designing the flow
Payment Interaction Flow
Following the static details, the next challenge was to design the in-flow payment experience. The goal is to make the moment of transaction intuitive, clear, and trustworthy to minimize drop-off and maximize completion.
Result
A new Invoice Management System
By creating the Invoice flow from the ground up, the design successfully established a robust, scalable financial management tool.
For User
Eliminates Time Consuming Support
Users no longer have to rely on emails and interaction with the Darter support team for basic documentation or to clarify due dates and amounts. The self-service experience drastically improves user efficiency.
Guarantees Financial Certainty
Solves the core problem of being "unclear". The design provides a unified, reliable view to confirm the precise status of an invoice (Paid, Unpaid, or Pending), enabling users to successfully reconcile accounts and predict future expenses.
Reduces Cognitive Load
The systematic approach, including the single, context-specific CTA and clear status consistency, ensures the process is intuitive and highly actionable, minimizing errors and frustration.
For Business
Reduces Operational Costs
By moving financial record management to a transparent, self-service digital experience, the design significantly reduces the burden on the Admin and Finance teams and the support team, saving time and resources.
Accelerates Cash Flow
The focus on a trustworthy and efficient Payment Interaction flow minimizes friction during the transaction moment, which is foundational for maximizing payment completion rates and improving cash flow.
Scalability for Complex Logic
The foundational design provides a robust and clear framework for managing the platform's complex billing mechanism (which relies on various factors, including subscriptions and usage-based services), ensuring the system can easily support future plans and services.
