The Port of Antwerp-Bruges operates the ports of Antwerp and Zeebrugge and fulfills four roles: landlord, operator, regulator, and community builder. POAB plays an essential role in the day-to-day operation of the Port of Antwerp-Bruges. Around 1,800 employees work day and night to provide customer-oriented services, optimal infrastructure, and innovative projects and promote the port at home and abroad.
Challenge
As Lantis oversees the Oosterweel project, which involves constructing a tunnel to complete the ring road around the city of Antwerp, the project is expected to impact road and maritime traffic for approximately eight years. The Port of Antwerp Bruges in cooperation with ‘De Vlaamse Waterweg’ is responsible for efficiently and safely managing maritime traffic, adapting to the challenges posed by the project, including the complexity of one-way convoy traffic in certain areas, necessitating a carefully designed software solutions.
The solution
A custom-built tool tailored to traffic complexity
We designed and developed the Passage Planner Tool, a digital interface that gives traffic controllers and passage planners the structure they need to keep operations running smoothly, even in a high-stress environment.
- Custom-built planning interface for real-time ship scheduling
- Data exchange across stakeholders for up-to-date traffic insights
- Role-based views for VTS operators and passage planners
- Interactive maps and visualizations of ship movements
- Built-in dark mode for optimal use during night shifts
Kicking off the project with a site visit
Diving into the heart of operations, site visits to the Zandvliet traffic center were vital. These observational sessions clearly show the current tool usage and the user's multifaceted roles. Beyond just understanding the existing processes, these visits were a treasure of insights, revealing new opportunities and challenges that might have otherwise remained hidden.
Collaborative ideation: Strategy & Blueprint workshops
After the site visit, we set up the first strategy workshop with POAB.
Focusing on two crucial goals: immersing ourselves in understanding the passage's intricacies and mastering the passage planner's role and responsibilities.
We started with a customer journey and used exercises like personas during this workshop, which proved highly effective. In the personas exercise, we carefully examined the roles and duties of the VTS operator and the passage planner, recognizing their crucial roles in managing maritime passage during construction activities. Fun fact: The passage planner is a new role for which there were no employees yet, so they still had to recruit people for it, and we helped shape the role and responsibilities of this person.
The strategy workshop skillfully mapped out the interactions among the customer (the shipper), the VTS operator, the front-line staff (the passage planner), and the upcoming tool. A significant realization emerged as we worked on the blueprint: the user plays three pivotal roles: before, during, and after conveying through the construction zone. These insights from the strategy workshop propelled us into the next phase of our project.
A blueprint workshop
This workshop seamlessly builds upon the outcomes of the strategy workshop, adding more depth to the service blueprint. This includes specifying the data exchange among various stakeholders and highlighting the software tools currently in use. During these workshops, we also identified practical details such as the ideal locations for traffic lights and where to position measuring points for tracking and tracing the movement of ships. This process transforms the 'future solution' into a more concrete reality. During this workshop, our attending designer also began crafting the initial visualizations for the software.
For POAB, the blueprint workshop had a dual purpose: assembling functional requirements and creating initial hand-drawn wireframes. These two key deliverables provided the UX designer with a solid foundation, serving as a detailed design briefing to kickstart the wireframing process.
Crafting the Digital Blueprint
Wireframing is the crucial phase in our design process, where we strive to create an optimal, functional user experience before diving into the visual styling and development of the interface. We harness the power of Figma to sketch out the foundational layout and structure of the tool, encompassing every button, menu, feature, and content element.
These wireframes serve as a bridge of understanding throughout our project, aiding in effective communication with our design team. They vividly portray how a product will function and flow without getting bogged down in aesthetic details.
User testing
Once the wireframes were in place, what better way to validate the design than by putting it in the hands of its future users? We provided a clickable prototype of the tool to five prospective users, enabling them to navigate and offer valuable feedback. This hands-on testing phase was critical in ensuring the tool was functional, intuitive, and user-friendly. They are now dry-running the tool, with the developed software to ensure that ships can be planned properly, can be tracked accordingly, and that communication lines work as intended. Every piece of feedback brought us closer to perfection!
UI design
Next, we began working on the UI designs, leveraging our strong partnership with POAB for a smooth start in this phase. Our designers are familiar with POAB's design system, facilitating swift progress. At this stage, we are fine-tuning the final designs, including the seamless incorporation of 'dark mode.' The dark mode benefits the passage planner when they have night shifts because it has less strain on their eyes. This enables us to advance the project efficiently, accommodating user preferences for light and dark interfaces.
We will deliver the refined, final designs as we proceed through this phase.