TrueOcean Marine Data Platform

TrueOcean Marine Data Platform

TrueOcean Marine Data Platform

TrueOcean Marine Data Platform

TrueOcean Marine Data Platform

TrueOcean Marine Data Platform

TrueOcean Marine Data Platform

A Cloud Platform and GIS for north.io GmbH. My role was Conception, Creative Direction and UX/UI Design. The project ran from January 2021 to July 2022. I worked with Alessandro Casciaro on this.

www.north.io

A Cloud Platform and GIS for north.io GmbH. My role was Conception, Creative Direction and UX/UI Design. The project ran from January 2021 to July 2022. I worked with Alessandro Casciaro on this.

www.north.io

A Cloud Platform and GIS for north.io GmbH. My role was Conception, Creative Direction and UX/UI Design. The project ran from January 2021 to July 2022. I worked with Alessandro Casciaro on this.

www.north.io

A Cloud Platform and GIS for north.io GmbH. My role was Conception, Creative Direction and UX/UI Design. The project ran from January 2021 to July 2022. I worked with Alessandro Casciaro on this.

www.north.io

A Cloud Platform and GIS for north.io GmbH. My role was Conception, Creative Direction and UX/UI Design. The project ran from January 2021 to July 2022. I worked with Alessandro Casciaro on this.

www.north.io

A Cloud Platform and GIS for north.io GmbH. My role was Conception, Creative Direction and UX/UI Design. The project ran from January 2021 to July 2022. I worked with Alessandro Casciaro on this.

www.north.io

A Cloud Platform and GIS for north.io GmbH. My role was Conception, Creative Direction and UX/UI Design. The project ran from January 2021 to July 2022. I worked with Alessandro Casciaro on this.

www.north.io

Portrait of Colin Reitz, UX/UI, Web Design from Hamburg
Portrait of Colin Reitz, UX/UI, Web Design from Hamburg
Portrait of Colin Reitz, UX/UI, Web Design from Hamburg
Portrait of Colin Reitz, UX/UI, Web Design from Hamburg
Portrait of Colin Reitz, UX/UI, Web Design from Hamburg
Portrait of Colin Reitz, UX/UI, Web Design from Hamburg
Portrait of Colin Reitz, UX/UI, Web Design from Hamburg

About

The TrueOcean Marine Data Platform provides smart management, visualization and analysis of big sensor data in marine applications and sets new standards for simple, safe and smart handling of big marine sensor data and helps to gain deeper insights out of data.

Marine data grows exponentially each year and will continue to rapidly grow using swarms of autonomous underwater vehicles, flocking and other advanced sensor systems going forward in evermore ocean areas. Digitization accelerates this fast changing environment providing the means for big data handling from smart and efficient data management to intelligent data analysis becoming the competitive edge for each data user in marine and offshore operations.

TrueOcean Marine Data Platform Map on Desktop
TrueOcean Marine Data Platform file manager on desktop
TrueOcean Marine Data Platform file manager on smartphone
TrueOcean Marine Data Platform workspace details on desktop
TrueOcean Marine Data Platform workspace details on smartphone
TrueOcean Marine Data Platform map on desktop
TrueOcean Marine Data Platform map on smartphone
TrueOcean Marine Data Platform Map on Desktop
TrueOcean Marine Data Platform file manager on desktop
TrueOcean Marine Data Platform file manager on smartphone
TrueOcean Marine Data Platform workspace details on desktop
TrueOcean Marine Data Platform workspace details on smartphone
TrueOcean Marine Data Platform map on desktop
TrueOcean Marine Data Platform map on smartphone
TrueOcean Marine Data Platform Map on Desktop
TrueOcean Marine Data Platform file manager on desktop
TrueOcean Marine Data Platform file manager on smartphone
TrueOcean Marine Data Platform workspace details on desktop
TrueOcean Marine Data Platform workspace details on smartphone
TrueOcean Marine Data Platform map on desktop
TrueOcean Marine Data Platform map on smartphone
TrueOcean Marine Data Platform Map on Desktop
TrueOcean Marine Data Platform file manager on desktop
TrueOcean Marine Data Platform file manager on smartphone
TrueOcean Marine Data Platform workspace details on desktop
TrueOcean Marine Data Platform workspace details on smartphone
TrueOcean Marine Data Platform map on desktop
TrueOcean Marine Data Platform map on smartphone
TrueOcean Marine Data Platform Map on Desktop
TrueOcean Marine Data Platform file manager on desktop
TrueOcean Marine Data Platform file manager on smartphone
TrueOcean Marine Data Platform workspace details on desktop
TrueOcean Marine Data Platform workspace details on smartphone
TrueOcean Marine Data Platform map on desktop
TrueOcean Marine Data Platform map on smartphone

Survey

A special feature of the platform is the creation of surveys, which in the maritime field is an excursion with a ship to collect measurement data. Vessels are used to carry out the survey, for example a ship that has one or more sensors on board.

Why is it important to represent this process? On the one hand, because the maritime industry wants to structure its data in this way and also manage it on the platform in this way, and on the other hand, because surveys, vessels and sensors plus sensor configurations have an influence on the evaluation and processing of the data. Examples of this are the height or angle at which a sensor was mounted on the vessel or which configuration was chosen for recording the data.

To make the creation of surveys as easy as possible, there are databases for vessels and sensors and their configurations. Surveys can be created from database entries and filled with data.

TrueOcean Marine Data Platform survey configuration on desktop
TrueOcean Marine Data Platform survey configuration on desktop
TrueOcean Marine Data Platform survey configuration on desktop
TrueOcean Marine Data Platform survey configuration on desktop

Data Management

For data management, we rely on best practices so that users can manage their data quickly and in a familiar way. The survey structure is reflected here, but the user can also ignore it and store data freely, not only for sensor data, but also for additional data such as documents, reports and images.

TrueOcean Marine Data Platform file manager on desktop
TrueOcean Marine Data Platform file manager on desktop
TrueOcean Marine Data Platform file manager on desktop
TrueOcean Marine Data Platform file manager on desktop

Data Visualization

Visualization is an important point in the analysis of the data, the platform allows the visualization of the recorded sensor data and provides other datasets such as maritime infrastructure and dumped World War munitions that rest on the seabed.

  • UI design of a layer list and visualization of geodata layer
  • UI design of a layer list and visualization of geodata layer
  • UI design of a layer list and visualization of geodata layer
  • UI design of a layer list and visualization of geodata layer
  • UI design of a layer list and visualization of geodata layer
  • UI design of a layer list and visualization of geodata layer
  • UI design of a layer list and visualization of geodata layer
  • UI design of a layer list and visualization of geodata layer
  • UI design of a layer list and visualization of geodata layer
  • UI design of a layer list and visualization of geodata layer
  • UI design of a layer list and visualization of geodata layer
  • UI design of a layer list and visualization of geodata layer
  • UI design of a layer list and visualization of geodata layer
  • UI design of a layer list and visualization of geodata layer
  • UI design of a layer list and visualization of geodata layer
  • UI design of a layer list and visualization of geodata layer
  • UI design of a layer list and visualization of geodata layer
  • UI design of a layer list and visualization of geodata layer
  • UI design of a layer list and visualization of geodata layer
  • UI design of a layer list and visualization of geodata layer

To give the user full control over the visualization of their data, we have developed tools that allow them to fully edit all vector-based layers. The user is free to display the layers filled or outlined and to decide whether to use a solid color or a gradient based on other data such as the size or risk of the layer objects.

This freedom in visualization is particularly useful not only when multiple layers are displayed simultaneously and the display might be impractical, but also to speed up the analysis by including more details such as size or risk in the visualization.

UI design of tools for editing the visualization of layers
UI design of tools for editing the visualization of layers
UI design of tools for editing the visualization of layers
UI design of a React component for the selection of colors
UI design of a React component for the selection of colors
UI design of a React component for the selection of colors

Architecture

To connect all parts of the platform and ensure consistent and intuitive navigation, we created a modular and flexible frame.

We worked closely with industry experts to optimize the platform for existing processes in data ingestion and management. In addition to the core functionalities of data management, visualization and analysis, data sharing and collaboration play a major role. The Workspace enables companies to share data in the cloud within or outside their own organization, which is a crucial point for accelerating digitalization in the maritime sector.

UI Design of a modular and flexible UI frame
UI Design of a modular and flexible UI frame
UI Design of a modular and flexible UI frame
UI Design of a modular and flexible UI frame
UI Design of a modular and flexible UI frame
UI Design of a modular and flexible UI frame
UI Design of a modular and flexible UI frame
UI Design of a modular and flexible UI frame
UI Design of a modular and flexible UI frame

The screen regions organize the entire application content categorically and hierarchically. Each region serves a specific purpose that does not change across all use cases. This ensures that the user can navigate identically in each application and does not have to reorient themself.

Regions are as compact as possible and as spatial as necessary to ensure an appropriate balance between information density and clear user interface.

The App Bar is an essential part of any application, as it allows switching between applications, searching for content within an application and accessing notifications and the User Menu. The Navigation is needed when content within an application needs to be divided into several sections. The Drawer on the left contains the primary action of an application section and allows the content of that application section to be divided into subsections if needed.

The Header is used to display information, e.g. the category of the current content as well as important information and enables content-related interaction. The Drawer on the right side can be filled individually with content. This drawer is not permanently visible, but appears after interaction with content and can be hidden again. The content is displayed in the center.

TrueOcean Marine Data Platform user menu on desktop
TrueOcean Marine Data Platform user menu on desktop
TrueOcean Marine Data Platform user menu on desktop
TrueOcean Marine Data Platform user menu on desktop
TrueOcean Marine Data Platform user menu on desktop
TrueOcean Marine Data Platform user menu on desktop
TrueOcean Marine Data Platform user menu on desktop
TrueOcean Marine Data Platform file manager on smartphone
TrueOcean Marine Data Platform user menu on smartphone