Helping Seismologists Visualize Seismic Station Data
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 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.
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.
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.
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.
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.
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.
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.
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.
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 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.
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.
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.
SQUAC had very limited user research with end users also known as seismologists. This was partially because of where I came into the process, and partially because the developers tended to avoid asking the seismologists questions. As a UX designer, I tried to advocate for talking to users about the design but there was not as much conversation as I would have liked.
SQUAC is currently in testing phase of version 1. The plan for the near future is to conduct usability tests and interviews with some of the PNSN seismologists. My hope is that this feedback with the live product helps provide user feedback with which to go back to the design with.
There was about a year of time between the first iteration and the second iteration. I think it’s very obvious the difference in my UX design skills including UI, visual, and technical ability using Adobe XD. I debated including the first iteration because it is so rough and different than the second, but ultimately decided it showed my growth and ability to learn.
SQUAC was one of the first projects that I worked directly with developers on a product from start to finish. Our team developed an API and a frontend portion that linked to the API. Because of that, I had to work to understand the backend portion and the limitations it came with.