S&P Global Platts Cflow

Analyzing Commodities at Sea

In 2016, S&P Global engaged me to lead the redesign of CFLOW, a newly acquired vessel tracking application within the 'Commodity Insights' division.

This addition to their market data portfolio introduced a powerful, data-rich mapping tool. While the app had extensive capabilities, usability had not been prioritized, creating an urgent need for a dedicated Lead UX Designer.

The product serves a global user base, including analysts, traders, and shipping planners, providing critical information on all major tankers, whether stationary or in motion. The app also features custom alert systems to track pattern disruptions.

My role as a Senior UX Consultant was to rethink and redesign the complex product offering from the mind of the user, by enhancing the usability, align it with existing design patterns across S&P Global Commodity Insights.

Team

Joel Gill, Chandrima Ahmed, Stuart Reed, Richard Collins

Skills

User Research & Testing
Data Analytics
Stakeholder Management
Product Design
Web Application Design

My Role

Senior UX Consultant

Timeline

Q2 2016 (MVP)
Several Redesigns from 2016 -2019

Location

Canary Wharf Headquarters, London

For Context, view 'CFLOW' Shipping Visualisation (Youtube)⟶

Design Process

Background

When the project began, the application was built around business needs rather than user needs. I introduced a design process that included:

• A comprehensive product audit
• In-depth analysis with the Product Director and Technical Lead
• A review of key page functionalities

Contextual Inquiry

At Platts, I saw an opportunity to really understand how cFlow was being used on a day-to-day basis.

To do this, I had conversations with colleagues in London and set up Skype calls with other team members in Singapore.

I connected with a mix of Senior Analysts and Product Owners to get their insights.

What stood out were the consistent patterns in how they used the app, which matched up with the metrics showing high activity in areas like search, filtering, data viewing, and extraction.

Analysis & Ideation

To facilitate wider conversations and engage stakeholders, I used a central area of the floor to map out the entire app architecture. This exercise brought several issues to light, including:

A bloated, overloaded dual search
Limitations in overlay designs for filters
Ambiguous iconography
Inconsistent graphic elements where data is displayed
Redundant functionality with repeated links

From these insights, I sketched out the entire app, offering various design suggestions for each page.

Web Application Navigation

The premise for the IA was naturally to cluster the content types in the most logical way.

The following navigation was the suggestion for the long game architecture of the app; consolidating the pages to three main areas. Further, within the map page itself one of the stronger cases was to merge two different search fields (as it stood) into a single one, but with capability of specifying the specifics, such as vessels only, location only.

This was a convincing case, but with the timelines such a fusion was too time demanding, so it became an element I strongly emphasized in the long term map designs later.

In the pragmatic scenario, there were several quick wins in terms of the UX of the navigation, such as grouping feture by their functions (i.e conjoin singular layer functions, separate view modes as other function, etc)

Accessibility at Sea

A key aspect of making the map effective was ensuring the color scheme supported data visibility, emphasizing strong contrasts between layered items and background colors.

I thoroughly explored the palette for vessel types, focusing on visibility over default Google Maps and satellite options. To enhance contrast, I recommended introducing a third shade of blue, which was well received.

Designs for Minimum Viable Product

Redesign in use at the Singapore office in 2018

Initial impact

The first release, within the short deadline of a few months of the start of the UX process was a substantial upgrade. It reached out to a market that is depending on creating data models, and was received positively across the industry.

Understanding that these designs were short term wins, the next work was to create a holistic product that caters for a lot more data, and surfacing the prime user needs without confusion.

Cflow Design Iterations - Table data sets (2017-2019)

Predictions & Calculations

As new product requirements came in, specific to data sets relating to the Journey and Cargo delivery for vessels, I worked closely together with the stakeholders to help them illustrate the behaviours they were describing.

As such I was able to guide the team gain clarity to develop simple, intuitive designs for large schemes of data.

Cflow Design Iterations - Map Design (2017-2019)

Brainstorming sessions

Together withe the product owner and technical manager we sketched out the ideas on whiteboard and iterated accordingly as we agreed on the ingredients, sequence and interaction design.

Advancements of the Map

Following several team meetings and feedback from customers after the initial cFlow upgrade, I collaborated with the Product Director to develop a user flow that better meets user needs.

Users relied heavily on filter mechanisms and expressed a strong desire for quick access to data views of any given flow pattern.

Additionally, they needed straightforward map filters for essential factors such as cargo status and projections of vessel journeys.

These insights drove the design. This version maintains the key points while improving clarity and flow.

S&P Global Platts Cflow