Allport
Product design
/
2020
UI and UX design, information architecture, user flows, feature design
Freight is mostly waiting. A container leaves Rotterdam and reaches Yantai six weeks later, and in between the person who booked it has one question, repeatedly: where is it, and what happens next – a question that otherwise costs somebody a phone call.
Allport is a freight forwarding app for air, sea and road. I designed all of it – the seven-step booking, the tracking, the documents and messages, the notifications and the profile – and the states around them: every empty screen, every filter and sort, every dialog, down to the 404.
Never say where a shipment is without saying what happens next.
Never say where a shipment is without saying what happens next. I made that the rule for every screen in the app, and the booking form was the first place it applied: the counter reads 1 of 7, names the step in progress, and names the one after it. The buttons are named for where they go, in both directions – forward to Shipper, back to Containers – so the word Next never appears anywhere. On the last step the ring closes, the next-step line disappears, and the button says Submit request.
The Inco terms on the first step are the reason it needed help. EXW, CIF, DAP, DDP, FOB, CFR – international trade rules that decide who pays for what and where the risk changes hands, and that even people in the trade do not recall precisely. I put the plain-language explanation of all six behind an info button on the field itself, not on a help page somebody would have to go looking for. The ones that do not apply to the chosen freight type are greyed out with the reason written underneath, instead of just refusing to be tapped.
Step one of seven – left, freight type and the Inco terms with two greyed out; right, the panel explaining all six where they are chosen.
Submitting doesn’t close the form. So I brought the seven steps back as seven cards on the request itself – transport mode, shipper, consignee, origin and destination, packages, containers, cargo – each editable, so a wrong postal code is a tap away from being right rather than a phone call to a forwarder.
The request after it is sent – an offer waiting at the top, and under it the seven steps of the form returned as seven editable cards.
A seven-step form on a phone gets abandoned – on a train, at a desk, halfway through looking up a reference number. So I had it keep the draft and say so, in a banner across the top of the requests list. Below it every request carries its own status, and when an offer comes back the accept and decline sit on the card itself, the question asked in ordinary words. Nobody has to open anything to answer.
The requests list – an unfinished request offered back at the top, and below it a returned offer with accept and decline on the card.
Once a request becomes a shipment it gets the vocabulary of the trade, and I kept both halves of it – NLRTM, CNYAT, with the city spelled out underneath. The code is what the paperwork says; the city is what people say out loud. Each card then carries the same two lines as everything else: where it is now, and what comes next. Documents and messages are counted on the card, with a dot when something is unread, so opening one is a decision rather than a check.
The shipment list – port codes with their cities, a progress track, the current milestone and the one after it, and unread counts on documents and messages.
The detail screen is the same rule at full length. Milestones already passed are solid, in blue, each with the time it happened. The current one is picked out. Everything still ahead is a hollow dot in grey with no date against it – the app knows when a thing happened, not when it will, and I was not going to let it imply otherwise.
Shipment details – the route and cargo above, and below them the milestone timeline: times on what has happened, nothing on what has not.
The data comes out of CargoWise, the forwarding platform underneath, and it arrives in the shape a forwarding platform keeps it in. What I was deciding was what gets said, in what order, how it looks, and what gets left out.