Booking Project

Self service instant booking application
Home / Portfolio / Booking

New Self Service Instant Booking journey

The online self service instant booking application (SSIB) currently processes 300k booking daily into an automated online process. Part of the IT transformation programme is to update the booking platform and update the frontend framework to Vue.js (New Javascript framework). The booking application alone generates $24 billion in transactions per year (double that of, this is the flagship application within Maersk.

SSIB (Self Service Instant Booking) was created in 2012 and stayed in beta for about 5 years. It got pushed to production in 2018 and is set to replace the legacy SSP (Self Service Portal) application which still take around 50% of all bookings. Due to the complexity of the frontend fused with the Java layer, this is a lenghtly process and part of this change to to seperate the two layers out and resdesign the customer journey and relevant screens.

I was asked in January 2020 to lead the UX on this new booking platform application, but before i did anything i needed to understand the application and how it currently works. After speaking to many SME's I created the customer journey map and included all the application that i use to work on for quoting. I was asked to make it very detailed and now it currently is hung on the wall at the Maidenhead and two Copenhagen offices.

Customer journey map

Customer journey map - Booking and Quote (browser version) (Password: Maidenhead)


Before i start i always like to go through a few whiteboard sessions with the Product Owner, Senior stakeholders, Application architect and the Business Analysis to understand the requirements and thrash out the detail. Especially what the benefits are and what is expected in terms of the final solution. These sessions are several hours and last several days but at the end it makes it easier to understand the requirements and what the business are ultimately after. I always like to sketch out the customer journey and challenge the business on improving this.

Some whiteboard sessions

New customer journey map

I then like to go through te existing designs and take note of all the pain points in the journey. I also look at the research that has been done on the existing application and in particular the elements were teir are issues or frustrations wit te journey. Is tere someting better tat can be done, could te number of screens be reduced or can we make te UI more intuative to make less fields to fill out.

New SSIB Customer journey map (browser version) (Password: Maidenhead)

Future vision of the Customer journey

I also simplified the booking journey and combined all the other booking journeys into one to show how the ultimately journey could look. Thus having all the customers going to one place for all bookings.

Future vision (all bookings in one place) (browser version) (Password: Maidenhead)

Concept designs - OD3CP page (Step 1)

The business seem to be very interested in the concept designs and seeing polished versions of these designs. As the wireframes get presented to C-level executives i am asked to make them look as close as possible to as if they were the actual finished product. I also create a responsive widget in the top right corner to allow the user to change the view ports (switch to Tablet and Mobile). I start of by creating the OD3CP page (Origin, Destination, Customer, Commodity, Container and Period). All bookings and searces to retrieve data from the backend must have these 5 fields as a minimum.

Current OD3CP page - Desktop only version (not responsive)

Concept design - Desktop version

OD3CP concept design (browser version) (Password: Maidenhead)

The NEW OD3CP page (browser version) (Password: Maidenhead)

Final design - Desktop version

Final design - Tablet version

Final design - Mobile version

OD3CP page - key findings

At Maersk we have a dedicated team of 30 people called the 'Customer Insights team' who methodically spend teir their time contacting customers and engaging wit them to find areas within the current application were their are frustration points. Several key areas were identified and that area was explored more by me and from their i proposed a solution and then it was tested on our user via online automated tools (User Tribe) and also engaging directly with booking agents and engaging in depth interviews and contextual inquiries.

OD3CP page - Price owner

One area that was frustrating our users was the 'Price Owner'. A price owner is the person who will ultimately pay for the cargo to be shipped. In smaller and medium sized organisations this is typically the booking agent who places the booking but in larger organisations these can be different people depending on what the commodity is and where it is being shipped to. The research found that 70% of users were the 'Price Owners' and the remaining 30% where not but tey knew to search for the correct price owner from the search. Therefore it was frustrating for the 70% to always ave to searcg for a price owner when they were the price owner. Te link below covers the details of ow the screens work giving the users thhe opportunity to click one option on the screen to state tey are the price owner.

Price Owner details (browser version) (Password: Maidenhead)

OD3CP page - NAC and commitment process flow

Another area of confusion especially around the logic on what the application checks and how it validates the information was the NAC (Named Account Customer) and the Commitment Allocation Agreement which the user has with Maersk. I created a process flow diagram to help myself and the developers understnad how that would work. I ten played this back to the SME's and application architects to verify if this is correct before i looked into designing the screens.

NAC and commitment agreement flow (browser version) (Password: Maidenhead)

OD3CP page - NAC and commitment screen designs

Based on the flow above the following screens were designed keeping the designs patterns the same as that used in the 'Price Owner' and also the design system standards.

NAC and commitment agreement screens (browser version) (Password: Maidenhead)

NAC + Alocation screens - Desktop version

Concept designs - Sailings page (Step 2)

Regarded as the most important page in the whole journey, this page will determine if the user will continue from this page or will drop off. It is vital that both the product offering and clarity of the route details and the price entice the user to continue with the journey.

Current Sailings page - Desktop only version (not responsive)

This is the sailings page that was recently updated (about 6 months ago) by another team. When i reviewed this design i have noticed many usability issues and i bought that to the attention to the UX team and PO's. The big reveal of this design and the progress by the development team meant none of my concerns would be addressed. After intensive discussions i was given the lead role to improve the whole whole journey without too many backend changes to address the UX.

Concept design - Desktop version

This concept design was created and it had to go through many reviews and stakeholder feedback sessions, where everyone in both business and IT felt they had the final say on how it should look. It took 4 months to finally get it signed off by everyone.

Sailings concept design (browser version) (Password: Maidenhead)

Final design - Sailings page

From the initial design to the final signed off version i had to make a few tweaks where i bought it up to the ever changing design standards. Below is an interactive version (pink links are clickable).

Interactive sailings page (browser version) (Password: Maidenhead)




Concept designs - Additional details page (Step 3)

Regarded as the most important page in the whole journey, this page will determine if the user will continue from this page or will drop off. It is vital that both the product offering and clarity of the route details and the price entice the user to continue with the journey. These designs are still in refinement and alot of information needs to be discussed. From what i know of the journey i have created the concept designs to show the stakeholders an end-to-end journey.

Concept designs - Additional details (Port-to-Port)

Concept designs - Additional details (Inland -> Port-to-Port -> Inland)

Concept designs - Review details page (Step 4)

Not finalised but just replicating the information to aplease the end-to-end journey for the senior stakeolders.

Concept designs - Review details

Concept designs - Confirmation/Submitted page (Final screen)

Not finalised but just replicating the information to aplease the end-to-end journey for the senior stakeolders.

Concept designs - Confirmation page