top of page

Redesigning and rebranding pnsn.org

Dates:

Role:

Description:

July 2019 - October 2021
User Researcher, UX Designer, Visual Designer

A complete redesign of the Pacific Northwest Seismic Network's branding and website, pnsn.org, to improve legibility, consistency, and access to information both online and offline.

Top

The Problem

The Pacific Northwest Seismic Network's (PNSN's) website has a wealth of information for scientists and the general public. However, it is confusing to navigate through, and the amount of information can be overwhelming. The design and branding of the website also feels dated and some design patterns do not match users expectations.

Background

The Pacific Northwest Seismic Network (PNSN) is the regional seismic network for Washington and Oregon. They operate all of the seismic sensors within the region, analyze the seismic data, and report that data to the public. The main way they report this data is through pnsn.org, the public facing website operated by the PNSN. Pnsn.org is the main point of contact for a lot of people in Washington and Oregon to view recent earthquakes, use various products, and look at information about earthquakes and volcanoes.

The custom search page on pnsn.org. It shows various filtes and a map. Some filters include magnitude and date.
a screenshot of a google analytics line graph. It says "Users 127k, Sessions 205k, Bounce Rate 62.97%, and Session Duration 2m 41s" The graph hovers around 10k and there is a spike on July 12th up to about 65k.
The pnsn.org homepage. It shows the earthquakes near volcanoes data visualization, list of recent earthquakes, map of recent earthquakes, three seismo blog posts titles to click on, and the twitter feed.

Research

In order to determine areas of improvement within the current website, usability testing was conducted. Participants were those who had previously accessed pnsn.org and used the internet daily. There were three main sections of the sessions.

Card Sorting Activity

Determine users mental model around the information on pnsn.org

Ranking Activity

Determine how users prioritize information available on pnsn.org

Three Tasks

Determine the usability and ease of navigation of pnsn.org

Photo of the card sorting activity completed by a participant. There are the cards with sticky notes at the top of the 8 ,participant identified, categories.
A photo of the filled out ranking activity. There are numbers next to informational categories on pnsn.org

Task 1
“You are at the University of Washington in Seattle, and think you’ve just felt an earthquake. You decide to go to pnsn.org to look at your location and the recent earthquakes to learn if you just felt an earthquake.”

Seven participants completed usability testing sessions.

1

2

3

4

5

6

7

Approximate age: 48 years old

6/7

Visit and use pnsn.org 1-2 days per week.

7/7

Have previously used pnsn.org

7/7

Use the internet for at least 1 hour per day.

I completed affinity analysis on the qualitative data available.

yellow and pink sticky notes on a wall, organized into various groups
one sticky note with red writing at the top with a grouping of yellow and pink sticky notes below
one sticky note with red writing at the top with a grouping of yellow and pink sticky notes below

I also completed analysis on the quantitative data collected. This included sorting and ranking data, as well as Likert scale data.

How enjoyable was your experience?

Bar graph with neutral (3) at 2, somewhat (4) at 3, and very at 2. All other are at 0.

5

4

3

2

1

Not

2

3

4

Very

How usable did you find pnsn.org?

Bar graph with somewhat difficult (2) at 1, neutral (3) at 2, and somewhat easy (4) at 4. All others are at 0.

5

4

3

2

1

Very Difficult

2

3

4

Very Easy

I found pnsn.org ...

5

4

3

2

1

Bar graph with somewhat disorganized (2) at 2, neutral (3) at 2, somewhat disorganized (4) at 2, and very organized at 1. All others are at 0.

Very Disorganized

2

3

4

Very Organized

The information on pnsn.org engaged my interest.

5

4

3

2

1

Bar graph with somewhat agree (4) at 3, and strongly agree at 4. All others are at 0.

Strongly Disagree

2

3

4

Strongly Agree

It was easy to find the information on pnsn.org.

5

4

3

2

1

Bar graph with somewhat disagree (2) at 2, neutral (3) at 3, and somewhat agree (4) at 2. All other are at 0.

Strongly Disagree

2

3

4

Strongly Agree

Research Findings

My findings were split into three categories, with three findings per category. These categories include organization, information, and presentation.

Current & Recent information is the most important information, and is what users commonly use the website for.

“I want to know what's happening and what's going to happen”

“First thing I’m going to look for is what’s just happened or is currently happening”

7/7

Said that Task 1 (finding recent earthquakes) is mot similar to how they use the website.

The site is unorganized and users find it hard to navigate.

“I had to go through several places each time to find what I wanted and I'm familiar with the site”

“I feel like I'm going on a bit of a treasure hunt”

“I can never find what I'm looking for the first time around”

Users have trouble finding information, and want specific information highlighted.

“I want to know historical information about [the monroe earthquake] but I don't know where to find that”

“I go to USGS maps for recent earthquakes before PNSN. NEIC has historic activity and beach balls”

“Have something on homepage reminding people to be prepared in an emergency”

Users enjoy having access to a lot of information and trust PNSN as a source.

“I enjoy having all the information readily available”

"Feels like there's a lot of data behind it"

"If I was gonna look for more resources I'd come here first cause it'd give quality resources"

The amount of information available can be overwhelming.

"My first thing looking at this -  and I don't even have it all out - is that there are too many"

"Wow you got a lot here"

"There's a lot of data there - work could be done to consolidate a lot of information"

There is a disconnect between what users care about and what scientists care about.

"I want to keep science accessible to people so they have access"

"As an end user, some of the data doesn't speak to me"

"This is really in depth data [waveforms and seismograms]"

Some labels don’t make sense to users. They seem too scientific and organization focused.

“Outreach - from the point of view of the organization it might make sense but to the public it doesn't”

“Query is too scientific”

“Earthquakes is a very general navigation title”

Users gravitate towards visual representations of data, whether that's maps, pictures, or data tables.

“I’m kind of a map person”

“These pictures make me feel like it's really talking about something”

“I like the data tables personally”

The site’s function does not match users' expectations.

“I thought I was gonna zoom in but it took me to a separate page”

“if I click it sorts! I would not have guessed that cause the mouse gives a typing cursor instead of a pointer finger”

“I expected clicking on the list would highlight the map”

Information Architecture

With many of the findings being around navigating the site, having trouble finding information, and feeling like the amount of information is overwhelming, our team took a look at the information architecture.

Information architecture diagram of the previous website. There are seven main sections with a range of 2-38 items in each section.
Information architecture diagram of the new website. There are four main sections with a range of 3-17 items under each category.

Taking the findings from the sorting activity, different topics were categorized into three main sections - organization information, data & products, and educational information. After discussions with stakeholders, pages were merged and categorized into the four main navigational headers.

The previous architecture was indeed overwhelming and confusing. The navigation at the top of the page changed when a user clicked into a sub area of the website. There were many pages with only a few sentences of content.

The fourth category, Recent Earthquakes, was added based on user feedback that recent information and data is often the most important to the users.

Wireframes

I sketched out a few screens to get a feel for how the navigation of the different sections would work.

pnsnsite_educationpage.png
pnsn_map.png
pnsn_mapandeducation.png
pnsn_homepage.png

After sketching out wireframes, I started experimenting with how the homepage should be laid out. This required a bit of experimenting because I wanted to move away from the blocks of content in the existing website, but deciding how to show the vertical map of Washington and Oregon without it appearing blocky proved complex.

I drew inspiration from some existing website's designs, including the cutout of the mountain, navigation between pages, overlapping of elements, and the footer.

235b77ce5f00c816846f52c54c8b3b59.jpg
0bdb2000ceeb0f7f8c3d08db43cbeb82.jpg
846eead4a4da2d3e3b4361b520c6c9af.jpg
e34bcfb8165f16feb0bf37f5f2de97fd.png
6a22ed6c2e277fef969726e498be405f.jpg
adcf88b59462b7c0319d98853bbf8c05.jpg
f4e7bd061c6493d39c320be2d12d37af.jpg

Visual Design

After determining the general layout of the site, I began focusing on the rebranding of PNSN.

The existing logo did not fit well in limited horizontal spaces, such as a website header. Additionally, there was not existing brand guidelines on voice, symbols, colors, text, logo use, and photo use.

My goal was to create a logo and icon that could be used in a variety of situations. 

The Solution

High Fidelity designs were created to handoff to the developer. Unfortunately, I am no longer employed at the Pacific Northwest Seismic Network and these designs have not been implemented.

high fidelity screen showing pnsn.org's seismograms page. there is a list and legend on the left, and a map with many icons indicating different seismograms in the center and right.
high fidelity screen showing pnsn.org's earthquake details page. There is information about the earthquake shown including a map, magnitude, time and date, location, and links to Did you feel it and historical maps.
high fidelity screen showing pnsn.org's earthquake search, unexpanded. It has quick search options, including notable events and exotic events, a filter for magnitude range, a filter for date range, an option for advanced options, and the button to search.
high fidelity screen showing pnsn.org's homepage. from the top down there is a recent earthquakes section with a list and legend on the left and a map on the right. Next are the three most recent seismo blog posts wiht an image, title, and summary on each. Next is a space for a highlighted page or event with a spot for a title and text and to the right of that is the PNSN's twitter feed. Next is a data visualization that shows earthquakes near volcanoes with the different volcanoes listed on the y axis and a timeline from 30 days ago to today on the x axis. Next is a did you feel it link with some text about what DYFI is and on the right of that is a section with PNSN in the news, where it populates three recent news stories that PNSN was mentioned in. At the bottom is a small graphic with the number of earthquakes reported in Washington & Oregon so far this year.
high fidelity screen showing pnsn.org's seismogram details page. There are the seismograph details including location, sensor type, and status. There is a map showing the location and photographs of the site. There is a live feed of the shaking the site is experiencing with some controls to pause or play, a 24 hour view of the shaking the sensor has experienced, any recent events that the sensor has picked up, and a PDF link showing data quality.
Solution

Reflection

I was happy with my decision to pursue usability testing of the existing website. I had to pitch to stakeholders, who had very little knowledge of what UX research is, the importance of user research. I believe I did so successfully and was also able to communicate with stakeholders the research findings in ways that clicked with their frame of thinking.

This project spanned part of the pandemic, which required alterations in my workflow and affected how I communicated with stakeholders. This ended up being a challenge for getting feedback from stakeholders, increasing timelines. If I was to go back and do anything differently, I would improve these communication channels.

bottom of page