UI DESIGN FOR MARITIME INDUSTRY
UI Design | Interaction Design | UI Animation | Visual Design

Note: this is an ongoing project, some sections might still be incomplete. It is optimised to be viewed on a desktop device (a.k.a a big screen, not a phone!)

Intro

Similarly to the financial services vertical, the maritime industry deals with massive amount of data, this explains the current need of the major shipping and logistic companies to innovate their operations leveraging on AI, Blockchain and Machine Learning technologies.
Both industries present use cases that are sometimes left out by designer portfolios because they notoriously don’t represent the ideal starting point to design “sexy” screens: long mobile forms to be filled up, busy interactive tables, very intense data dashboards and so on.
I chose these use cases to show how a thoroughly thought out User Interface Design system could somehow enhance usability, general engagement and aid task completion.

Design Principles

Generally speaking I followed three main principles:

  1. Conforming the design to the heuristic principles.
  2. Satisfying the minimum contrast ratio WCAG 2.1 for usability standard and readability.
  3. Relaying on usability patterns that are now common practice in interaction design.

MOBILE FORMS

 

Context
One of the challenges in the maritime industry operations is to deal with fragmented tasks. Due to old legacy systems, operators have often to juggle between emails, spreadsheets and other platform to complete their tasks. An example is requesting a cargo by freight logistics operators.This use case is getting common among a few shipping companies in the process of digitally transforming their operations. This is a typical case that could be improved by a phone app feature to allow operators requesting a cargo from the palm of their hand.

Requesting a cargo is a process which involves completing a form, potentially a long one.
By dividing all the data needed into 4 sections this cumbersome task can become a little more manageable. To improve usability, in these cases, it’s very important to give the user the chance to save their progress and return to this task later on, this is also essential because the operator might not have all the necessary details at hand.
The screens below showcase my take to request a new cargo flow.
Interactions & Animations

To better understand the main interactions while completing the form, see the gifs below:

Opening a sub-section in the form:


Saving an incomplete request to continue later:


Completing a section of the form:

DASHBOARD