MarineTrack: A marine traffic web application

How I designed a web application to help users track their fleets through the high seas

Type

Case Study

Role

Product Design, UX/UI Design

Date

May 2020

Context

MarineTrack is a fictional project, designed to provide users with real-time monitoring of maritime traffic. The goal was to create a web application that offered a seamless and intuitive experience, allowing users to track vessels in real-time, view routes, and access important maritime data with ease.

Approach

The approach focused on making complex maritime data easy to use and understand. The design included a user-friendly interface with a full-screen map for simple navigation. Users could click on individual ships to see detailed information or use the “Fleets” button to view all ships in a selected fleet. This could be done either on the map or through a straightforward carousel interface. The goal was to create a tool that was practical and easy for maritime professionals to use.

The login screen. The user must enter their credentials before proceeding.

Process

The design process focused on making the large amount of maritime data easy to access and understand. The full-screen map was a key part of the design, helping users navigate quickly. Users could click on ships for more details and use the “Fleets” button to see groups of ships, either on the map or in a carousel.

To further enhance usability, I used a set of clear and consistent icons. These icons were used to help users quickly distinguish between different sections and information, making it easier to navigate the platform and access the information they needed without confusion.

The user can select specific vessels from their fleet, track them and find more details related to them.

Outcome

The final product was a web application that successfully simplified the monitoring of maritime traffic. The intuitive design made it easier for users to track vessels and access critical information in real-time. By organizing the data effectively and focusing on user experience, MarineTrack provided a valuable tool for both industry professionals and maritime enthusiasts.

Interactive prototype

Please find below a prototype of the final designs and experiment yourself. It is strongly suggested that you use the full-screen option at the top right corner of the Figma snippet.

Note: To see the list of vessels, please click on Fleet 3 after selecting “SEE ALL FLEETS“.