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 & Contributions

UX Designer, UX Researcher

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


Individual Project


Sep 2020 - Dec 2020


Adobe XD, Figma


Poor design of the COVID-19 page caused increased stress and anxiety among students

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 increased inquiries for the student service department. I decided to redesign this page to help students navigate college during the pandemic.

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


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 randomly 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. Lack of visual hierarchy made it difficult to quickly 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. The page filled with texts overwhelmed users

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 Requirements

eye emoji

Quick access to essential information

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


Logical content organization

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


Scannable content

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


Up-to-date information

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

Card Sorting

Based on the research findings, I mapped out and categorized the information that needed to be provided on the website. 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 more 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

Home Page

Final Design

Successful Design Decisions

Avoiding Minimalist Design

From user research, I learned 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.

Remote Learning Page

One of the students' biggest concerns was the quality of remote learning. So I created a sub-page dedicated to remote learning where users can access all resources and tools to maximize their experience.

Remote learning page design

In-Page Navigation

To help users navigate through text-heavy pages, I employed an in-page navigation. This helped users quickly find the information they were looking for.

In-page navigation design

The Impact

Increased user satisfaction and decreased time-on-task

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 the time constraints, I focused mainly 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 Seattle Central and Seattle Colleges website to make the design work as a whole website rather than just a single page.


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 the human-centered design and how my work could make someone's life a little better. This project was a meaningful and fulfilling experience during my study at Seattle Central College.