Vandersault

Methodology

As per the direction of the new UX function within S&P Global Platt, I was onboard introducing a due design process which our Design Manager was firmly advocating for all projects across the department.

This process helped stakeholders identify which steps were being undertaken at any time, and by following it supported the organisation in seeing how such a framework is crucial and helpful for them to move forwards.

Kickoff/Site Audit

To kickoff this challenge, required first of all a thorough audit/examination of the existing product, both as a quick discovery of the app as a user but more importantly to create enough understanding to discuss with the Product Director & Technical Lead around specifics.

As part of this exercise, I reviewed the top level functionality of all key pages to help illustrate inconsistencies, broken journeys and and evaluation of the Information Architecture as it stood. This was useful, in regard to making a stronger case around the redesign but equally to understanding which areas to focus on.

Contextual Inquiry

There was an opportunity within Platts to understand better how cFlow was overall being used. In this phase I spoke to colleagues onsite in London as well as arranging skype calls with the Singapore office.

One hour shadowing/interviews included Senior Analysts, and Product Owners. Overall there were consistent patterns of use which very much reflected the metrics available on which areas of the page have higher hit (search, filter, open data view, extract data). 

Initial Stage

To create a wider discussion and engage stakeholders I used one of the central areas of the floor to map out the entire app architecture. This highlighted issues such as : 

1. A bloated, overloaded dual search 
2. limitations of overlay designs for filters 
3. Ambigous iconography 
4. Inconsistent graphic elements where data sits. 
5. Redundant functionality (links often repeated).

From this I could sketch out the entirety of the pages with various design suggestions for all the pages.

Main 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)

Process

As a narrative and a framework, these principles were useful to define direction for the App. New data sets were being made available for example, such as pipelines and refineries (including status). This would allow understanding for an extremely comprehensive overview of energy movement across the globe.

Map Accesibility

One of the primary elements of making the map work, is to ensure the color scheme does support data on equal levels, i.e emphasizing good constrasts of items that are layers over final background colors. I explored at lenghts the palette of the spectrum of vessel types available,  with the lense of visibility levels on top of the default google maps/satelite options. Furthermore, in interest to bring out a bespoke palette and support the contrast further, a third blue was a recommendation that was received with much interest.

Motion Trial

Quick trial to pitch an adaptive search and reducing steps required to view a vessel at detail versus a global view. 

Design Deliverable

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.

Advanced Filter

Designs for the next phases of cFlow.

The overall direction was driven by wider industry study of filter patterns; the majority of which are dense and advanced become scaleable within a scrolling window and do not obstruct the users view.

Added to that, the existing list of items in view was detached from the actual filter setting so conjoining them in a tab view created a strong visual connection between the states.

The designs were extensively user tested with positive engagement, and refined according to the respective needs. With the new designs a user would be able to create a much broader filter search (break out of limitation of 300 vessels), and get a much richer representation of the vessel details (such as laden state), ability to reorder the list based on available criteria (size, name, etc).

Furthermore the designs included proposals for identifying ship categories in the list itself, including Missing Ships, STS (Ship to Ship Transfer) all of which were conductive to a more transparent and clearer understanding of the complex map detail.