NEB Pipeline Incidents Visualization

A Data Visualization for NEB Pipelines

Introduction

Pipeline Incidents is an engaging data visualization that guides people in understanding Canada’s energy and pipeline systems. This project uses the data that the National Energy Board has collected from 2008 until present day. The data set was incredibly interesting to work with. It had diverse sets of data points such as location, reason, province, deaths, type of incident, what happened, why it happened, etc.

Timeline

  • April 2017 – Sept 2017
 

Project Type

  • Data Visualization
  • Desktop and Mobile App
  • Client-Based
 

Role

  • Visual Designer
  • Experience Designer
  • Data Analyst
 

Project Link

NEB Website

Research

In order to design a visualization that would best represent the data, we needed to dive into the data to understand what it was trying to tell us. We used Data Wrangler to clean up the data, and Tableau for uncovering insights. Once we understood what the data had, we started sketching ideas on potential designs. Existing data visualizations and breathtaking infographics helped inspire our brainstorming sessions. 

A cross section of a pipeline illustrated with watercolours. This sketch attempts to illustrate the proximity of incidents in relation to the pipeline.
A map of Canada with a timeline. The timeline will animate through and incidents will appear on the map accordingly.
A flow map like visualization displaying incidents based on pipeline phases. The lines depict each pipeline incident.
This visualization is a time-based visualization. It looks like a bar code. When a person hovers over a line in the visualization, it'll expand to show a vertical bar graph of number of incidents that year.
A circle graph divided into three sections, incident type, basic causes, and immediate cause. The connecting lines help draw connections with the pipeline incident.
A cross section of a pipeline illustrated with watercolours. This sketch attempts to illustrate the proximity of incidents in relation to the pipeline.
A map of Canada with a timeline. The timeline will animate through and incidents will appear on the map accordingly.
A flow map like visualization displaying incidents based on pipeline phases. The lines depict each pipeline incident.
This visualization is a time-based visualization. It looks like a bar code. When a person hovers over a line in the visualization, it'll expand to show a vertical bar graph of number of incidents that year.
A circle graph divided into three sections, incident type, basic causes, and immediate cause. The connecting lines help draw connections with the pipeline incident.

There were a few promising ideas for what the visualization could be. The team split up into smaller groups to work on each of the promising design. I worked the idea of displaying the incidents on the map with an abstract incident list. 

A mockup of combining the timeline idea with the map of Canada. A person could view a subset of incidents by selecting an area in the timeline.
The incidents would display on the map and the person could select an incident dot to learn more information of the incidents.

Each potential design went through a few iterations before we landed on the final design, a parallel coordinates visualization.

This image displays how a person would display more data categories.
This image has a list of data categories on the right. A person can click on a category and it'll automatically appear on the workspace.
This image shows a stacked list of categories in the form of columns on the right. A person could drag and drop these columns into the workspace.

User Personas

When refining the design of the visualization we had to keep in mind our users. Based on the information NEB has given us, we determined there would be a few personas; General Public, Environmentalists, Data Analysts, and NEB Employees. Since the goal of the visualization project is to engage the public to learn more about Canada’s pipelines, the General Public persona was the main focus.

Each of these personas has varying experiences with data visualizations, we needed to craft interactions that would ease the learning curve for people to use the data visualization. This ensured the visualization would be approachable for people with no experience in visualizations. If people with no experience is able to gain valuable insights from the data visualizations then we were confident that people such as data analysts and NEB employees would gain insights through the data.

Visual Design

Pipeline Incidents has three components to it: incidents lists, a workspace, and a category library. The workspace area is where all of the categories and incident lines are displayed. This takes up the most space in the visualization. The category library is where the list of unused category columns lives. A person can bring out a new category by dragging and dropping a column into the workspace, or by clicking on it. Lastly, there is the incidents list which is found on the left-hand side of the workspace. This area displays the list of incidents pertaining to the selected category section.

The left most area is the list of incidents. The middle area is the workspace, this shows incident lines through each of the category columns. The right most area is the list of categories.

A major component of the visualization relied on colour. The visualization needed to be inclusive to all, therefore, we had to consider those with colour deficiencies. I was tasked to design the colour palette that would be used for the visualization. With thirteen distinct data categories and many data sections, it would not be an easy feat. I dove into research papers on inclusive colour palettes to understand the realm of colour blindness better.  In order to develop more empathy, I interviewed a visiting professor, David Flatla, on his experience with colour blindness. As I designed the colour palettes, I utilized tools, such as colourbrewer and chroma.js, and used colour blindness simulators to simulate how someone with colour blindness would view the palette. In the end, I was able to come up with an algorithm to generate 13 main colours and 26 transitional colours. The goal of the palette was to ensure that people were able to see the distinct change in hue, saturation, and brightness.

This image shows an assortment of printouts to compare colour palettes.
Each category has a base colour, a transition colour, and an end colour.
This is a list of colour codes needed for the development team.

Interaction Design

We developed the interaction design based on common conventions found in existing data visualizations. Interactions such as drag and drop, hover, and clicking were considered for the visualization. However, the visualization was available on mobile devices, we needed to ensure the main interactions could be used with a touch screen. 

We designed each of these interactions to provide different experiences. Drag and drop allowed the person to reorganize their workspace as needed. In order to notify this interaction to the user, we designed visual cues in the form of icons to signify that the columns can be dragged around. Hovering over an incident line displayed a context menu that provided information about that incident such as the name of incident, location, and time and date. During the prototyping and testing phase, we uncovered that this interaction was disorientating so it was later removed. 

Clicking had multiple experiences based on the context. For example, if a person clicked on a category in the category library, it would bring that column into the workspace.

Testing

Throughout the design process, we had several rounds of testing. Each round varying in different types of prototypes.

Paper Prototypes

Before diving into higher fidelity mockups and prototypes, we wanted to test the interactions with people. We chose paper prototypes to highlight interactions we were wondering about. This allowed us to see that people had difficulties exploring a set of incidents due to the design itself. We learned that the general public has no existing knowledge of pipeline incidents, therefore, they would not be interested in a single particular incident. Our design made it harder to explore incidents as a whole since it focused on delivering information of single incidents.

Furthermore, the design of pinning an incident became cluttered and cumbersome. It was unclear to our casual personas the reason why they would pin an incident. When they did pin an incident, they found it awkward to see the pinned information floating in space.

 
A person is shown interacting with the paper prototype.
An assortment of paper sections to help simulate interactions.

These findings lead us to redesign incident selection. We created an area on the left of the workspace that would display a list of incidents whenever a person were to interact with sections of categories or incident lines themselves. The paper prototype was great for evaluating our understanding on how people will first interact with the design and it provided a lot of insights on what worked and what didn’t work early in the design.

Digital Prototypes

As the design developed, we began producing digital prototypes to understand how the final visualization would feel like on desktop devices. For one of our prototypes we focused on the interactions for the incidents list. At first, the starred incidents were at the top of the list, however, through the prototype we realized that this created a jarring effect. As a person starred an incident, the top list would grow, which would push down the list of incidents. This created a jumping effect that was undesirable. From these findings, we moved the starred list of incidents down to the bottom of the incident list.

 

A gif displaying the list of incidents. In this iteration, incidents could be pinned and unpinned.
A gif displaying the list of incidents. In this iteration, incidents are starred and unstarred.
A gif displaying the final interaction of the list of incidents. Starred incidents appear at the bottom of the list instead of the top.

Key Takeaways and Reflections

Pipeline Incidents was a great project that taught me how to work with a team of other designers; clients with great perspective, style, and vision; and an outsourced team of developers. From this project, I was able to experience a full iterative design process. 

I learnt a lot about accessibility needs, inclusive design, and how to fulfill those requirements. Designing an inclusive colour palette was very enlightening and fun, albeit, a challenge. In addition, this project showed the value of testing often and early. The different types of prototype fidelity allowed a vast amount of user insights. Therefore, going forward, I would be a strong advocate for taking the time to test features, ideas, layouts, and designs with others as much as possible. 

One thing I wish we had more of during this project is user research. During the design process, the team would make assumptions about our users that might have been unfounded. Without time for research, we were unable to support or disprove those assumptions and thus carried the design forward with those assumptions in mind. Nonetheless, the client was quite pleased with our design. The data visualization is live on the National Energy Board’s website. 

If you would like to chat more on what I learned throughout this process, connect with me through email at [email protected].