top of page

Esteban Angelo

Sea Twin

Tanker ship trip manager

Sea Twin is a WebApp that optimises tanker ship trip planning, saving oil companies up to US$150,000/month*

High Fidelity prototype of highlited ship on Sea Twin - 2022 All rights reserved

Overview

Introducing Sea Twin, a webapp designed to help oil transport operators plan tanker ship trips. Tanker ships pick up oil from oceanic platforms and transport it to oil terminals. Sea Twin works as a Digital Twin of the oil transport logistics chain to seamlessly track, analyse and display data, offering updates on the live location of ships, platforms, and terminals .

 

Year: 2021 

Duration: 12 months

Role: Lead Product Designer

My role

As a Design Lead for this project, I was in charge of overseeing the end-to-end design process from immersion to delivery, as well as lead my duo to carry out user research and testing whilst staying in charge of interface prototyping.

The team: 1 Tech lead, 2 FrontEnd devs, 1 BackEnd dev, 2 Product Designers, 1 PM and 1 PO

My role

As a Design Lead for this project, I was in charge of overseeing the end-to-end design process from immersion to delivery, as well as lead my duo to carry out user research and testing whilst staying in charge of interface prototyping.

The team: 1 Tech lead, 2 FrontEnd devs, 1 BackEnd dev, 2 Product Designers, 1 PM and 1 PO

Research

Given our client's industry and line of work, we were dealing with a complex scenario from day one. We knew our client had a major problem with oil ships spending too much time docked in piers due to poor scheduling, and with each extra hour of stand-by came a cost of U$50,000.00. We needed to offer a product that could give better overview of scheduling, thus cutting down stand-by times. We began with running a lean inception, as seen in agile methodology. Topics covered in the lean inception were: Product Vision and Goals, User Personas, User Journey Mapping, Feature Brainstorming, Roadmap, MVP Canvas, DoD and Business Model Canvas.

An important part of the lean inception process is the mapping of our main user's journey. Through this we were able to pinpoint our transport operators' main tasks, what actions were involved in concluding them and what steps represented sensitive pain points. In this case, we discovered that our users struggled immensely with key data being scattered across different platforms, a situation that slowed down their decision-making process significantly. Immediately, we knew our product had to centralise and present reliable real-time data regarding the location of oil ships and platforms, as well as their general operation status and other crucial data. 

User Journey Mapping - From top to bottom: User tasks, Emotions, Opportunities, Features (Find out more about Lean Inception here) - 2022 All rights reserved 

Delivery

After an ongoing cycle of prototypinguser testing and interface improvement, our team deployed a first version MVP onto our clients internal online environment. We used testing methods to keep track of app use and implemented further hypothesis testing to measure our gains. We had predicted that in 6 months, we would have lowered waiting time in piers by 10%. We were surprised to see that in only half of that time, we had ship stand-by decrease by 15%, which consequently led the company to avoid paying an extra US$ 150,000.00 in monthly stand-by costs.

With the help of our client's ability to track stand by times within their operations, we monitored changes in stand-by cost after the introduction of our product. We measured monthly, comparing numbers of new user onboarding with the change in cost, making sure to also count other factors that could influence a change in costs. On the left is our initial prediction for impact, on the right is our real impact which shows a decrease from US$ 1.5M to US$ 1.3M in the span of 3 months. 

2022 All rights reserved 

Ideation

In this step the entire team collaborated to further develop user stories into app features, which led the design team to draft up concepts into wireframe and low fidelity prototypes. We then followed a consistent cycle of prototyping, user testing, revamping and implementing. 

Features: 1 - Map visualisation displaying ships, platforms and terminals according to geolocation; 2 - Table view of all active assets allowing for ordinance; 3 - Filtering list by ships, platforms or terminals; 4 - Search engine on map; 5 - Search engine on table (2022 All rights reserved) 

Collapsed map view - 2022 All rights reserved 

Features: 1 - Highlighted view of platforrm; 2 - Card view containing platform data; 3 - Platform schedule view; 4 - Data sync information; 5 - Tank capacity display; 6 - Next operation display; (2022 All rights reserved) 

Features: 1 - Ship schedule expanded view; 2 - Filter by date and time including future planning; 3 - Operation displayed in schedule; 4 - Next operation display; (2022 All rights reserved) 

Features: 1 - Platform schedule expanded view; 2 - Filter by date and time including future planning; 3 - Queue of ships displayed in schedule; 4 - Schedule divided by available tanks; (2022 All rights reserved) 

Wireframing

It was vital to turn some of the insights from our user journey into wireframes of how data pertaining to oil ships could be displayed. We started by electing all data, ordering it in hierarchy and exploring different ways of viewing this data on a card format.

Wireframing ship information cards - 2022 All rights reserved 

A/B testing

With each visual experimentation we made, we made sure to test with a selected pool of users in order to ensure needs were met. In this case, we A/B tested some of our low-fidelity ship card designs. 

Low fidelity ship information cards - 2022 All rights reserved 

The Design Process

It all starts with one or more problems looking for a solution. In this case, it was important to fully immerse into our client's day to day tasks and find design opportunities for their most crucial pain points. 

bottom of page