Portfolio Project 3: PSA Singapore

Background

Context

PSA is the world's largest transshipment hub in the logistics industry. Due to the effects of COVID-19 that caused big changes in the shipping industry worldwide, it was challenging for PSA's existing IT system to keep up from its operations side. As such, a new product team was set up to help design and develop a new IT system which would contain features and functions to handle the demands more effectively & efficiently. The product team was further subdivided to Yard Planning, Berth Planning & Stowage Planning, and I was under the Stowage Planning team. Each team had 1 designer, 1 Product Manager (PM) and at least 1 engineer.

Under the Stowage Planning product team, the team is in charge of redesigning & developing the Stowage Planning aspect of shipping in the IT system. Namely, how ground operations do their planning in advance on the IT system, in terms of loading & discharging containers, from and onto vessels that are berthed alongside Singapore's ports.

Working closely with my PM, we conducted extensive interviews (UX Research) on Stowage Planning internal users from ground operations executive staff to managerial level staff. This provided a deeper understanding of their day-to-day interactions with the IT system and to understand the pros & cons of the system in helping them to perform their jobs. Then, we consolidated the findings, and I started the design process from there - from initial ideations, to rough sketches, and finally, to the hi-fidelity UI.

Defining the Problem

Users

A total of six Stowage Planner (SP) staff were interviewed remotely by Microsoft Teams. These consists of 2 SP Managers, 2 Assistant Managers (PDM) and 2 Stowage Planner Executives. As this was during the peak of COVID-19 and the staff had busy schedules, remote interviews were preferred and it took about 1 month to schedule and interview with all 6 of them. The consolidation of the research data findings & initial sketches took a few more months due to the data complexity and intensity. A few months of studying materials related to PSA's operations was also needed prior to the research, in order for me to understand more about the shipping domain, and to effectively carry out the UX research.

The staff were asked in detail about their typical workday, which IT systems and touchpoints they interacted with, as well as their thoughts and emotions when they were performing each task, whether it be positive or neutral or negative. They were also asked about what they wished could be improved about the system so it may be taken into account for the future redesigned system.

Interview Findings

These interview findings were all recorded down on Miro, a digital whiteboard platform for collaborative discussions & project management. The UX research findings were used to develop an overall Documentation Process Timeline, an overall Stowage Planning Customer Journey Mapping (CJM), as well as separate Personas and CJMs for Stowage Manager, PDM & Stowage Planner.

Pain Points & Opportunities

❌ Pain Points:

Overall, there were some common UI UX problems across all 3 Stowage Planning staff levels. I will highlight these below.

Vessel Operations & Planning System (VOPS): this platform mostly has existing UX problems, such as: VOPs & Vessel Static dashboard being designed together leading to clutter and poor readability, inability to quickly view all vessels that require urgent attention, and too many existing columns which may lead to confusion - especially amongst newer Stowage Planners.

VOPs Launcher: this platform is the main platform where Stowage Planners make initial Stowage Plans & submits them for approval by the client, prior to the vessel's arrival to Singapore's port. The Launcher was found to mainly have these problems: inability to have multiple combinations for the planning drafts, too many buttons in the nav bar which leads to poor readability and confusion for newer Stowage Planners

✅ Opportunities

Vessel Operations & Planning System (VOPS): The VOPs and Vessel Static should be clearly differentiated at the top Nav Bar, vessels should be separated by urgent/incomplete and normal vessels, and UI readability can be improved further (e.g. removal of unnecessary column bloat, using different colour shades for better data visualization of ETB/ATB & ETU/ATU etc)

VOPs Launcher: allow for multiple draft combination across Mark & Adjust Stowage, Sequencing & Slotting and also allow for multiple final drafts before the final commitment without the need for any deletion, improve UI readability such as using icons to represent Notable Vessel Characteristics and these basic info must be presented at the top of the page, and include a breadcrumb UI for easy navigation back to the main Dashboard

Designing a Solution

Process

The pictures below shows the original UI of the existing IT system, followed by an overview of the pain points of these IT systems, and how I intend to improve on them.

Visual Deliverables

Vessel Operations & Planning Systems (VOPs)

The UI has been updated to dark mode in order to minimise eye strain, especially considering the dark working environment and long work shifts by the Stowage Planners

The ETU/ATB and ETU/ATU have been further subdivided into 4 colour codes of 2 different shades, to signify if the vessel's status is currently pending for that column, or the status has been completed. This improves readability.

All the vessels are now sorted by Urgent/Incomplete and All Vessels, in order to help the Stowage Planning department pinpoint the vessels require immediate attention and work on

Each vessel is further tagged with a specified type of "alert" icon to quickly tell Stowage Planners about exactly what type of work is required for that particular vessel, e.g. Change in Vessel Static would require the Planner to check through the Stowage Plans again as the vessel's structural change will most likely have a direct impact in the container stowage & loading plans

I created two different sketch versions, one where the Urgent/Incomplete and All Vessels are on the same page but in different tables, and another version where they are on different tabs. This helped me do a visual comparison to decide that the latter version is preferred due to reduced scrolling needs, especially when the tables tend to be data-heavy.

VOPs Launcher

For the new UI, I clearly differentiated the VOPs Launcher, and put the Stowage Profile & Vessel Static links at the top right. This allows for improved readability.

I put the most important, time-sensitive and basic information at the top of the page to allow Stowage Planners to immediately have an overall sense of the vessel's status, and what needs to be worked on (if any). The vessel's most remarkable characteristics are also highlighted so Planners can take note of these things when they are doing their planning, instead of having to constantly refer to disorganised documentations from the client with no fixed format.

Lastly, I ensured that Planners can now have multiple combinations of possible plans for their drafts in each section (Mark & Adjust Stowage, CSS, CJS) without any need for deletion, unlike the old existing IT system. This allows for flexibility in planning drafts, and to eventually select the best possible drafts, while also allowing for any quick changes in Plans if the vessel has Exceptions when it is berthed alongside Singapore's port.

Design System

The new UI has a focus on dark mode UI in order to minimise eye strain for Stowage Planners who work in shifts. "Asap Condensed" font face was chosen due to its condensed yet still readable shape, making it suitable for data-heavy UI tables such as this project.

Reflection

This project was my longest project and also my most challenging project from a domain & UX research perspective. The domain knowledge required even before interviewing any users was very deep and niche, so I did my best to learn as much as I could, in order to conduct the best user interviews and ask the best questions from my users. It really helped me to appreciate and understand the fact that there are many different kinds of UX problems out there in the world, and the best approach is to always understand from the domain-level and from the users' perspective, before any design processes are carried out!