Useful resources for designing data rich pages

One of the big projects we’ve currently got under way at Energy Sparks is redesigning the collection of pages that present the results of our detailed analysis of their energy data to school users.

The existing pages have been around for a few years and our metrics and user testing has shown that they aren’t really performing well. They need to have a clearer content model, better navigation and to a better job of highlighting the key insights to users.

We also need to review and translate all of the content into Welsh as part of the next phase of translating the service into Welsh. As a result we’ve been doing quite a bit of prototyping, user research and testing over the past few months. It’s something I’m really enjoying.

To help inform our thinking I’ve been looking for existing guidance around presenting charts, data and supporting analysis to users.

I thought I’d share a few of the resources that I’ve found useful.

The GDS Design System and Advice

The GDS Design System is a resource that I frequently use as a reference when doing any UX/UI work. Although I’ll often look at other design systems too.

While the design system seems primarily geared towards the development of transactional services, it has some useful patterns that are applicable to the thinking we’ve been doing around our advice pages.

For example we’re considering how to use progressive disclosure to avoid drowning users in details. Patterns like Details, Inset Text and Warning Text are helpful refernces.

The GDS guidance on planning and writing content and recommendations for publishing statistics, making tables accessible and presenting numbers are all useful and relevant resources.

Our users have a wide range of backgrounds and knowledge, but their common characteristic is that they’re all time-poor. We need our analysis to be clear and accessible.

ONS Style Guide

Another resource that I’m frequently referencing is the ONS Style Guide, and in particular, the detailed recommendations around presenting charts and tables.

We need to ensure that our analysis is well-presented, but also has the appropriate footnotes and details that will allow our more advanced users to dig into the details. Reading how the ONS approaches presenting often very detailed statistical data is very helpful.

We also want our charts and tables to demonstrate good practice, as often they’re been looked at by children. It’s important that the service reinforces the good practices they’re being taught around data literacy.

Plain numbers and plain English

I’m lumping these examples together as I discovered them via a helpful Mastodon post:

For obvious reasons we want our advice to be as widely accessible as possible. We’ve got a lot to improve on the site in that area, but I’m confident we can make some quick progress as we build out our new pages and iterate further on existing pages across the site.

As a small team, its really really helpful to be able to benefit from the insights, user testing and design skills of much larger organisations. It’s always important to filter that advice through the lens of your own users and product, but when others work in the open in this way, we can all benefit.

If you have other resources that you think I should be looking at, then leave a comment or drop me a message on Mastodon.