UX UI design case study: innovative embedded GUI design
UX and UI design for outboard engine control panel

Innovative GUI design for electric propulsion systems

Embedded GUI

UX Design

UI Design

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

This embedded user interface empowers ship operators to control their vessel’s drive, whether they are navigating at full throttle on the open sea or mooring in a harbour.

It also provides users with essential control over the entire energy management system of their ship, allowing them to manage endpoints such as the microwave and sound system.

The technical development had been ongoing for years, and the customer trusted our UX design agency to transform the GUI into a compelling solution that stands out in the market.

OUR CONTRIBUTIONS

Requirements Mapping

User Research

Benchmarking

UX Design

Prototyping

UI Design - Light and Dark

Design System

Quality Assurance

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

THE AIM: AESTHETIC AND TECHNICAL PERFECTION

We worked very closely with the core team at Torqeedo contributing not only our expertise but also our ambition and energy to achieve a design standard that surpasses anything previously seen in their industry. This commitment reflects not only our personal dedication, but also honours the immense effort they have invested in this project.

Throughout the entirety of a UX and UI design project, there is a significant tension between the simplicity of an elegant design and the extensive technical complexity it must encompass. Ultimately, our design solution achieves a balance that honors both aspects in a way that transcends boundaries.

Visual design details showing button states for the user interface

UX/UI DESIGN FOR AN EMOTIONAL RESPONSE

A UI design that is intuitive and easy to understand sets a high standard. We went further by deliberately crafting an additional layer that offers users a deeper sense of satisfaction, evoking an emotional response. Every meaningful experience has an emotional dimension, and in this design, we incorporated elements that elicit the subtle hues and nuances that evoke Torqeedo as a brand.

This pinnacle of UI design can only be achieved by building on a solid foundation, in which the deeper layers of user experience, layout, and architecture have been fully developed.

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

THOUGHTFULLY CRAFTED DESIGN DETAILS

Details make or break an engine, and they have an equally significant impact on user experience in embedded interfaces

We identified all the essential details and organised them into a task bank. Further, we developed a strategy to design each one systematically, ensuring they are coherent, functional, and easy to maintain. This approach applied to icons, buttons, components, and state indicators within the UI.

By iterating within iterations, we achieved a level of perfection that spans from individual components to layouts and the overall user experience.

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

THE UX/UI DESIGN SETS A NEW INDUSTRY STANDARD

Ultimately, this user interface creates a memorable user experience that resonates with users on multiple levels. Our design deliverables not only meet but exceed industry expectations by harmonising aesthetic appeal with advanced technical capabilities.

By prioritising user needs and integrating emotional layers into the interface, we foster a deeper connection between the brand and its audience. This approach not only elevates the user experience, but also positions our design as a benchmark for excellence in the industry.

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

EVIDENCE-BASED UX/UI DESIGN IS ROOTED IN REALITY

We practice evidence-based UX/UI, a methodology for making informed design decisions. It allows us to ground design choices in empirical data, ensuring that every decision is backed by rigorous research and user insights.

To gather comprehensive data, we employed a variety of methods, including observational studies at sea, laboratory testing, participatory design sessions, and in-depth user interviews.

Each research method is important. For instance, our observations at sea allowed us to witness firsthand how operators interacted with the system in real-world scenarios, while lab testing helped us assess the usability and performance of our prototypes in controlled environments. Furthermore, user interviews allowed us to delve deeper into individual experiences, providing qualitative data that enriched our understanding of user motivations and preferences.

Throughout this process, we meticulously reframed the questions we pursued to ensure they aligned with our objectives.

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

THE STARTING POINT: A BLAND STATUS QUO

The starting point for this project was the previous Torqeedo interface. Although it was not our client's favourite, we used it as a foundation to gain insights into the system and the lessons learned along the way.

It served as a valuable reference for engaging with users, helping us understand their perspectives and expectations for an improved user experience.

By analysing the existing interface, we identified key areas for enhancement and systematically integrated user feedback to inform the design of a more robust and efficient GUI.

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

TECHNICAL COMPLEXITY IS EMBEDDED IN THE DESIGN

The engineering behind Torqeedo engines is a marvel of complexity. On one side, there is the intricate thinking and technical sophistication that ensure each system operates effectively. On the other, there is a diverse range of use cases, spanning from small vessels to large commercial ships, as well as the interplay between fully electric and hybrid systems.

To integrate all these elements into a GUI design that functions as a cohesive system rather than merely a visual representation, we needed to comprehend and incorporate the technical sophistication into our process.

Next, we developed innovative design methodologies as part of a broader strategy to ensure these considerations shaped the design and found their rightful place in the user interface presented to ship operators while they are at sea.

Cover for SaaS design case study with worker staring at machine
UI design component for charging
UI design component for switchboard with energy flow diagram
Diagram showing the range of applicability of the UX design concept

WE MAPPED UX DESIGN OPTIONS SYSTEMATICALLY

After several iterations, we finally arrived at a UX design that caters effectively to both amateur and professional users. Initially, we considered creating two separate user interfaces—one for each group—but as we delved deeper, we discovered a more elegant solution.

By systematically exploring various layouts and component configurations, we developed a unified structure that balances simplicity with advanced functionality. It remains intuitive for beginners while offering the flexibility required by professionals. Additionally, we ensured the user experience design works consistently across different types of vessels and priorities, maintaining seamless usability even on smaller resolutions.

Wireframe showing one of the user experience concepts
User experience design idea captured in wireframe
Version for user experience design of the dashboard
Wireframe showing one of the user experience concepts
User experience design idea captured in wireframe
Version for user experience design of the dashboard
Wireframe showing one of the user experience concepts
User experience design idea captured in wireframe
Wireframe showing one of the user experience concepts
Version for user experience design of the dashboard
01 /10
arrow left
Arrow right
Abstract graphic expressing the idea of energy balance in electric propulsion systems

WE SIMPLIFIED ABSTRACT CONCEPTS FOR EVERYONE

Unfortunately, the world is complex. Managing energy on a ship involves several abstract concepts, such as energy balance, which can be challenging to grasp.

Our goal was to incorporate these concepts into the interface in a way that helps users develop a reliable intuition.

We needed to find methods to communicate the impact of these concepts on the ship's physical reality without relying on words. This required an analysis of the relationship between the underlying physics and the various ways people interpret information.

Drawing on these insights, we designed UI components that effectively communicate states and exhibit behaviours that allow users to infer their meanings. While there are limits to these components, repeated testing enabled us to identify behaviours that gradually cultivate users' intuition about what is happening and how it works.

Diagrams showing alternative designs for UI components that signify energy balance

REGULAR TESTING, ASSESSMENT AND REFINEMENT

Our testing and assessment process involved engaging a diverse group of real users, including recreational boaters, commercial operators, and marine engineers, ensuring we captured a wide range of perspectives. We established organised routines, conducting structured usability sessions where users interacted with prototypes while verbalising their thoughts.

In parallel, we facilitated focus groups with panels of engineers, including electrical, mechanical, and software experts, to evaluate technical feasibility and integration. Each session was meticulously documented, allowing us to analyse user feedback and engineer insights systematically.

For example, we implemented iterative testing cycles, where insights from one round directly informed adjustments in the next. We also employed task analysis, breaking down complex interactions into manageable steps, which allowed us to fine-tune UI components for clarity and efficiency. This rigorous, process-driven approach ensured that our design decisions were grounded in real-world usability and technical validation.

Two user researchers in boat out at sea
Design elements

UX/UI DESIGN MAKES A LEADING PRODUCT

The excellence of our UI design has significantly contributed to the successful sale of the company, positioning it as a standout leader in its market. This transformation has turned the product into a jewel, captivating users and stakeholders alike.

Achieving this level of success required close collaboration with a diverse range of individuals, from ship operators to engineers and stakeholders. By adopting an evidence-based approach, we meticulously gathered insights and feedback, ensuring that every design decision was informed and purposeful.

Our process-driven methodology allowed us to refine the user experience continuously, integrating user needs and technical feasibility seamlessly.

The result is a user interface that not only enhances functionality but also fosters emotional connections with users. This commitment to excellence has solidified the company's reputation, making it a desirable asset in the industry and driving its commercial success.

Have a project in mind?

Stylish girl wearing sunglasses
Stylish girl wearing sunglasses