Process
prototype

Introducing training in Wavefoil interface: first iterations

The first iterations of the Wavefoil prototype: the interface, the training menu, an explore mode, and a second round with decision support, debriefing and comment states.

  • Wavefoil
  • prototyping
  • explore mode
  • process

Having tested prototyping with Claude Code on my first concept sketches, I began introducing the training concept on a new case: Wavefoil.

In the previous post I ended with three ideas to test: letting users try an application's functionality in a safe environment, adding comments so captains can share experiences despite not working together, and making sure the training works in a compressed version of the interface as well as in the larger one.

This post documents the iterations of the Wavefoil prototype, one at a time, in the order I made them.

First iteration: the interface, the training menu and explore mode

The first iteration has three parts. The first is the Wavefoil interface itself, with the ship, the wave conditions, the engine power and the controls for deploying and retracting the foils. The second is a training menu, reached from the menu in the top bar, with the same structure as the one in the Orkla prototype, scaled down to fit the smaller screen. The third is an explore mode, where the user can use the interface freely without controlling the real system, and leave comments on the components for the other captains to read. Getting started and Scenarios only show their overview pages so far, as the training sequences behind them are not built yet.

The Wavefoil overview screen with the ship, the wave chart, the engine power panel and the foil controls
The deploying dialog, with the foils half way out, a progress bar and a button to cancel the operation
The training menu home page, with an illustration and cards for Overview, Getting started, Explore and Scenarios
The Explore page, with the button that starts explore mode and a list of the latest comments
The overview screen in explore mode, with a teal frame, speech bubbles marking comments and a tool row in the corner
A comment thread open on the left, with the part of the screen it is about outlined on the right
The Wavefoil interface: the ship, the wave conditions, the engine power and the controls for the foils.

I tested this first prototype on a captain who has Wavefoil on their vessel. He was positive to the training concept, but pointed out that it does not necessarily have to be exclusively available in the bridge screen. He could imagine using it at home for example. He also gave me valuable feedback on the interface itself, which is still a work in progress. Clearer controls, and the possibility to monitor the two foils separately were important takeaways.

When testing on an OpenBridge designer, I also got some valuable feedback on interaction patterns and how the new components relates to the OpenBridge design language. The Comment functionality could be communicated more precisely, and benefit from OpenBridge styling.

Second iteration: Improved WF interface and training interactions

The feedback from the WF operator let me iterate on the interface itself, to more precisely cover their needs when operating the system. I also added a more comprehensive decision support and debriefing function on separate pages, to provide more insight "in-action", and also work as a sort of continuous learning feature baked into the interface.

The explore and comment function was tidied up to have more precise and intuitive interaction patterns, with added states to the comment pins.

To try the decision support without waiting for the sea to change, the prototype has a simulated sea state under the screen, with ideal, harmful and wicked waves.

The updated Wavefoil overview with both foils drawn out, a level for each foil and the three foil controls
The decision support page in ideal waves, with wave conditions, vessel motion and engine power, and blue advice frames
The decision support page in harmful waves, with a yellow caution frame and a recommendation to retract the foils
The decision support page in unclear wave conditions, with a floating advice suggesting the foils are tried for five minutes
The debriefing page with a voyage timeline on the left, a map with the route and a graph of engine power with the foil periods marked
The overview in explore mode, with comment pins in different states on the vessel, the STBD level and the top bar
A comment thread open on the left, with the other pins on the screen disabled and the commented foil outlined
The updated overview. Each foil has its own level, so the two can be monitored separately.

Third iteration: Practice and testing

I wanted to answer the users' wish to study equipment at home, and decided to explore a practice and testing feature. In the previous Orkla case I already tested the initial run through sequence of the interface, and I thought it could make sense to put the practice/test at the end of each chapter. I made some simple components for testing knowledge, and had Claude generate placeholder questions based on the interfaces. To user test this concept I opened it on a tablet, mainly to test it on touch screen, like the actual WF screen is, but also to test the possibility to run it on a device many people already have at home.

The Getting started page, with a table of chapters, each with a result, a status and a button to start or open it
The overview framed in teal, with a toast saying that the Operating the foils chapter is starting
The first step of the sequence, pointing at the Overview item in the menu, with the rest of the screen washed
The second step, with the foil status illustration lit up and an explanation under it
The fifth step, with the deploy button lit up and an explanation above it
The step menu open in the corner, with the steps along a line and the last ones packed into a stack
A modal titled Test, with a short text and a button to start the test
The first question of the test in a modal over the washed interface, with a start button and a toolbar of five steps
The overview with a toast saying Deploy the foils, with a handle to drag it and a ring that runs down
A scenario playing by itself, with the foils half way out and a toast with the question
A question with four answers to choose between, one of them selected
A table of the five questions with the answers and a score for each, and a total score at the bottom
Getting started lists the chapters with a result, a status and a button to start or open them.