Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the twentytwentyone domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /var/www/vhosts/epicstories.nl/httpsdocs/wp-includes/functions.php on line 6114
APM Terminals – EpicStories

Global application for APM Terminals

APM Terminals (part of Maersk Line) operates a global terminal network of 72 operating port and terminal facilities and 140 inland services operations, with a presence in 69 countries on five continents. Our mission was to develop a global application for APM Terminals’ current and future indirect customers. The goal was to simplify the workload for all users by bringing all tools into one web application, a groundbreaking feat in this industry.

Our role

Before Frenz joined this project, two previous attempts had already failed. The first attempt was from the IT department of the organization, and the second was with a digital agent. For the third attempt, literally two employees of APM Terminals were deported from the company to begin a startup 400 meters away from HQ. Within a few months, the team was 10 strong.

I was responsible for research, BA, creating the User Experience design and Interaction Design, holding weekly presentations for field agents and stakeholders throughout the world, and creating documentation for the developing team.

Lessons

In order to understand the process flows, we had almost daily contact with stakeholders all over the world, from terminal operators from the US, NL, and Nigeria to truck companies from the UK.

The Challenge

Previously, importers, exporters, and logistics planners had to check daily more than 50 different websites to know where their containers were. Much of the communication was by phone, email, or paper.

The handling at the terminal varies per country. Rotterdam is modern and partly digital. In a country like Nigeria, much is still on paper. The challenge was to simplify the workload by bringing all the track-and-trace information into one web application, put that in a proactive timeline, and let the user act upon that info and place orders. In addition, we also let the program do the most of the work.

Business Goals

  • Accurate and relevant information about cargo (availability) to plan on
  • Proactive, real-time, guiding, and helpful
  • Strong focus on (internal) client satisfaction
  • Paperless but always printable

Personas and future

APM identified nine personas, such as Liam Chin: Inbound Logistics Manager and Ravi Mondra: Logistics Manager. We started by on focusing on Mike Thompson, who was working at a trucking company as a Trucking Dispatcher. 

This application needed to run on desktops, tablets, and mobile and had to be ready for extra features in the future. Therefore, I made a generic design that already had been considered to add additional functionality and was scalable for diverting devices.

Key Components of the Design Systems

  • A list with Information Blocks

  • Follow buttons

  • Action buttons

  • Springboards (lightboxes)

  • Action lightboxes

Every item in the timeline list, search results, or other list with Information Blocks has a Follow and an Action button. These buttons are constantly available for use.

Interaction with the Follow buttons

With the Follow button, the user can follow and unfollow containers, vessels, terminals, and BoL of bookings. If the user follows something, this item (Information Block) will appear on the timeline and to-do list. With the Follow button, the user also can activate a powerful tool that provides updated information about the item and also helps the user proactively get things done.

Interaction with the Action buttons

The Action button provides contextual actions to act upon for containers, vessels, terminals, and BoL of bookings. These buttons and the flows are designed to have a natural interaction with both mouse and touch. After the Action button is selected, a Springboard (lightbox) appears with the possible actions at that moment for that item (Information Block). The selected action will open in a new lightbox and has its own process.

Login Wireflow

The responsive WebApp will give the user the possibility to do all tasks in the same environment as on a desktop. Some parts of the navigation will work slightly differently but will feel the same. The reason that the desktop, tablet, and mobile interfaces work the same is that in some regions of the world where APM is operates, mobile devices are the primary or only devices used.

Invite new company user Wireflow

This customer journey shows the possibility for a user with the role of company admin how to invite a new company user to the company. This user is already a Lift+ user.

Final implementation

The responsive designs for this web application are based on mobile-first thinking. Thus every process of this application works the same on desktops, tablets, and mobile devices. Most of the prototypes I made were designed for desktop because the decision-makers were focused on desktop deliverables.

More stories to tell…

ABP pension fund

For almost 100 years ABP has been the pension fund for people working in the dutch government and education sectors. 1 out of 6 people in the Netherlands receive or will receive a pension in the future from ABP.

The airline story

We worked for the national airline of the United Arab Emirates. It is one of the world’s premier airlines, well-recognized for its first-rate services, dedicated crew, and comfortable flights.

TNT Express / Fedex

It all begins with an idea. Maybe you want to launch a business. TNT Express is an international courier delivery services company. And since 2016 it is a subsidiary of FedEx, with its headquarters in Hoofddorp, Netherlands.

Let's get creative