Maritime monitoring system
Product Context
Ocean Shield is a monitoring system for marine vessels that aggregates equipment data, logs, analytics, and system states into a single interface
Instead of mirroring backend structure, I organized the system around user intent and decision flow:
monitoring → investigation → action
overview → subsystem → detail
Information architecture
The system was structured around a clear operational model, starting from a global overview and branching into functional areas like logs, analytics, topology, and system control.
Designing for fast system state recognition
I restructured the dashboard to reduce visual competition and separate system status from detailed metrics. This improved scanability and helped users identify what requires attention without reading everything
Making dense logs easier to scan
I redesigned the table structure to improve visual hierarchy and reduce noise in secondary data. This made logs faster to scan and easier to navigate during long sessions
Designing complex configuration and incident workflows
I designed these screens to support both configuration and investigation flows, ensuring that complex system actions remain structured, readable, and easy to execute under pressure
Data analysis
The view combines a category switcher, distribution chart, and detailed log table to connect high-level patterns with raw event data. I focused on making charts easier to interpret, reducing visual noise, and keeping context visible across all levels of analysis. This helped users better understand trends and detect anomalies without switching between multiple screens
Making system relationships visible
The topology view visualizes connections between devices and supports navigation through system structure. It helps users quickly understand how components interact and identify potential problem areas before diving into detailed analysis
From structure to interaction within the system
Selecting a node reveals its attributes, group settings, and activity data directly within the topology view, allowing users to move from understanding the system to managing it without switching context. A focused state highlights specific communication paths and links them with protocol and traffic details below, supporting deeper inspection and more efficient diagnostic workflows
Designing predictable workflows for complex configuration
This module consolidates protocol settings, interface configuration, and maintenance actions into a consistent workflow. By structuring the interface around repeated patterns and aligned interaction logic, it becomes easier to scan, compare, and configure multiple devices without introducing errors
Supporting both comparison and safe device management
A comparison view aligns interface configurations across devices, making it easier to scan and detect inconsistencies. At the same time, a maintenance view provides access to sensitive actions such as validation, configuration export, and recovery, designed to feel controlled and predictable during critical operations
System settings
Managing users and system settings involves high-risk actions. I structured the interface to make relationships between fields clearer, improve validation, and reduce ambiguity, helping administrators complete tasks more accurately and with greater confidence
Balancing visibility and control in system administration
A simplified view allows administrators to review users, roles, and session activity at a glance, while dedicated settings provide access to time configuration, system services, and maintenance commands. This structure helps users stay oriented while ensuring that high-impact actions remain clear, deliberate, and controlled
Final reflection
Designing Ocean Shield was less about creating interfaces and more about structuring complexity. This project reinforced an important principle for me: in complex environments, design is not about simplifying the system, but about making it predictable, readable, and reliable.
