April 2021 – October 2021
My Role: Brand Strategy, UX, Visual Design, User Research
Project Vision
FreightForward is a proprietary app developed by Allied Global Exports (AGE) to streamline the customs clearance process for freight forwarding agents. The app provides a fast, efficient, and organized way to gather and upload required customs documents, calculate duties and fees, and generate shipping receipts, helping agents reduce delays and errors when clearing shipments.
Challenge: Freight forwarding agents need to complete repetitive but complex customs paperwork and calculate fees before arriving at ports. Errors or incomplete forms can result in costly delays and fines.
Solution: FreightForward simplifies the customs clearance process by allowing agents to upload documents, calculate fees for specific regions, and generate shipping receipts, ensuring that all necessary forms are correctly prepared in advance.
Why FreightForward?
The shipping industry, particularly in the emerging African and Asian markets, requires extreme accuracy in customs documentation. AGE recognized the need for a mobile solution that would help agents compile and verify paperwork quickly, minimizing errors and delays at the port.
While several apps are available for shipping documentation, few are tailored specifically to the freight forwarding process, particularly with a focus on agents’ needs in developing regions. FreightForward addresses these needs, offering an intuitive interface that organizes documents and calculates duties in real-time, ensuring accuracy and efficiency.
User Cases
I conducted interviews with eight independent freight forwarding agents to gather insights into their workflows. These agents came from various shipping regions, providing a comprehensive view of customs practices worldwide. Additional feedback was obtained from internal company stakeholders to ensure that the app aligned with AGE’s business goals.
Initial research revealed that agents prioritized the ability to calculate fees before arriving at the port and wanted a system that would eliminate errors caused by incorrect paperwork.
User Journey
Enter Shipping Details → Upload Documents → Submit & Ship
Pain Points
- Speed: Agents spend too much time gathering and verifying documentation, leading to delays in customs clearance.
- Accuracy: Incorrect or missing forms can result in costly delays at the port.
- Fees: Agents need to know the total duties and taxes before arriving at customs to anticipate costs.
Competitive Audit
| Maersk | Shipa Freight | FreightForward | |
| Scan or uploads documents | ● | ● | |
| Calculates duties and taxes | ● | ● | ● |
| Print in-app | ● | ||
| Shipping history | ● | ● | ● |
| Designed for agents | ● | ● | |
| Multiple language support | ● | ● |
Process Flow
Wireframes
Usability Study Findings
I performed two rounds of usability tests with freight agents. The first round informed the shift from wireframes to mockups, focusing on document management and fee calculation. The second round, using a high-fidelity prototype, highlighted the need for a simpler upload process and a more intuitive layout.
Round 1:
- Agents requested an intuitive layout with large buttons and icons to reduce the complexity of the document submission process.
- Users wanted the last shipping port to be pre-populated to speed up data entry.
Round 2:
- Users preferred a two-step process with clear icons over pull-down menus for faster input.
- The app’s confirmation page was redesigned to include key information such as customs fees and a receipt, eliminating unnecessary steps in the process.
Solution
Intuitive Dashboard: The Dashboard allows users to quickly start a new shipment, calculate fees, or view shipment history. This central hub is designed for easy navigation, providing fast access to key features that keep agents organized.
Quick Vessel & Shipment Selection: On this screen, users can select the type of vessel and shipment using large, recognizable buttons. Through user testing, I discovered that agents had better recall and worked more efficiently with larger icons, enhancing the user experience.
Streamlined Freight Details: Agents can input freight details and customs codes tailored to the regions they are shipping to and from. This screen simplifies data entry while ensuring region-specific requirements are met for accurate documentation.
Easy Document Upload: The app not only informs agents about which shipping documents are required, but also allows them to quickly upload photos of their paperwork. This feature ensures all documents are collected and ready before reaching customs.
Comprehensive Declaration Summary: This page provides a complete overview of the shipment, allowing agents to review and confirm their documents and print everything needed for customs clearance.
Real-Time Fee Calculator: Agents can quickly calculate shipping fees for potential shipments, enabling them to provide fast, accurate quotes to clients.
Prototype
An interactive prototype was created to simulate the user experience. The prototype allows users to prepare shipment documents, calculate customs fees, and generate receipts with a few taps. Check out the Figma prototype below.
Branding
The FreightForward app adheres to Allied Global Exports’ brand guidelines. It uses AGE’s corporate colors, ensuring brand consistency while offering a clean, professional interface. The use of bold, easily recognizable icons and large buttons aligns with the app’s primary focus: improving the speed and efficiency of the customs clearance process.
TakeawaysThe FreightForward app presented a unique opportunity to explore the challenges faced by freight forwarding agents. Through user research, usability testing, and iterative design, I was able to create a solution that simplifies customs documentation and reduces delays. This project taught me the importance of balancing user needs with business goals, and how thoughtful design can streamline complex processes of international compliance.