You are here:

Home
Projects
User interface for a digital…

User interface for a digital marine gauge

Bamboo Apps were hired to design a custom display UI for a range of electric vessels.

Challenge

GUI for a unique vessel project

The client is a UK-based electric vessels company. They needed a custom multifunctional gauge that would match the design and aesthetics of their vessels.

The company approached Bamboo Apps in October 2022 with the request to develop a touch screen GUI for pilots and technicians. At that point, some of the UI had already been built on a proprietary tool, IQAN Design. The client was not satisfied with that iteration, and wanted the team to completely rework the interface while still using IQAN as the base.

User interface for a digital marine gauge | Challenge

Solution

A UI that reflects the brand

Bamboo Apps have delivered an intuitive, modern, and practical GUI that conforms to all client’s brand guidelines. The software lets users monitor and operate the vessels by utilising data channels connected to different parts of every boat via the CAN bus (said data channels were set up by the client).

Boat operators can view detailed information about the vessel on the home screen and the system screen, manage charging, view settings, log data, receive notifications, and check for updates and maintenance dates. Since IQAN doesn’t support regular logins, different types of users log into the app with special access keys.

Elaboration

Simple, yet informative

Home screen

The home screen is reminiscent of typical marine digital gauges. However, having been designed for a specific vessel, the dashboard has several unique components.

It displays data on the current:

Charge level
Boat speed
Throttle map (Sport, Normal, or Eco)
Movement status (Displacement, Take off, Flight, Landing)
Ride altitude
Range
Environmental conditions (temperature, wind speed and direction)
Pitch, roll, and the rudder angle

In other words, the main dashboard displays all the basic information the pilot requires for safe operation.

Charging

The charging screens are more than a simple marine battery monitor.

There are two different charging screens: one for the ongoing charge and a charge summary. The charging screen for the ongoing charge shows the current energy percentage, battery voltage and temperature, charging current, range, and estimated time remaining.

The charging summary screen appears when the vessel has either finished charging or has been disconnected from the station. It displays the time elapsed since charging started, estimated time remaining (if necessary), and range.

System

The system screen is no less important than the main dashboard. Due to the amount of information it needs to present, the system screen is split into three sections.

Boat overview

The overview shows different components of the boat in the form of buttons. When a user clicks on a component, the UI displays detailed information about the current state of the part. That’s also where operators can check for warnings and notifications, as well as read logs pertaining to a particular component.

Alarms

The alarms screen compiles all system notifications in one place. Different types of notifications are marked in different colours to help users assess situations faster: for instance, alarms are always marked red and alarms are always marked yellow.

Maintenance

The maintenance screen is mostly meant for technicians. It controls updates to the boat’s hardware and software. The technician can also set the date for the next checkup and see which version of the system is currently installed.

Settings

The settings screen lets users flip between vessel and screen configurations.

Vessel settings include:

Switching between throttle modes (Eco, Normal, or Sport)
Choosing steering sensitivity (low, medium, or high)
Enabling/disabling auto transition to foiling
Enabling/disabling speed sensitive adapting steering

Screen settings include:

Brightness
Enabling/disabling home screen lock in foiling mode
Setting the time and switching between 12h and 24h display modes
Setting the date
Choosing whether to display temperature in Celsius or Fahrenheit

Development

Pushing past the limits

The development team consisted of a Project Manager, a Design Lead, a Tech Lead, a software engineer, and a UX/UI designer. The testing was carried out by the client. After all, IQAN tablets receive data directly from the boats stationed at the client side.

Requirements elicitation

The development started with a discovery phase, which lasted 2 weeks. Over that timeframe, the team collected, wrote, and analysed the necessary documentation and learned the peculiarities of IQAN.

Software limitations

Compared to Android, IQAN is very limited, so certain elements of the marine display were impossible to implement and had to be redesigned.

Things like tables, gauges, and pop-ups exceeded IQAN’s default set of features. When not resorting to a complete redesign, our developers had to think outside the box to make things work, even writing and integrating scripts from GitHub.

Changing the visuals once they have already been set up wasn’t easy either. The marine gauge started out with a light theme, but had to be changed to a dark theme midway through development. This wouldn’t normally be a challenge at all, but the limitations of the IQAN Design tool made late adjustments like that quite problematic.

New domain

Bamboo Apps specialises primarily in solutions for ground vehicles, so vessels – and boats in general – was a previously untapped domain for us.

We had to get deeply acquainted with all the terminology and complex inner workings of the tech involved. Aside from giving us the necessary understanding of the product we were working on, the research had allowed us to provide meaningful suggestions and advice to the client throughout the whole development process.

Results

Driving the future of marine transportation

In spite of all the challenges and limitations, Bamboo Apps managed to deliver a great HMI that both looked and functioned exactly how the client wanted. The client’s team was pleased with our work all the way through, particularly with our timely deliveries.

And since we got the software component covered, the client could focus all their efforts on developing the hardware, speeding up the overall time to market. As a result of our collaboration, the client has realised the potential benefits of Android and is considering transferring their digital boat gauges to it sometime in the future.