Next Generation Fleet Management
Redesign of a browser-based application for 2000 container ships
Customer
OCEAN Technologies Group
& TERO Marine
Platform
browser based
Time frame
2019 - 2022
Involvement
User Experience, UI Design, Prototyping, Design System, Icongraphy
User group
ca. 2000 Containerschiffe
Location
Hamburg, Rostock,
Bergen 🇳🇴, London 🇬🇧
Introduction
To adhere to my confidentiality agreement, I have omitted confidential information. All information is my own and does not necessarily reflect the views of OCEAN Technologies or TERO Marine.
In 2019, my phone rang with a project proposal for a "maritime industry software". In the introductory conversation, I was told that the team of 20+ developers, product and project managers had made a weighted list of the resources they would need for the successful implementation of the upcoming project.
1st on the list was the resource "User Experience Designer".
A few days later, I started as the first UX Designer in a company that until then had strongly technically driven, monolithic software on the market.
Context
How broadband Internet on the world's oceans is shaping an industry for the long term
With the increasing Internet connectivity of ships on the high seas (enabled by providers such as starlink.com), the importance of, as well as the requirement for, software for crew members has changed dramatically. Increased dynamism, interconnectivity and number of variables involved in decision making makes many maritime software users veritable "information brokers".
Legacy software was no longer able to cope with this new reality, which inevitably led to a large number of inefficient workarounds on the part of users.
Research
Once the scope of the project was set, we decided as a team to embark on a research phase lasting several months. Our research plan was divided into a series of interviews with internal stakeholders, as well as contextual inquiries on board container ships in Greece, and shipping company offices in Hamburg and Bergen (🇳🇴). In total, 26 interview sessions took place with 6 customers in 4 countries, the synthesis of which resulted in a group of personas and several user journeys.
“I know exactly what our users want!”
In the first interviews with internal stakeholders, a certain skepticism towards the topic of UX and our work was apparent. Therefore, I decided to document the findings of the research phase transparently and easily accessible for all project members in Dovetail from the beginning, as well as to schedule additional interviews with people with concerns. I recorded the sessions with users using a Go-Pro camera, from which I edited 3-minute highlight videos that were shown in the 14-day hallway meetings with the project team. Inviting project members to user interviews was not always possible due to technical constraints and physical distance - however, some participated as silent listeners through a video stream. In addition, there were monthly "UX Update Keynotes" in which the project team was informed about results of our work.
After the additional interviews, it became clear that a group of internal stakeholders had a precise idea of what the layout of the new solution should look like. The product management decided to let me implement these ideas in a series of static screens to compare it later with a concept based on research / user feedback.
Ideation
Based on a series of How-Might-We questions, two ideation workshops were held in which we used the 6-3-5 method to collect initial concept ideas, which were transformed into a catalog of ideas after a voting process.
Based on the results from the ideation workshops and the previous findings from the research phase, I created another series of static screens in order to compare them with the "worrier" concept. The upcoming customer seminar in Hamburg was a good opportunity to present both concepts to the plenum. The voting that followed could not have been clearer: none of the votes went to the "worrier" concept. We therefore continued to develop the other concept.
UI Design & Prototyping
Following our validation plan, we decided to create a clickable prototype in Figma to use for further feedback sessions. Already at this point, we received more and more requests from marketing to present the concept to some existing customers.
At this point, only a rudimentary brand manual existed. Therefore, the project managers decided to have me create a design system. With the Nautic Design System I created a flexible and scalable basis to be able to design a consistent user interface for the upcoming projects. Even though Figma did not offer native support yet, the developers and I decided to use design tokens from the beginning to facilitate collaboration.
Based on the design system, I created a high-fidelity prototype that we used to validate the core-paths of the application in walkthrough sessions with users. I will not publish the screens here, as they were still under development at the time of writing.
Reorganization
In late 2022, there was a restructuring of the company, whereupon I did not want to extend my contract at my own request. In the time that followed, I was primarily involved with the documentation and handover of UX topics.
Conclusion
I was very fortunate to be part of an extremely exciting transformation in the maritime industry for over 4 years. For most of the people I worked with during this time, a human-centric, collaborative approach was completely new.
On the part of the users, there was a lot of feedback on the legacy applications, some of it emotional, which contained a lot of frustration.
Through the hypothesis-based and agile approach, we were able to address a large part of the users' pain points, and in many interviews we felt a real sense of relief that the inefficient workarounds would soon be a thing of the past.
The biggest challenge in this project was to add UX methods to the existing process and establish routines / ways of thinking within the company.
My biggest learning from this project is the high importance of a transparent way of working in order to orchestrate human usage needs with technical and economic frameworks.
Close case study