Case Study · S&P Global Platts

S&P Global Platts cFlow

A vessel-tracking and cargo-intelligence platform for global commodity markets. A product analysis and contextual inquiry to surface critical UX friction—and a prioritized roadmap of quick wins for navigation, search, accessibility, and data filtering.

Product Design Contextual Inquiry Vessel Tracking Geomapping Accessibility

cFlow map interface tracking vessels across a maritime region

cFlow · Live Vessel Map

Scroll to explore

01 — The Product

A control room for global commodity flows

cFlow lets analysts and traders watch the world's oil and commodity cargoes move in real time—every vessel, its laden state, its commodity, its route, and the zones it passes through. The map is the product: it's the entry point into pricing, flows, and reports. That density is the source of both its power and its friction.

1,043

Vessels tracked
in a single view

30,034

Zones & ports
mappable

184,500

bbl global cargo
volume monitored

150+

Countries relying
on Platts data

02 — Discovery

Product Analysis & Contextual Inquiry

I started by mapping how the existing product actually behaves—walking each navigation element, each search path, and each map interaction as a user would. The primary navigation offered an extensive set of options that performed very different functions while sitting right next to each other, with no hierarchy to separate them.

Annotated breakdown of cFlow's primary navigation bar — Fig. 02.1 Primary navigation, deconstructed — Filter, Search Vessel & Port, Representation of Data, and Additional Map Layers all share one bar despite doing fundamentally different jobs.

Friction Point

The map as a list

The "Vessels on Map" panel doubled as a list of up to 1,000+ vessels. Icons had to encode mobility (still vs. in motion), direction of travel, and commodity type all at once—legible to experts, opaque to everyone else.

Friction Point

Two searches, one box

Searching vessels behaved differently from searching ports and regions—one kept the zoom level, the other zoomed in. Same control, two mental models, no signal to the user about which they were in.

Friction Point

Flat option overload

Filter, search, data views, and map layers were presented as equals. Powerful, dissimilar functions sat side by side with no grouping—forcing users to scan everything to find anything.

Contextual inquiry of vessels-on-map flow — Fig. 02.2 Vessels-on-map flow

Analysis of the two distinct search behaviors — Fig. 02.3 Search: vessels vs. ports

Vessel group management flow walkthrough — Fig. 02.4 Vessel-group management

03 — Quick Wins

Consolidated navigation & focused search

The highest-leverage fixes didn't require re-architecting the product. By giving the navigation a clear hierarchy and splitting search into two intentional modes, the same dense toolset became scannable—a set of quick wins the team could ship without disrupting expert workflows.

Before

One flat toolbarEvery function competes for attention at the same level

Ambiguous searchOne box silently changes behavior by query type

Layers buried in optionsMap layers mixed in with unrelated controls

No entry point to dataSelecting a map point led nowhere obvious

→

After

Grouped top-level navBranding, map, reports, flows & account in clear zones

Broad vs. focused searchTwo explicit modes with predictable zoom behavior

Grouped layers on mapVessel, location, and layer controls cluster together

Selection as an entry pointAny point on the map opens its data inline

Redesigned top-level navigation with broad and focused search states — Fig. 03.1 Redesigned top-level nav with a consolidated search bar — and the two resulting modes: Broad Search (all entities) vs. Focused Search (scoped to a single type).

Collaborative workshop reviewing the cFlow interface on screen — Fig. 03.2 Working through the navigation model with the product team — the analysis grounded in the live interface, not abstractions.

04 — Visual Language

Accessibility at sea

A single vessel icon has to carry several layers of meaning at once—and stay readable on a glare-prone screen, in a moving environment, at any zoom level. I treated the icon system as a small typographic problem: assign each variable its own clear, non-competing channel so the map reads at a glance.

Channel 01

Mobility, by shape

In motion, stationary, and stale vessels each get a distinct silhouette—so status is legible before color is even processed.

Channel 02

Commodity, by color

A consistent palette ties each icon to its commodity type, kept distinguishable for color-vision deficiencies.

Channel 03

Laden state, by fill

Full-laden, part-laden, and unladen vessels read through fill weight—visible up close without adding map clutter.

Channel 04

Density, by zoom

Detail degrades gracefully: when thousands of vessels cluster, icons simplify to a palette that survives the zoom-out.

Vessel icon system across mobility, commodity color, laden state, and zoom density — Fig. 04.1 The vessel icon system — mobility (shape), commodity (color), laden state (fill), and the simplified palette that holds up at full zoom-out.

05 — Modeling

Scenario prediction & calculation

Cargo rarely moves in a straight line. A single vessel can carry two cargoes loaded at different ports and discharged at different destinations. The scenario model makes that timeline explicit—each load and discharge event placed against "today" so analysts can reason about what's in transit and what's already landed.

Scenario timeline showing one vessel carrying two cargoes between multiple ports — Fig. 05.1 Scenario: one vessel, two cargoes — load and discharge events for Jet and Fuel Oil mapped across Amsterdam, Hamburg, Barcelona, Singapore and Beijing against a "today" line.

Cargos journeys table view — Fig. 05.2 Journeys view — load & discharge ports per cargo

Cargos fixtures detailed table view — Fig. 05.3 Cargo view — grades, volumes & fixtures

06 — Data Control

Filtering vessel data

With a thousand vessels on screen, the filter is the steering wheel. I designed a layered filter that lets users narrow the fleet by type, weight, cargo, and movement status—and made it hold up across compact and fully-expanded states, with overview and list views of the same query.

cFlow vessel filter panel docked beside the live map — Fig. 06.1 The filter panel in context — fleet status, laden split, and cargo volume by country, all live against the map.

Filter, in layers

Each dimension stacks, so a query can be as broad or as surgical as the question demands.

Vessel type & weight — class and custom DWT ranges
Cargo — laden, part-laden, unladen
Movement status — steaming vs. stationary, stale-data flags
Display & saved filters — named, reusable filter sets

Vessel filter across compact, expanded, overview and list states — Fig. 06.2 Filter states — compact, full-expanded, overview & list

07 — Geomapping

Cargo in specific zones

Beyond individual vessels, analysts think in zones—shipping lanes, port clusters, and regions where cargo accumulates. Zone-based geomapping turns the map into an analytical surface: draw or select a zone, and cargo intelligence for everything inside it surfaces in the same view.

Global map with selectable cargo zones overlaid — Fig. 07.1 Zones & ports overlaid on the world map — selectable regions that scope every other layer to a geography.

Zone list system across all zones and port zones with overview and list states — Fig. 07.2 The zone-list system — All Zones and Port Zones, each with edit, overview, list and drill-down states for commodity, fidelity, movement and geography.

When the map becomes the interface, every pixel has to earn its place—structure is the feature.

The Outcome

From a dense tool to a readable one.

The product analysis and contextual inquiry turned scattered friction into a prioritized roadmap—quick wins in navigation and search, a more accessible vessel language, clearer scenario modeling, and filtering and geomapping that let analysts reason at the scale the market actually moves.

← Back to all work