User interface for a digital marine gauge
2023
Role
Art Director
Services
UX architecture, Hi-fi wireframing, UI design
The client is a UK-based electric hydro foiling vessels company. They needed a custom multifunctional gauge that would match the design and aesthetics of their vessels.
Bamboo Apps has received the request to develop a touchscreen 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.
Challenge and solution
Collection of UX artefacts
On that step Bamboo Apps:
analyzed the requirements and designs that the client provided,
went through the basic interactions between the captain/technician and the ship,
delved into the features of e-foiling vessels.
Ideation and Wireframing
The next step was to determine the primary and secondary actions for the captain, as well as to prioritize the display of the vessel's sensors.
To test the logic and usability, we created hi-fi wireframes.
UI Architecture
Based on the screen's position on the dashboard, its resolution, and the room lighting, we proposed a neat design with highlights on the main sensors.
Software development
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 utilizing data channels connected to different parts of every boat via the CAN bus.
Design Challenge and technical limitations
Since the functionality of IQAN technology is very limited compared to Android, some elements of the marine display had to be redesigned.
Things like tables, gauges, and popups went beyond the standard IQAN feature set. Our team had to think outside the box to combine visuals with functionality.
Development in parallel with design helped solve such problems with minimal time.
Home screen
The home screen is reminiscent of typical marine digital gauges. However, having been designed for a specific hydrofoiling vessel, the dashboard has several unique components.
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, charging current, range, and estimated time remaining.
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.
Settings
The settings screen lets users flip between vessel and screen configurations.
Screen settings allow to cater to market-specific preferences, accommodating variations in date, time, and temperature display formats.
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.
Results
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.