UX Design case study
Maersk Shipping Instructions
UX Design case study
Maersk Shipping Instructions
Discovery
For Discovery and Definition, most of the data we collected is proprietary and sensitive. I can say that we conducted foundational research into the user’s pain points using:
- Open-ended user testing via a Customer Panel.
- User feedback forms, both generic and targeted.
- Targeted user testing - following up with users with specific complaints or ideas.
- Analytics - which were of limited use as people have to use the site as part of their job, but we could still get some usage and performance data.
Definition
Across the entire site, the major pain point was the Shipping Instructions journey, where people manage their shipments. The “golden path” was quick and efficient but anything away from that could not be done online.
NOTE Commodities are called "Descriptions" by customs.
Definition
A single Bill of Lading (which states a container's contents, and proves ownership of the shipment via possession), manages anywhere from one to 99 containers, all of which have a single commodity inside. If you’re shipping tons of coal this works well.
Definition
However what the users wanted was:
- Ability to have many containers with a single commodity.
- Ability to have many descriptions (commodities) in a single container.
- Ability to have every type of mix in the same shipment, and need many bills of lading to administer them.
- But, we could NOT make the golden path any more complicated.
Maersk Shipping Instructions
Development
Design vision:
We have had users get in touch with Maersk who are incensed that a new page adds one more click than the old version, despite it being far easier to understand.
The audience are people who have to use the page as part of their jobs, and use it multiple times a day, so we needed to:
- Keep the golden path efficient while adding functionality to address extra complexity.
- Prioritize task efficiency over ease of understanding. Users learn to use it once but have to use it thousands of times.
Development
Insight
Was achieved as we worked through the problem. Each commodity is given by a Description, each container has a number.
- Treat the Descriptions and containers as separate sets.
- Attaching Descriptions to Containers describes the relationship between them.
Development
Ideation:
We iterated and tested though multiple rounds of prototyping at various granularities, either quickly in Miro or Axure to see how it might work and be received.
Maersk Shipping Instructions
Delivery
While I can’t show the results of the testing, users were really happy with the approach. We thought people would struggle with the complexity, but they got it straight away. A lesson for the whole team, there.
As you can see from the Figma overview produced, the solution gets complex. Tablet and mobile views are completed in the visual design but would not go on to be developed as the user base is desktop only.
Conclusion
This page was one part of a very large, complex project. It achieved what we wanted from it:
- The Net Promoter Score before we started was terrible. The users gave this section a score of 5.3 vs the site average of 6.58. Following the redesign, it is an outstanding 8.3.
- The turn-around time for a shipment went from a working day to 1 minute.
- E-mails per shipment dropped 25%.
- The number of steps went from 6 to 2.
The project provided immense satisfaction at the team's ability to serve the user's needs, while providing improved measurables for the business.