UX and UI design for real time maritime propulsion and energy systems

Innovative GUI design for integrated electric vessel control

Embedded GUI

UX Design

UI Design

CLIENTTorqeedo
LOCATIONGermany
TEAMUX designer, UI designer, interaction designer, project manager, product owner, researcher

This embedded GUI design gives operators direct control of the vessel drive in every situation, from rapid movement on open water to precise adjustments during harbour manoeuvres. It also clarifies the ship energy management system, bringing propulsion, generators, batteries, and auxiliary loads into a single embedded user interface that feels dependable under pressure.

This project is part of our continued work in embedded HMI and maritime systems, where evidence based UX, real time constraints and interaction architecture shape control interfaces for demanding operational conditions.

Built on seven years of embedded systems design and developed by our UX design agency for maritime conditions, the interface behaves predictably even when the vessel accelerates or visibility drops. Captains see a coherent picture of propulsion and energy rather than fragments scattered across screens. This strengthened Torqeedo position in the market and contributed to the company acquisition by Yamaha.

We applied Dynamic Systems Design, a method that grows solutions through embedded experimentation, resolves tensions between local optimization and system coherence, and stewards implementation until organizations gain independence.

OUR CONTRIBUTIONS

Maritime Field Research

Domain Learning

Option Space Mapping

Interaction Architecture

Sea Trial Validation

UI Design - Day/Dusk/Night

Design System

Implementation Partnership

The management team of the client outside the manufacturing facility
BREAKING
YAMAHA ACQUIRES TORQEEDO
Yamaha Motor Co. has successfully completed the acquisition of Torqeedo GmbH, a leader in electric marine mobility.
READ ARTICLE →
Blown up UI design of the dashboard with two outboard engines
UI design for the screen showing notifications and updates to the engine system
Detail from the UI design for settings pertaining to charging
UI design detail of the energy flow through the electric system
Abstract illustration expressing UI design for nautical applications
Quotes
I love how seamlessly you integrate all aspects of energy management, like having a personal assistant on board!
Mugshot of captain who participated in user research
James Hawthorne, MSc
Master Mariner and Navigation Specialist
Diagram overlaid onto a UI design showing the grid structure of the layout
UI design showing the screen where detailed energy consumption is offered to users
UI design detail allowing users to change the mode of the electrical system
UI Component showing speed overlaid with the grid that depicts how the user interface is structured

UNDERSTANDING THE LIMITS OF THE INHERITED LEGACY

The previous embedded user interface held years of practical insight, yet it no longer matched the complexity of modern hybrid vessels. Propulsion status appeared on one screen, battery state on another, and generator information on a third, which forced captains to step through multiple views to understand power availability during manoeuvres. In bright daylight, low contrast icons made critical details hard to read on the embedded display.

In our research this legacy system became a valuable source of evidence. Its structure revealed how captains had learned to compensate for scattered information and where this compensation created stress and hesitation. Analysing these patterns through constraint respecting allowed us to decide what deserved preservation and what required restructuring. The new control system interface therefore respects the experience encoded in the old design while resolving the structural limits that held the vessel back.

Visual design details showing button states for the user interface

STRUCTURE THAT UNIFIES THE ENTIRE SYSTEM

The vessel relies on many interconnected routines, and the embedded interface now brings them into a single structural logic that remains stable across twenty seven screens, grouped into four primary operational modes. Hybrid drive balance, propulsion demand, and auxiliary behaviour each update at different intervals, yet the interaction design keeps them aligned so captains can understand system behaviour with one glance rather than several.

This structural clarity matters on vessels ranging from smaller craft of about six metres to commercial ships over fifty five metres, where maritime interfaces must support fast recognition rather than slow interpretation. The same organising principle appears in every context, which means that once crews learn the pattern on one vessel, they can transfer that knowledge to other configurations. A disciplined design system makes this possible while still allowing for variation in vessel hardware and layout.

The structure had to be validated by several stakeholder groups to ensure alignment with engineering, product, and operational requirements.

User experience concept showing the state of charge for the electric system
Set of icons used in the user interface

EXACT VISUAL RESPONSE IN EVERY CONDITION

At this level, the embedded user interface has to express each system state with exact clarity. The propulsion indicator moves through three meaningful states of idle, cruise, and full output, while the hybrid drive shows its charge and discharge cycles with transition timing that feels responsive without becoming restless. Battery contribution, generator output, and auxiliary load behaviour update at their own cadences, and the display operates within strict limits for resolution and refresh.

These constraints guide line weight, spacing, and the pacing of state changes. The goal is for captains to register a change on the first glance, without needing to watch the screen for several seconds. During sea trials this precision meant that manoeuvres which previously required repeated checks could be executed with fewer glances, even when the vessel was subject to vibration, sharp movement, or low visibility.

UI design adapted to small screens, with two gauges
UI design adapted to small screen with one gauge
Simplified UI design adapted to a small screen
Alternative UI design for small screen
UI component adapted to small screen
User interaction adapted to small screen size
Abstract illustration showing the process of user experience design for an embedded GUI

A CLEAR VISUAL VOCABULARY FOR OPERATORS

The icons and interface elements form a visual vocabulary that mirrors how captains actually work in daily operations. Propulsion symbols express the state of each motor, battery indicators show the rhythm of energy flow, and mode cues shift cleanly as crews move between navigation, manoeuvring, and mooring. The same graphical conventions appear in every operational mode, which reduces the mental effort required to interpret them.

Each element must remain legible on a ten inch embedded display with limited pixel density, in conditions that include glare, rain, and gloved interaction. The UI therefore follows strict rules for contrast, minimum touch target dimensions, and typography suitable for sunlight readability. These refinements are grounded in testing rather than aesthetic preference. Routine checks become moments of clarity instead of strain, including when operators scan the touchscreen at night or in rough water.

Get a sense of it
Explore at day and night
Day mode
Night mode
Screenshot of the user interface design of a naval GUI
Screenshot of the user interface design of a naval GUI
Propeller that express the application area of nautical design

THE ORGANISING PRINCIPLE BEHIND THE INTERFACE

Behind the screens lies a structural model that explains the behaviour of the entire hybrid vessel. It connects propulsion demand, generator output, battery reserves from roughly forty to two hundred kilowatt hours, conversion units, and auxiliary loads into one readable pattern. This model reconciles the different rhythms within the ship so that fast propulsion updates sit meaningfully alongside slower energy cycles.

Professional captains rely on a single mental map when they judge the state of a vessel. The HMI design provides that map in visual form. It keeps related values in stable positions, aligns scales across screens, and ensures that changes in one subsystem are mirrored by appropriate cues in others. This structural clarity is what allows the embedded GUI to scale from simpler vessels to complex multi generator configurations without altering the underlying logic.

User researcher standing in front of harbour and a nautical map on dark background

EVIDENCE BASED UX/UI DESIGN IS ROOTED IN REALITY

Much of the design work depended on evidence gathered directly on the water through user research and collaborative sessions with captains. Through Sandbox Experiments, across twelve sea trials over six months, with fifteen professional captains, we observed how vibration affects readability, how hybrid energy balance shifts during acceleration, and how glare from cold water reduces contrast on embedded displays.

Testing in temperatures from minus five to thirty five degrees and during night operations between late evening and early morning revealed scanning patterns that only appear in real maritime work. These insights guided concrete decisions about contrast rules, interaction timing, alarm visibility, and screen hierarchy. They also revealed the emotional dimension of control system interfaces, especially the relief crews feel when information remains stable even as the vessel behaves unpredictably.

Touch screen in boat showing the old user interface
The old user interface with two gauges
Detail from the old user interface where users control settings