Women In News Women In News Women In News Women In News Women In News Women In News Women In News Women In News

Women In News Women In News Women In News Women In News Women In News Women In News Women In News Women In News

Design and build a website for data journalism - 2022

Key skills: Data visualisation and designing for accessibility

5 - 10 minute read

Client:

Women In News (WIN), is an organisation dedicated to promoting gender equality in the news media industry.

Project overview

Goal:

Design and build an educational website with interactive data visualisations to be consumed by journalists around the world.

Project Context:

Sexual harassment data has been primarily concerned with North America and Europe. WIN spent three years filling in the blanks (Sub-Saharan Africa, the Arab Region, Southeast Asia, Central America and Russia) and now they were ready to showcase this data as both a human story and a rich database for accurate reporting.

The Cast

UX designer and web developer – Me | Project evaluator – Melissa | Project leads – Gabriella & Molly | Researcher – Lindsey | Editor – Jackie | Translators – Farah and team.

Summary of my role

My role was to bring WIN’s data to life in the format of a website. I acted as UIX designer, data visualisation expert, and front-end web developer.

The Timeline

Research

Data visualisation research

I extensively researched chart design through resources such as:

  • The Nielsen Norman Group
  • D3.js documentation
  • The Visual Display of Quantitative Information by Edward R. Tufte

User research

WIN is a research company, they not only had research about sexual harassment, they also had a bank of research on their users, most of whom are journalists. All I had to do was absorb this information and interpret it.

Ultimately there are two main types of users:

  1. User 1: the goal is to get the facts, sources, and resources as quickly as possible. Often done on their phones.
  2. User 2: the goal is to get a full understanding of the issue at hand, delve into the knowledge base, and find inspiration for a story.

Designing a brief

In collaboration with my client, I fleshed out a functional brief for the project:

  • The main idea was to create a journey for User 2, flowing in a natural progression from A, to B, to C.
  • There also needed to be clear pathways for users to find targeted information.

Design overview

The data breakdown section

This section is intended for journalists looking for factual information. WIN identified 16 datasets of importance, each spanning across 20 countries. The goal here was clarity, accuracy, and interactivity.

Research sources made a clear argument for the bar chart. So I designed the charts to follow best practices: start at zero, show labels, show tooltips with graph values on hover, and show clear relationships by applying descending order.

Results of user testing on the data breakdown

Through iterative testing with WIN’s colleagues and associates the following insights were made:

PROBLEMS:

  • The labels take up too much space and the graph becomes unreadable in text-expanded languages such as Arabic.
  • Tooltips are not intuitive on mobile phones and go unused. Users then wonder where the chart’s values are.
  • When using the interactive toggles the bar chart reorganises itself (to maintain descending order) and this is confusing.

SOLUTION:

  • Inline labels and values (previously shown on the tooltip) are moved to the bottom in a table that acts as a colour-coded key.
  • Charts are ordered according to the logic of the labels, not the value of each bar. Eg. “once”, “two to three times”, “four times or more”, etc…

WIN’s takeaway page

The purpose of this section is the take users through the insights for each region, WIN’s editor wrote each article to showcase the facts and my role was to highlight key data points with visuals.

  • I designed simple infographics to communicate concepts clearly.
  • Responsive graphs were used when referring to a particular dataset.

User testing resulted in minor layout changes and bug fixes.

The overview section

WIN’s goal was to tell a captivating story on the front page by using a single data visualisation. This chart needed to capture the big picture and inspire users to play, familiarise themselves with the data, and hopefully view more. At this point, all the data visualisation best practices went out the window.

This visualisation needed to tell a story, show layered information, communicate relationships, and the focus was not on depicting exact values. After doing some research, I landed on the idea of creating a bubble cloud.

Bubble cloud testing

  • Testing of prototypes revealed that users enjoyed the graphic and understood the message.
  • Usability testing of the dev site revealed that many users would disregard the bubble cloud and go straight to the data breakdown, while a smaller few played for several minutes before exploring further.
  • This was ultimately a win: the visualisation was not distracting to task-oriented users, but it did appeal to those who wanted to explore.

Bubble cloud consensus

The design went through many refinements as complications arose during the translation phase and accessibility standards were difficult to meet.

Ultimately I opted for a simple and robust bubble cloud which could scale easily while still telling a story.

The extras

There was also a need for a section where users could download the full report for their region. I designed 5 PDF versions of the articles with detailed infographics, all available on the “Get the PDF” page.

Final comments

Testing

I tested my designs throughout the process on WIN’s staff and researchers at the University of London.

There were many changes and tweaks along the way, with the common thread being to make it more simple. Which I did, time and again.

KPIs

The goal for this website was that people would mostly finish the journey, from context, to articles, to the facts. We had a high hit rate after the launch of the website and WIN considered it a big success.

Another important factor was accessibility on phones. This had been meticulously implemented and Google analytics revealed that mobile phone browsers made up the majority of all hits to the site.

Only a small percentage of visitors actually completed the journey and visited every page, but regardless the feedback and number of articles which came out of the project were above expectations.

Take a look for yourself!

Brought to you by Laura Ann Seal, 2024