optimize
vessel
performance

Designing distruptive maritime platform.

GreenSteam's visions was to create a ground-breaking software powered by machine learning to digest huge amounts of data, and present that back to the customers in an easy to understand way to support their day-to-day decisions when operating fleet of vessels. I've joined GreenSteam as their first designer to create and lead design direction for the new web-based platform (GreenSteam Manager) and redesign UI of the exisiting hardware installed on vessels.

How GreenSteam works

We've performed extensive market research and competitors analysis combined with customer interviews to create a totally new approach in a maritime industry. It might be not obvious, but maritime world is a strange mix of new technologies and old approaches. Most software used on-board or in the offshore offices is quite hard to use, overbloated with features and rarely works on the web (not to mention mobile devices).

GreenSteam Manager's main goal was to reduce number of time needed to learn and use the product. GSM notifies and advices user whenever his attention is required while still offering access to easy data visualizations and reports for each of the vessels. This could be onboard sensors readings, weather data, vessel's performance kpi's.

2020 2020
2017 2017

3 years of user-driven progress

My role

While working for GreenSteam, I was leading the design direction of GreenSteam Manager - company's core product.

GreenSteam Manager is a SaaS B2B platform, where users can import data files from the vessels (i.e. noon reports, bunkering reports, engine performance reports) which will be analyzed using maching learning models. Models will use that data and present vessel behaviour to predict how vessel should operate in near future to optimize it's running and maintenance costs. Using GSM allows customers to greatly reduce cost of the vessel performance such as: fuel cost, fuel waste, hull fouling coating but also improve environmental factor by reducing air emissions.

As a UX Designer within multiple multi-disciplinary teams, I was responsible for the whole Product cycle: user research, market comparison, interviewing stakeholders, remote and local user testing sessions, wireframing, prototyping and final UI design. For a year I was also a Product Owner of "Customer Experience" team, which was responsible only for improving existing eco-system and make it more user-friendly based on the data analysis and customer's input.

During a period of 3 years we've created a succesful and unique platform that uses data and not hardware and allows anyone with basic maritime knowledge to benefit from it, without a need of extenstive training before hand.

Trim Optimizer

Trim Optimizer is GreenSteam's core product. It is a hardware based solution, installed directly on the vessel's bridge and using sensors readings to provide real-time trim advice to the captain and board crew.

First iteration released to public was created without designer's input few months before my arrival. It was already a pretty good working concept, but there was still plenty we could improve.

Onboard workshops with customers

We've liaised with our customers and scheduled set of test installations using our existing MVP.

Prototypes were installed directly on real ships, crew received basic training and we've started gathering data for future analysis.

Prototype installation and workshops with the customer

Goal

After few weeks of usage, we've contacted the crew to conduct in-depth interviews about our product. Our goal was to understand the painpoints and usability issues.

Based on initial input from our customers and internal analysis we've identified key improvements that we've included in the next iterations:

  • Colour match performance number (%) to act as a visual cue for peripheral vision.
  • Simplify KPI overview and show only 4 values at the time
  • Simplify histogram and it's colour palette
  • Add visual advice for recommended vs. actual trim
  • Remove skeuomorphic components and background gradients to keep it easy to read at any light
  • Move content of secondary importance items to additional tabs

Result

After several rounds of iterations, new version of Trim Optimizer was released to the market. We've included improvements gathered from our customers related to the user interface, but we've also managed to cut the installation costs down and reduce physical space required to install our machine on the ship.

Our initial MVP was designed as a web application that needed to be operated via mouse and keyboard and required a standalone PC and monitor. New version was redesigned to support screen touch gestures and we've converted it to the Android app which could be used on the tablet instead.

BEFORE & AFTER

GreenSteam Manager

When I've joined GreenSteam, GreenSteam Manager was already existing for 2 years as a "proof of concept" web application, trialed by few companies. There were a lot of issues reported by the users, product wasn't ready to be scalable for customers with big vessel fleet. Complexity of navigation and data presentation was too high and the product was quite hard to use without prior training and advanced maritime knowledge.

Goal

During internal workshops with product team, CEO, CTO we defined key objectives that we want to achieve in order to succeed with our new platform and differentiate us from the rest of the markets.

Our core goals defined how each of the services for GreenSteam Manager should be designed:

  • make it responsive and accessible from every device
  • make data easy to read
  • keep it simple and allow to dig deeper when required
  • advice → action. Support users in making informed decisions

Challenge

The biggest challenge I had to face was limited access to customers or lack of opportunity to research external audience due to nature of maritime industry. It's impossible to recruit people "from the street" to perform research activites. Also we couldn't test out anything with potential customers due to NDAs and lack of their data in order to present relevant products.

Over time I've successfully managed to identify and "recruit" users from existing customers base that were happy to share insights and try-out our wireframes, prototypes or talk with us on daily basis which greatly improved our delivery process.

Research

During development of various features in GreenSteam Manager I've participated in various research activities that fueled my design decisions. I've always aimed to include customers in as many stages of the cycle as possible.

Each product we've released required a different approach, but the core remained very similar. We would analyze existing data, talk with customers about their needs and problems that could be solved by our upcoming feature, audit the competition and ideate about potential solutions.

Based on the hypotheses defined by business goals and our customers needs, I would start with basic flows and/or user journeys which are helpful to bring everyone on the same page and decide about the possible interactions.

Depending on the complexity of the feature I would create wireframes or clickable prototype that would be validated internally and afterwards with our customers. Based on the observations and feedback received, designs would be iterated for another round of user testing. Sometimes we would try different designs approach or change architecture of the information presented.

While at GreenSteam, I've introduced a Research repo where everyone could store customer's feedback after any interaction with them. This could come from anyone: product team, executives, support or sales. It was very handy for ideation process, as a lot of context coming from i.e. Sales got lost in the past. Thanks to the repo, Product team could always stay "up-to-date" and use it to the fuel the stories in upcoming Sprints.

Each of the new customers, after few weeks of GSM usage would be invited to take part in our survey. The goal of the survey was to capture general feel, performance and easiness of using our platform. If anything raised our concerns I would contact the customer to dig deeper about their issues.

Customer surveys, research repo, use cases repo

Flowcharts

Wireframes

Components

Final design & iterations

In total I've designed over 500 desktop and mobile screens for various ares and features of GSM. Some of them went through different stages of ideation internally or with customers.

What could go better?

Due to complexity of data visualizations we had to heavily modify existing plotting libraries to achieve satisfying results. We've tried D3.js, Plotly (for over 2 years) and in the end - Recharts.

During that time we ended up in a dead end two times, when none of the libraries would support that many data points without sacrificing performance and loading speeds or it wasn't possible to produce some of the features (advanced tooltips, date areas). Other issues came up on mobile devices, where default controls and settings wouldn't work with our products very well. We've invested tons of time on research, redesign and code refactor to achieve results that met desired quality and speed. Maybe if we've reserve and spent more time at the beginning of the research phase and prototype using real data and trying out different possibilities we wouldn't have to face this challenge.

What I've learned?

GreenSteam Manager gave me a big opportunity to learn and try out different visual approaches of complicated data presentation. Removing complexity from multi-layered product using thousands of data points was challenging, but rewarding task. I've also had a chance to dive deeper in cartography, oceanography, weather forecasting and physics.

This was also my first opportunity in designing an interface used on of the biggest moving objects in the World (Queen Marry 2) which involved different security measures and factors to consider compared to the typical web interface.

GreenSteam Manager

Dashboard iterations

Voyage report iterations

Speed Optimizer iterations

Fouling Analyzer iterations