Logo Arieff H.
Selangor FC Logo SELANGOR FC

Transport Management System Web App

Selangor App Mockup
Tools
Platform
Role
Duration
Figma
Web App & Tablet
Lead UI/UX Designer
8 Weeks

Introduction

Tradelink is a SaaS-based transport management system (TMS) web application designed for clients in the US and Mexico. It offers functionality similar to AllWaysTrack and AppSheet, but with a more intuitive interface and enhanced features. The platform enables both delivery clients and carrier companies to track tasks in real time, streamline logistics, and manage cross-border operations with ease. It also allows company admins to update worker information, record expenses, and facilitate reimbursement processes efficiently.

The app is designed for small to medium-sized transportation companies (1-50 trucks) that engage in international freight hauling. Additionally, the app will offer a customer portal, allowing transportation companies to provide their clients with real-time access to load tracking and status updates.

Issues

  • Cross-border transport companies act as both carriers (own trucks) and brokers (third-party)
  • Most software can’t handle this hybrid model
  • Existing solutions are either: Too expensive (starting at $50k+), or Missing key features: reporting, driver payments, accounting, and maintenance tracking.

Goals

  • All-in-one TMS for asset-based + logistics operations
  • Seamless load management with performance reporting
  • Easy payments for drivers & external carriers
  • User-friendly invoicing and accounting tools
  • Affordable & modern UI built for small–medium transport companies
Selangor App Mockup

1. Research & Discovery

  • Researched client operations in US and Mexico, considering currency handling, cross-border documentation, and country codes
  • Analyzed competitor apps (e.g., All-Ways Track) to identify gaps in flows, UI/UX, and usability
  • Reviewed company’s preferred design language, direction, and target audience to align the app design with operational needs

2. Design Stage

  • Created lo-fi wireframes to validate structure and functionality
  • Progressed to hi-fi mockups after client approval
  • Presented designs bi-weekly in phases, incorporating feedback and making timely amendments
  • Took initiative to design reimbursement page instead of waiting client's sketches to understand the app deeper

3. Developer Handoff

  • Prepared detailed developer notes covering interactions, spacing, and component behaviors
  • Collaborated closely with developers, answering questions in real time and clarifying edge cases
  • Assisted developers with ad hoc requests to ensure the final product remained true to the original UX/UI vision

Core Features

This app solves several critical pain points in the transportation industry by implementing these features

Selangor App Mockup

Key Takeaways

Tradelink app enables companies to manage loads efficiently, whether they are acting as asset carriers or brokers. The app provides comprehensive performance analytics for drivers, trucks, and trailers, allowing companies to quickly determine their rolling cost per mile and optimize their operations.

Offers:

A cost-effective solution for small to medium-sized transportation companies, making advanced transportation management accessible.

Supports:

USA companies that employ B1 drivers, ensuring correct and efficient driver payments.

Improves:

Management of accounts payable and receivable, with planned API integrations for QuickBooks and other accounting platforms, reducing manual data entry and improving financial accuracy.

Selangor App Mockup