cFlow had been aquired by Platts within the start of 2016; adding to their market data portfolio a very robust and data-rich mapping application. Whilst the App was built with extensive capabilities, usability had yet not been a priority and so there was an immediate need for a fulltime lead UX design to step in.
The product has a global reach to users that work as analysts, traders and shipping planners. It contains the information pertaining to all the large tankers that exist, either static or in motion. Furthermore the app offers bespoke alert systems to track a variety of changes, largely to identify pattern disruptions.
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.
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.
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. The spectrum 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).
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.
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)
Principles & 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.
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.
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.
Over a period of 6 Months, I worked closely with the cFlow team to deliver an entire new page for one of their largest clients. It comprised of associating cargo information to vessel journeys, which is at the core of the application with regard to trading deals, and maritime planning.
The project kicked off with unpacking a list of 50+ product requirements, and embedded into the teams first agile sprint, to whom I workshopped with throughout the projects timeline to map out, elaborate and refine the functional and aesthetic elements.
Following several team meetings, and reacting to feedback from customers from the first release of the cFlow upgrade I workshopped with the Product Director to seek an overarching Information Architecture that would better serve the user needs.
An overarching point of view from users is that they quickly want to access the data view of any given flow pattern. This, accompanied by the need to easily filter the map around essential factors such as cargo states, projections of the journey of any given vessel ahead were drivers for the design.