Introduction

WaterData is an analytics and market forecasting tool for the water industry produced by Global Water Intelligence. As the sole in-house designer, I was responsible for the product’s entire design process, including interface design, branding, marketing materials, charts and icons, as well as the actual production process for much of the content.

Brief

GWI produces a number of market reports each year that explore different topics within the water industry, each with associated charts, datasets, forecasts and textual analysis.

The aim of the project was to combine all of GWI’s report offerings into one centralised service, letting users (both clients and internal staff) explore the data more freely, as well as connecting related content in a way that was harder to do in print.

In addition, existing clients had requested specific features such as the ability to customise charts and download them for use in presentations.

Information architecture

Alongside the research and development teams, we began by taking stock of all the content we needed to include.

With so much content being pulled together from different sources, it was clear the product needed to offer different entry points – so users could begin exploring the site by country, company, industry, water treatment technology, and so on.

Each of these entry points was given a ‘hub’ page that hosted top-level information (e.g. for countries, it might contain summaries of global trends). Users could then drill down to child pages (e.g. countries). Each child page then contained various topics (e.g. sector structure), which if necessary were further divided down into sub-topics.

Finally the bottom layer housed the content itself – for example a table of major organisations relating to water in that country.

User flows

Some content had a less straightforward structure. For example, an external data hub held datasets assembled from different sources that were used to define country-specific indicators. We mapped out primary and secondary user flows to explore the pathways a client could take between datasets, countries, indicators and sources.

Designing the UI

To allow for rapid iterations, I began by sketching out wireframes by hand and getting feedback from stakeholders within the research team, before developing them into high-fidelity mock-ups to be passed to the development team.

We decided to opt for a modular, card-based interface, since much of the content could be packaged up into discrete elements – individual charts, diagrams and tables. With so much data in the site, this let the user focus in on what mattered to them, either by browsing vertically or horizontally through the hub > child > topic > element structure, or by searching for specific elements.

The UI design was influenced heavily by Google’s Material Design. We needed something very clean that wouldn’t get in the way of what mattered, the data. Bold colours, simple shapes and lots of white space all helped to build a design system that met this requirement.

To accommodate the functionality required by all content types and datasets, the design system was expanded to include elements such as filter controls, alerts, modals, and a variety of custom table types.

Search functionality

One of the features we were keen to include was an effective search function. From feedback we knew users often picked up a report looking for a specific dataset or piece of information.

By tagging each modular content element, we were able to build a search tool that let users filter results by country, technology, company and so on. Adding predictive, live-updating functionality meant searching for a specific chart was even quicker.

Charts and graphics

Good data visualisation was of course very important in this product. Most graphics on the site fell into one of three categories:

Standard charts
Bar, line, pie, and so on. These were built using Highcharts, a JS charting library used elsewhere in GWI’s product offerings. It allows for plenty of customisation, so I defined various rules for the dev team to implement to ensure the charts’ styling was in keeping with the rest of the site.

Static SVG graphics
Much of the graphical content came from pre-existing reports, so it was a matter of converting dozens of AI and PDF files to SVG, restyling where required. Some graphics were enhanced by the addition of some JS interactivity like tooltips and hover effects. See here for an example.

‘Fancy’ charts
Some data was more complex and visualising it required a more involved approach. We needed to include diagrams showing the structures of hundreds of companies, each with parent companies, shareholders, subsidiaries, offshoots, brands and so on. Highcharts didn’t offer a suitable chart type, and D3.js’s tree diagram functionality wouldn’t support multiple parent elements, so I customised a Sankey chart algorithm that we were able to use instead. Colour-coding, tooltips and links to relevant company pages were the final touch.

Icons and other details

I also created various other visual elements for the product, including tooltips and a number of icon systems – for cards, search, topics and so on.

Icons were already in use across GWI’s products so it was important to try to retain the same symbols and meanings where possible, while at the same time ensuring all the required icons were available.