Redesigning a Real-Time Marine Monitoring Dashboard
Product Design • Sensor Data Visualisation • Real-Time Monitoring • Performance Optimisation •
Dashboard Architecture • Alert Logic • Responsive Interface Architecture
Leading the Version 2 redesign of a live marine monitoring dashboard — improving performance, reducing cognitive load, and scaling the interface from single-vessel use to fleet-level visibility.
Role: UX & Product Design Lead. | Team: CTO • 1 Developer | Timeline: ~ 6 weeks | Platforms: Web Dashboard • Tablet Views • Mobile App (MAUI)
Context
The product is a real-time marine monitoring platform designed to surface live sensor data across multiple onboard systems.
When I joined the project, Version 1 of the dashboard had been built using a purchased template. As additional sensors and vessel configurations were introduced, usability and performance issues emerged.
The dashboard was:
Rendering large volumes of longitudinal sensor data on load
Polling updates every 30 seconds
Experiencing delays of 10+ seconds before full data visibility
Scroll-heavy and visually dense
Difficult to scale for fleet operators managing multiple vessels
Version 2 provided an opportunity to redesign the dashboard architecture from first principles.
My Role
As the sole UX & Product Design Lead for Version 2, I owned the dashboard redesign end-to-end.
Working in close collaboration with the CTO and developers, I led:
Dashboard information architecture redesign
Interaction design and widget architecture
Data visualisation specification (Syncfusion & JS Charts)
Alert state logic and severity hierarchy
Performance-aware UX prioritisation
Responsive behaviour across web and tablet
Multi-vessel scalability modelling
I was responsible for translating complex sensor data and backend constraints into a clear, usable, and scalable interface.
The Challenge
The dashboard needed to balance:
Real-time data updates
Multiple live sensor inputs
Individual boaters and fleet operators
Performance limitations
Responsive behaviour across devices
High-density information display
The original experience rendered full historical datasets by default, resulting in:
Slow load times
Cognitive overload
Poor information hierarchy
Limited prioritisation of critical system data
The product required a performance-aware, glanceable interface that preserved analytical depth without overwhelming the user.
Modular dashboard architecture separating high-priority system summaries from expandable analytical views.
What I did
1.Restructured Information Architecture & Hierarchy
I defined a prioritisation model separating:
Critical system metrics
Secondary operational data
Historical trend analysis
Data was grouped into logical marine system categories, including:
Critical Systems
Engine
Fluids
Environmental
Alerts
System Information
This improved information architecture and allowed users to triage by system group rather than scanning raw data streams.
Information hierarchy model prioritising critical metrics above operational systems and historical trend data.
2.Introduced Modular Widget Architecture
I transitioned the interface from scroll-heavy data blocks to a modular, widget-based dashboard layout.
Each widget:
Displays top-level summaries on load
Loads prioritised data first
Supports tap-to-expand modal views for longitudinal trends
Maintains performance integrity
This modular UX approach reduced visual density while preserving depth for power users.
3. Performance-Aware Design
Working closely with the CTO, I responded to backend constraints while contributing user-centred prioritisation insights.
Improvements included:
Reducing initial data fetch volume
Extending non-critical polling intervals
Prioritising high-visibility system metrics
Improving perceived performance
Most critical data became visible within approximately 3 seconds, significantly improving user trust and scanability.
4. Data Visualisation & Alert Logic
Using Syncfusion and JS Charts, I:
Specified chart behaviour and scaling logic
Defined threshold indicators and severity states
Designed alert hierarchies aligned to marine operating conditions
Ensured visual clarity under glare, motion, and variable connectivity
The focus was designing for clarity under dynamic environmental constraints.
Severity-based alert logic and threshold visualisation supporting fast decision-making in live data environments.
5. Multi-Vessel & Fleet Scaling
The redesigned dashboard architecture supports:
Single-vessel monitoring
Fleet-level overviews
Multi-input system comparisons
Responsive stacking across device sizes
The interface scales without requiring structural redesign, supporting both individual and commercial use cases.
Outcomes
While quantitative metrics remain confidential, observable improvements included:
Faster perceived load time
Improved scanability and reduced cognitive fatigue
Clear prioritisation of critical system data
Cleaner multi-vessel overview capability
Reduced visual clutter without sacrificing analytical depth
Version 2 established a more scalable, performance-aware dashboard foundation.
Reflection
Designing for real-time, data-dense environments requires balancing performance constraints, cognitive load, and technical feasibility.
This project reinforced the importance of structuring information before styling it — especially when users rely on fast, glanceable insights in dynamic, high-attention contexts.
*Due to confidentiality, selected visuals and artefacts have been simplified or reconstructed for portfolio purposes.