local_shippingCase study · B2B logistics · Mobile & web
Barco.
Redesigning a vehicle transport marketplace so carriers can find loads, negotiate and plan their trucks right from their phone.
Redesigning a vehicle transport marketplace so carriers can find loads, negotiate and plan their trucks right from their phone.
Customers post a transport request with a route and cars. Carriers send offers, both sides agree on a price, and the carrier assigns a truck, a driver and a load date. My job was to make the mobile app work for people who are almost never at a desk.
Transport managers check offers between phone calls, and drivers often have one hand free. The old screens asked them to read dense text, guess what grey labels meant and fill empty forms full of abbreviations.
Long text rows with a tiny grey status made it hard to spot what needed action.
Even when the task was filling in prices and trucks, the map pushed the form below the fold.
Fields like "LF" or "Qnt." with no hints, and no way to pick an existing truck or driver.
Managers couldn't see which truck was free on which day without opening the desktop version.
I went through every flow in the old app and marked each friction point in FigJam: extra taps, unclear labels, dead ends.
Transport managers showed me how they handle a new request on their phone. I mostly watched and took notes.
With the product owner I reviewed the most frequent questions from carriers, which pointed to the same few screens.
Every request became a card with the same order: dates, company, then from → to with country flags, and the price in green with the number of cars. Request type (Spot, Contract, Dealer request) sits on the left, status on the right.
I replaced grey text labels with a small set of colour-coded chips, used the same way in lists, bottom sheets and on the web.
The offer screen now shows the route, the price type and the customer's target price next to your own price field. Trucks, notes and documents are added inline, and one wide "Submit" button sits within thumb reach.
Trucks and drivers are chosen from searchable bottom sheets with the company's own fleet. If something is missing, "Add new truck +" and "Use entered value" are right there. Required fields are marked, and the load date has a real date picker.
The schedule shows trucks as rows and days as columns, with a counter for trips on each day. Tapping a day opens a bottom sheet with the trips and an "Add trip" action. Assigning a load lists open requests, with late dates highlighted in red.
On desktop I applied the same cards, chips and colours to the load exchange and request screens: expandable table rows, a map panel on the side, and grouped sections (pickup, delivery, vehicles, price) in the order modal.
A light, neutral base keeps long lists easy on the eyes. Navy marks actions, green marks prices, and every status has its own fixed colour.
#2E618C#5D9ED9#F3F5F7#18957F#D87532#A2001DA neutral, highly legible font for small mobile screens, with tabular numbers for prices and plate numbers.
Outlined Material Symbols, one set across the app and the web platform. The icons on this page come from the same set.
The map stays in the background while each step opens in a bottom sheet: loading, price type, cars, extra conditions and a summary.
One offer form that adapts to the price type: per transportation, per km or per vehicle.
Suggested load configurations by weight and quantity, and a separate timeline for dealers with every VIN and its status.
A week grid per truck, a day sheet with trips, filters and a truck's loads with late dates.
Company details, drivers and trucks in one place, with ratings, EURO class and documents.
A new order in three states, the load exchange, complex and dealer requests, and the companies table.
