Supply Chain Platform
Price repository and invoicing
1
Project details
- Product: Web app | B2B enterprise solution
- Client: SingPost
- Role: Product designer
- Team: Product lead (Fon Supannakul), Product manager(Zhang Qing), Tech lead (Satish), Developers
2
Deliverables
- User and market research
- UI mockups
- Design handoff to developers
3
Problem
The organization was facing difficulties in generating accurate invoices due to the lack of a dedicated repository for price-related data, particularly shipping prices. This resulted in errors, delays, and inconsistencies in the invoicing process, impacting customer satisfaction and financial accuracy.
4
UX research phase
To build a solution that truly meets user needs, we began with a comprehensive UX research phase. Through stakeholder discussions, contextual inquiries, and competitive analysis, we gathered critical insights that shaped the foundation of our design strategy.
Stakeholder Discussion
We engaged key stakeholders early to understand business goals, project constraints, and their expectations. The current lack of a unified source for price-related information was mentioned for several times.
Contextual Inquiry
We went to Changi Airfreight Centre and conducted in-depth observations and interviews with users in their natural environments. Given that shipping price data is gathered from various sources, the collaboration across departments is essential but prone to human errors, which may compromise the accuracy of billing records.
Competitive Analysis
We analyzed similar products in the market (supply chain SaaS platform) to identify industry best practices, usability gaps, and areas for differentiation. They all have the features like real-time freight quotes and API integrations to facilitate accurate and efficient invoicing.
5
Proposed solution
• Centralized price data
Establishing a centralized database (Price Repository) for capturing and storing all price-related data, including shipping prices, service rates, taxes and discounts helps streamline reporting and analysis, offering a clearer view of the business’s financial health.
• Precise invoice generation
The proposed Price Repository will consolidate shipping price data and enable users to create accurate invoices based on real-time shipping prices associated with customer accounts.
6
UI design
Price repository (the centralized database)
The Price Repository serves as a centralized database where all actual shipment pricing data is stored. Users can easily retrieve specific records by using the search bar or applying filters. This enables faster, more accurate access to price information, reducing manual errors and improving operational efficiency
- 1. We introduced intuitive search and filter functions based on key criteria like shipment ID, customer account, financial status, and shipment routes to help users quickly locate the information they need.
- 2. To improve flexibility, users can also customize the number of items displayed per page based on their preference.
- 3. To improve navigation and data accessibility, we enabled hyperlinks on the shipment and order IDs. Users with the necessary permissions can simply click on an ID to open a new page with detailed shipment or order information.
Bulk action
To support the logistics industry’s need for handling high volumes of shipments efficiently, we introduced bulk action (1) and multi-select (2) capabilities. Users can easily select multiple records to bulk edit, export to Excel, or combine multiple shipments into a single invoice — streamlining invoicing processes and reducing manual workload.
Shipment price details
To provide users with a clear and structured view of a shipment’s financial breakdown, the Shipment Price Details page was designed with a two-column layout.
1. Right Section (Charge Breakdown): Users can view a detailed list of all incurred charges — including shipping fees, surcharges, and taxes — in a transparent and itemized format.
2. Left Section (Shipment Overview): This area summarizes key shipment information such as weight, customer details, and a list of items. It helps users quickly understand the basic context of the shipment without needing to switch pages.
This layout ensures users can easily cross-reference shipment details with associated costs, promoting better accuracy, faster issue resolution, and more confident decision-making.
Invoice preview
To streamline the invoicing workflow and minimize friction, we introduced a PDF invoice preview feature.
1. Users can view the full invoice in a PDF format directly within the platform and from the same page, users can quickly forward the invoice via email, print a physical copy, or download it for record-keeping or offline sharing.
2. The combined shipment(s) price information is prominently displayed in the left section of the invoice preview page, along with a View button for more details. This layout ensures that users can easily access and review all relevant shipment details at a glance.
Billing configuration
1. While manual invoice creation offers flexibility, we have also implemented an automated invoice generation setting that allows users—especially businesses with recurring billing needs—to easily set up and customize their billing cycles. The periodic invoicing process will generate invoices for customers on a regular basis, based on the configured billing settings.
7
Reflections and next steps
During the design process for this data-heavy B2B SaaS platform, we encountered the common challenge of balancing comprehensive information display with UI clarity. It became clear that cluttered screens are often unavoidable when dense data must be presented on a single page to meet user needs. To address this, designers must:
- Differentiate between primary and secondary information: Prioritize displaying critical data prominently while relegating less urgent details to secondary positions.
- Apply progressive disclosure techniques: Reveal detailed or complex data progressively based on user interaction, ensuring the interface remains clean and approachable without sacrificing functionality.
Incorporating these strategies not only helped improve usability but also enhanced users’ ability to focus on key tasks without feeling overwhelmed. Moving forward, we plan to refine these techniques further and explore adaptive interfaces that personalize the level of detail displayed based on user roles and preferences.