This B2B logistics service delivers shipments to stores, dealers, and branches. One of its key selling points is simple: order by the afternoon, and delivery arrives by the next morning. A large logistics network lets the company build dedicated or shared solutions that meet client expectations and improve productivity.

Every parcel is first received and scanned at the parts distribution centre, where an optimal route is created for each shipment. Drivers then scan parcels as they load and unload them from the truck during delivery, and mark any that are damaged, missing, or misrouted. This keeps customer service informed and lets them update dealers on every shipment.

All parcel scanning is done with handheld scanner devices, and workers and drivers use separate devices to track deliveries and to navigate. Here is what we found.

USER FRUSTRATION

• The scanner is heavy and does not fit in a pocket.

• Workers and drivers get no visual feedback when a scan succeeds.

• The app is hard to use on small screens, and the small buttons are difficult to tap while wearing gloves.

• Drivers have to switch to a separate device for navigation while delivering.

• Drivers cannot take photos of damaged parcels, so they are sometimes blamed for damage they did not cause.

• There is a lot of manual work, which makes the learning curve steep for new staff.

USER GOALS

• Complete every task in one system, with as few errors as possible.

• Finish the scanning process faster.

• Protect drivers from being blamed for problems they did not cause.

• Keep customers and dealers updated in real time.

I was responsible for the high-fidelity wireframes and visual design across the whole product: the mobile application, the Zone Management Portal, and the Customer Portal. I worked within an agile, cross-functional team alongside developers, a project manager, and the client team.

We were building the entire experience from scratch, so feedback came in constantly. My job was to turn that feedback, from stakeholders, clients, and real users, into clear UI changes.

Using the requirement documents we were given, we turned the list of features and our analysis into an information architecture. After a few rounds of revisions to resolve early design issues, we had a structure that was ready for wireframing.

After a couple of iterations, we created wireframes for each user flow. Combining client feedback with our own analysis, we prepared a final set of detailed wireframes.

Because this was an enterprise application with supporting portals, we kept the UI as simple and efficient as possible. We had followed the UX process carefully, so the visual design was fairly straightforward.

For the mobile app, we used standard Android UI components. For the web portals, we created a custom style guide. We chose a shade of blue as the primary color, with additional colors for common states like success, failure, and processing.

Below are the UI screens for the Zone Management Portal, the Customer Portal, and the mobile application.