SCC COVID-19 page thumbnail

Seattle Central College COVID-19 Web Design

I redesigned the COVID-19 update page on the Seattle Central College website to improve its usability of the page and effectively communicate the information to the users by applying the user-centered design process.

This case study is an individual project that I worked on in the Web Design program at Seattle Central College.

My Role

UX Designer, UX Researcher

User surveys, user interviews, affinity diagram, information architecture, sketching, wireframing, prototyping, A/B testing

Team

Individual Project

Timeline

Sep 2020 - Dec 2020

Tools

Adobe XD, Figma

The Problem Space

Unorganized COVID-19 Update page

Due to the coronavirus outbreak, Seattle Central College moved to remote operation in early March 2020. While the college quickly set up the COVID-19 Update page on its website, it failed to effectively communicate the information to the users, which caused their undue worry and an increase in inquiries for the student service department.

I realized this issue as I worked at the Information Center and decided to redesign this page using user-centered design methods.

Seattle Central College image

Design Question

How might we help users quickly access the information they need by increasing the ease of use of the website?

The Process

Process image

Discovery Research

User Surveys & Interviews

Since the COVID-19 outbreak and campus closure were unprecedented events, understanding people's needs and pain points was a crucial first step in such an uncertain situation. I collected 20 survey responses and conducted interviews with 6 participants. The participants include current students, faculty, employees, and people outside of school.

Key Findings

The most important information people need

  • Campus status
  • Class status
  • Campus operation procedures
  • Safety measures

Other important information

  • College re-opening plan
  • Resources for students/faculty
  • financial/mental health support
  • Remote learning support

1. People need more guidance during the unprecedented event

About half participants expressed their anxiety and worries about the uncertain situation. Some also expressed their concerns that they might be missing out on important information about the school, but didn't know what they need to know.

2. People are worried about the quality of remote learning and their financial situation

People are concerned about whether they could receive the same quality of education through remote learning and wondering if they have to pay the same tuition as in-person.

3. People struggle with getting the right information during the constantly changing situation

Some people felt frustrated when COVID-19-related information on the internet was not updated in a timely manner. Unfortunately, a lot of time, the websites didn't show when the information was updated either.

Baseline Usability Testing

I conducted usability tests with 6 representative users to evaluate the quality of the original design. First, I asked the participants to explore the site to collect their impressions and feedback on the page. I then gave them a task to find the essential school information, which I identified in the user surveys and interviews, to evaluate the ease of use of the original design.

1. Information is scattered through the page

Scope: High

Severity: High

The information was not categorized and was randomly placed all over the page with little connection between them and no category names. Users had to read each item from top to bottom until they found the information they were looking for.

Usability finding image

2. No visual hierarchy made it difficult to scan the page

Scope: High

Severity: High

The page barely had headings, images, icons, or effective color coding and was clearly lacking a visual hierarchy. Users could not scan the page and anticipate where the information was located. They had to thoroughly go through each item on the page until they found the information they were looking for.

Usability test finding image

3. Overwhelming users with too much text

Scope: Mid

Severity: Mid

Since the page was densely packed with too much text, participants had to spend significant time reading large bodies of text to find the information. Some non-native speakers also struggled with reading long paragraphs with unfamiliar words and experienced frustration during the tests.

Usability testing finding image

Design Goals

eye emoji

Quick access to essential information

The new design should prioritize the essential information and allow users to easily access it.

emoji

Logical content organization

Optimize the site navigation by organizing the content in a way that makes the most logical sense to the users.

emoji

Scannable content

Make the page easily scannable for users without needing to read the content thoroughly.

emoji

Up-to-date information

Let users know the information on the page is correct and up-to-date to minimize their undue worry.

Design

Affinity Diagram

Based on the research findings, I mapped out the information that should be provided through the site and categorized them into groups. I invited another person to collaborate and bring different perspectives, which eventually helped me organize large data, prioritize, and establish a logical site structure and page layout.

Affinity Diagram

Information Architecture

Information Architecture

Design Sketch

Sketch image

Prototyping & A/B Testing

To allow users easily navigate the information-rich website, I add a "Quick Links" box where users can easily access information on a subpage. As I came up with 2 design ideas to make the Quick Links easy to find, I conducted A/B testing to determine which design has better navigation. I found that, with design B, people would pay more attention to the Quick Link bar at the top of the page and could find the information without scrolling the screen. On the other hand, with design A, some people didn't realize the Quick Link in the right column and scrolled the screen to the bottom of the page. Therefore, I decided to go with design B.

A/B Testing image

Final Design

Final Design

Successful Design Decisions

Avoided oversimplifying

I learned from user research that some people needed clarification on what information they should have known and sought more guidance in such an uncertain situation. Therefore, I decided not to oversimplify the design and made the essential information visible and explicit instead of hiding it under subpages.

The Impact

I conducted user tests on the final design and found that users were able to find the essential information twice as quickly as the baseline usability testing. It confirmed that I achieved the overall improvement of accessibility, scannability, and usability of the website.

"It was very easy to navigate. The bold text and the [Quick Links] box really tell you where to look at."
Visual design overview

Next Step

Design for everyone

Due to proximity and time restrictions, I decided to mainly focus on designing for the primary users - current and incoming students. If I had more time, I would conduct further user research on faculty and employees' experience to achieve a better inclusive design that works for all user types.

Design with a more holistic view

In this project, I redesigned only the COVID-19 Update page and the content outside of this page was out of scope. If I had more time, I would reexamine this final design by considering the overall site structures of the entire Seattle Central and Seattle Colleges website to make the design work as a whole website rather than just a single page.

Learnings

Importance of prioritization

Through the user surveys and interviews, I became aware of different needs and pain points among different user archetypes. While it helped me determine how to prioritize and organize a large amount of information, it also made me realize the importance and difficulty of achieving inclusive design.

Design for social impact

By empathizing with users throughout the design process, I learned what it takes to achieve human-centered design and how my work could make someone's life a little better. This project was such a meaningful and fulfilling experience during my study at Seattle Central College.

Let's connect