Case Studies – DeepSea’s Cassandra Dashboard
case study

Cassandra Dashboard

I take pride in always delivering exquisite results & solutions for the clients. For myself and the UX/UI team, this means transforming the client brief, input & data into something meaningful and actionable. Empowering the clients to improve the experience for their customers.

Project Specs

Project Type: Product Design, UX/UI Design, Website Design

My Role: UX Research, UX Design, UX/UI Director

Team: Elena Fyseki (UX/UI Designer), Dimitra Kazantzopoulou (UX/UI Designer)

Background

In this project, I was the UX Director for the redesign of the DeepSea Technologies‘ “Cassandra” dashboard app and the website redesign. DeepSea is a startup that started when two engineers realized the potential of applying the latest innovations in Artificial Intelligence (AI) to the shipping industry. Cassandra is a vessel monitoring and decision-making assistant that utilizes state of the art Artificial Intelligence algorithms. Its purpose is to monitor the hull and all key machinery of each vessel in a fleet in real-time and around-the-clock. Like many MVPs, the early product was lacking in usability.

Goal & Mission

The team was responsible for the enhancement of Cassandra, with a customizable dashboard, for each persona (type of user). Our mission for this project was to empower the users, allowing them to see the data, they way they want to see them.

The new Dashboard includes the ability to create & customize dashboards full of data, in a usable and straightforward way. I am immensely proud of what our team accomplished and can’t wait to see how the clients will utilize this new functionality.

The feedback – so far – from the client and the users, is one of unanimous appraisal.

Process

Stakeholder Interviews

The first steps of the project was the meeting with the stakeholders and the stakeholders interviews that followed. They were able to walk us through their company’s vision, the complexity of their product and gave us valuable info in order to have a solid understanding of their product/service. The stakeholder interviews were customized for the role of each stakeholder. We had some questions that were similar for all the stakeholders but a number of them were specifically in order to get their feedback from their perspective, their pain points, concerns and aspirations for the redesigned application.  The questions were in a Google Form, that helped us a lot with the structured registering of the stakeholders thoughts.
Cassandra Deepsea Stakeholder Interviews

Research

To begin my research, I started looking at a few competitors and their similar platforms, analysing UX, IA, UI and key features. The competition offer solutions that most of the time are of bad quality, concerning both UX and UI. So I had the perfect opportunity to help the company surpass the competition, even though Deep Sea is in its infancy.
I identified user expectations, proceeded to a best practices study and then I presented the outcomes to the client, as practical UX recommendations that works as guiding point for UX.

Deepsea Cassandra CEO persona
Deepsea Cassandra Senior mechanic persona
Deepsea Cassandra Junior mechanic persona

Personas

Based on the feedback we got from the stakeholders, we proceeded to the personas drafting, with the input from the client. Critical info about the type of user: demographics, main actions that each persona will need to perform (in essence covering use cases), their technical expertise, their habits, their motives.

This was extremely valuable info, because we based our dashboard customization on the 3 personas (CEO, Senior Engineer, Junior Engineer) that will mainly use the application.

Wireframes

Having all the aforementioned material,  I had all the info we needed, in order to start sketching out ideas, in low fidelity wireframes. My priorities were ease of use, clarity, self-explanatory graphs (and we have lots of them) and a way for each persona to get, from the first screen, the info that she needs the most. As you can see in the following image, starting with the CEO persona, the first thing the CEO sees is fiscal data; savings per month, maintenance cost savings, how much money the company saved in fuel consumption. Simply put, it is information that this persona wanna see when opening the dashboard.
CEO persona wireframe
Deepsea Cassandra Dashboard - Senior mechanic persona wireframe
Senior Mechanic wireframe

Now the Senior and Junior Mechanic personas, they’re part of a different story. The Senior Mechanics wanna see alerts informing them about the condition of various fleet’s vessels, the fuel/energy consumption of various vessels, percentage of consumption due to marine growth and an overview of all the vessels that he’s responsible for. The difference between the Senior and the Junior Mechanic is that the former wants to have – first and foremost – an overview of the general condition of the vessels and then the detailed view.

In this screen you can see the fleet state overview wireframe, a map-based approach;  

 
Deepsea Cassandra fleet vessel overview
Vessel's state map-based overview wireframe
Deepsea Cassandra fleet vessel hover wireframe
Hover over vessel wireframe`

when the user hovers over a vessel, she’s getting info about the vessel

…and when she clicks on the vessel she can be redirected to various parts of the dashboard containing info about the particular vessel.

Deepsea Cassandra fleet vessel click wireframe
Click on a vessel wireframe
Deepsea Cassandra dashboard vessel state overview
Vessel's state overview wireframe

When the user is in the vessel’s state overview view, she can see the – so far – route of the vessel, change the timeline and – in real time – get the route for this time period, see the alerts displayed on the timeline and check out all of the valuable info about the vessel.

An alert system is also implemented as well, in order for the user to be notified for any anomalies and emergency mechanical problems, amongst others.

Alerts wireframe
Deepsea calendar wireframe
Vessel's timeline wireframe

We also have a timeline/calendar combo in order for the user to check out the various events referring to each vessel, have the ability to add a scheduled event, see/hide events and show them on a daily/weekly/monthly/yearly basis.

The user can also add an event in the same screen just by clicking on the time slot he wants the event to happen, just by following a simple wizard. Every action that the user does, we first and foremost have her in mind.

Deepsea calendar; add new event wireframe
Deepsea calendar; add new event wireframe

The solutions are always user-centered, having the users always in my mind and giving them the best possible solution with the use of carefully designed customizations, wizards and step-by-step mini interfaces.

Deepsea cassandra UX to UI (Junior mechanic persona)

UI

The next step after the client’s feedback and the iterations we designed, was the UI design. In the following images you can see how some of the various wireframe views where transformed into UI screens.

Styleguide

The client wanted a dark and a light version of the dashboard and of course for it to be responsive for mobile devices. We provided a thorough style guide that included all the important UI elements (color palettes, typography, graphs, tables, cards, forms, menus). This style guide will help the dev team in order to have all the UI elements at their disposal and it gets easily updated each time we add new elements.

Deepsea cassandra dark styleguide
Deepsea cassandra light styleguide

Impact

The company was awarded the Lloyd’s List Big Data Award, in Dec. 2019. In April 2020 the company raised €3.000.000 / Series A from ETF Partners. In March 2021 300 Vessels were online. In July 2021 the company was backed up by Nabtesco Technology Ventures, raising €5.000.000.

We:

  • made our design decisions facts-based (rather than solely relying on gut feeling and having continuous arguments)
  • achieved more structured and effective work
  • helped the project complete within budget and on time
  • made happier business stakeholders, designers, developers and users