Designing a Systematic User Interface for a Global Delivery Platform

Detrack is a robust delivery management software company based in Singapore. Their delivery management software facilitates real-time delivery tracking for businesses, 3PL services, and logistics service providers, and is accessible on the web and mobile. 

The client was in need of a revamp of the Detrack driver application’s user interface to ease the use of the app. 

The previous design of the app featured massive 6  block buttons to scan, capture proof, go back, confirm, and so on. 

Due to this, the app lacked user-friendly visual elements and a consistent user flow. 

Thus, our key challenges were to:

• Design a simple, convenient, ergonomic interface for drivers whilst maintaining the prevalent user flow of the app

• Access to map on the dashboard to determine the delivery location and route

• Showcase a clear status of the job, contact the customer easily

Our strategy was to understand the users (the drivers), their pain points (quick and easy access to the features) and design the user interface that is simple, and systematic. 

To initiate the process, we identified the gaps and frequently used features through a complete heuristic evaluation of the application. 

Next, with the information on user personas and their requirements, we designed the user flow and wireframes of the app. 

Subsequently, we decided to prioritize the three frequently used functions of the drivers: Tasks, Action Menu, and Jobs. 

One of the primary functions that drivers were using was Tasks. Drivers used the task function to scan the packages to access job details. 

To enable them to easily and quickly access this feature, we designed it as a floating “task scan” to scan tasks. 

Not only that, we noticed that adding color codes could enhance more clarity and uniformity of the app. So, we introduced color codes to jobs. 

The collection jobs as orange and the delivery jobs as blue, we created an easy identification and systemic flow. 

The Second feature we designed was the action menu. Within the Action Menu, we listed the top priority & essential functions. 

For example, the top three features of the action menu were blocks of Task Scan, Scan to Search, and Location. 

This was followed by the category of essential driver features such as access to the dashboard, availability toggle button, and a summary of jobs. 

The job-related category included Mass POD (Deliver multiple packages in one go), transfer jobs, updated jobs, incoming jobs, and marketplace. 

These were methodically categorized so that users can effortlessly select the necessary options listed in a single menu. 

Considering the main requirements of jobs for a driver, we incorporated a map, a visible call button to contact the customer at the top, an estimated time to location, and a clear green button to submit proof of delivery (POD). 

Moreover, instead of job reports of statistics and numbers, we designed a visual graph to demonstrate the drivers' past and ongoing jobs along with their status. 

As extra elements, we added swipe down to refresh, options to  Start Session or start demo available at the starting point.  

Thus, the overall user interface was enhanced with clear, simpler user flow structures. 

The drivers had positive feedback and could seamlessly process their jobs, and discover delivery locations faster. 

Finally, we were able to revamp a satisfactory, uncomplicated user interface for our clients.