Helping Seismologists Visualize Seismic Station Data

Dates:

Role:

Description:

April 2018 - January 2020
UX Designer, Visual Designer

A desktop user interface designed for the Pacific Northwest Seismic Network. SQUAC allows users to customize what seismic stations and what metrics they want to look at and how.

 

The Problem

The Pacific Northwest Seismic Network (PNSN) has around 500 seismic stations within Washington and Oregon. Each station has multiple channels of data that is streaming 24/7. There’s no current way to easily monitor and create alerts about the “health” of these stations.

Knowing that data is being transmitted quickly, and accurately is important for projects like Earthquake Early Warning, which can give up to 10s of seconds of warning that an earthquake is coming. In order to send this warning, the PNSN has to receive the data quickly from seismic stations to determine that an earthquake is happening and then issue an alert.
 

Station data view in first iteration of SQUAC

First Iteration

The initial requirements for SQUAC were unclear. I was told that SQUAC would have channel groups and metric groups. These two groups would then be linked together on a main page. The main page and functionality was unclear, as well as how the back end and front end would work together.

I created individual flows for creating the two group types, as well as the main page with various pop ups and additional screens for more information and data visualizations.

first iteration of the SQUAC homepage containg a data table of channels and metrics showcasing the channel group selection
metric details for first iteration of SQUAC
channel group details in first iteration of SQUAC
station detail page in first iteration of SQUAC
station popup in the first iteration of SQUAC
first iteration of the SQUAC homepage containg a data table of channels and metrics showcasing the metric group selection
first iteration of the SQUAC homepage containg a data table of channels and metrics in blue and red rather than green and red.

At the time, this was assumed to be the final design. This stretch of design ended in May 2018. Looking back on these designs, it is very obvious that I did not have a solid grasp on the structure and was inexperienced in UI design.

Screen Shot 2020-03-12 at 1.49.36 PM.png
channel group creation for the first iteration of SQUAC

Research & Background

This was one of the first projects I worked on while at the Pacific Northwest Seismic Network (PNSN). I had to learn a lot of background information in order to fully understand what SQUAC would be used for and how everything within the network fit together. I talked with seismologists, field engineers, and software developers to understand how everything in the network fit together.

Diagram showing 2 different station types (broadband and strong motion) and the 3 types of channels for each station (vertical, N-S, and E-W)

Seismic stations are located all over. There are two types of stations. Broadband stations are sensitive and can detect shaking from very far away, while strong motion stations focus on detecting closer, violent, shaking. Each station, regardless of type, has multiple data channels. There are often three channels to measure shaking - one vertical (z) channel, and two horizontals (x and y) that show north-south and east-west shaking. Older stations may only have one channel that measures vertical shaking. Additionally, there are channels that show data about the station site like temperature and tilt Each channel of data is transmitted back to the servers and is processed quickly.

Washington and Oregon station map as of January 2020
first iteration of the SQUAC homepage containg a data table of channels and metrics
station popup in the first iteration of SQUAC

Second Iteration

After the initial iteration, SQUAC was revisited in May 2019. The overall concept remained the same, but the UI received major changes, and continued to be changed during the design process.

The main change was the home screen. This became a dashboard with widgets, similar to AWS and Google Analytics. The dashboard and widget style allows users more freedom in customizing what they see in SQUAC. It also lets users see visual data faster than the previous design.

Homepage with dashboards of data of the second iteration of SQUAC
Homepage with the sidebar containing different dashboard selection closed.
Channel group creation page

Channel Group Creation

One point of contention was how the channel groups functioned. There was a lot of conversation about when and where users should create channel groups. The initial idea was to have a separate page where users create channel groups, and then assign a group to a widget.

We quickly realized this could force users to create, exit, and re-create widgets, causing a lot of unneeded steps. We decided to include channel group creation in the dashboard and widget creation. This led to questioning whether channel groups should be associated with the dashboard as a whole or each individual widget.

When asking seismologists their opinions, they cared about the flexibility of the channel groups and easily applying the channel groups to widgets. For this reason, and for back end simplification, we decided to apply the channel groups to each individual widget.

Channel group creation within the widget creation popup
Adding metrics to a widget within the widget creation popup
Channel group selection, rather than creation, within the widget creation popup

Working with the front end developer, we decided that the widget creation was too crowded with the channel group creation inside the widget creation. We moved channel group creation back to a separate page. Our concerns about the user flow were still present but we decided that it would be easier to re-integrate the channel group creation into the widget creation in future versions rather than vice versa.

Adding metrics to a widget within the widget creation popup
Adding thresholds to metrics on a widget within the widget creation popup

Logo Design

I created the logo and all visual assets related to SQUAC. The name SQUAC was created before I started working on the project. The name comes from the warning that a canary in a coal mine provides. Not a perfect metaphor, but the idea is that SQUAC provides a squawk or alarm before a data channel is unusable.

I wanted to integrate a bird squawking into the logo. I started by trying to have the S become the bird beak so it was squawking “QUAC”. Bird beaks aren’t particularly S shaped, so I switched to having the bird take the place of the C.

SQUAC logo - made up of the words SQUA and the C is a birds beak
Small SQUAC logo - Made up of the bird beak that represents the C in the other logo
 

The Solution

SQUAC is a web application designed for desktop. Users land on a custom dashboard with multiple widgets, each displaying live data in various ways. Users can navigate to and create other dashboards for whatever projects and data is relevant to their position.

working version - login screen
working version - login screen error with entries
working version - dashboard with widget being resized
working version - create a dashboard
working version - dashboard with 3 different widgets and sidebar closed
working version - widget creation popup with thresholds
working version - widget creation thresholds
working version - widget creation channel group selection
working version - widget creation metric selection
working version - metric page
working version - metric creation
working version - metrics page with one selected
working version - channel group page

Users can view channel groups, manage current channel groups by editing and deleting, and create new channel groups. Similarly, metrics can be edited, deleted, and created easily.

working version - new channel group nothing selected
working version - new channel group UW network selected
working version - new channel group UW network and a station selected

The screens above are from the final product that is not available to the public. If you’re interested in clicking through an adobe XD prototype, you can find that here.

More Projects

  • Instagram
  • LinkedIn
Email Icon