Quick Nav

1. Plan
2. Research
3. Design
4. Prototype
5. Test
6. Final Design
SCC COVID-19 Web Design Project Header

Seattle Central College Redesigning COVID-19 Page

#WebDesign #CaseStudy

Background

Seattle Central Logo

Due to the coronavirus outbreak, the Seattle Central College moved to the remote operation in early March 2020. While the college set up the COVID-19 Update page on their website to provide the latest information, many students faced stress, anxiety, and frustration due to a lack of accessibility on the page. The page needed to be redesigned to help users navigate college more smoothly and provide a better experience with Seattle Central.

Duration

10 weeks (Sep-Dec 2020)

Project Type

Course Project (Individual)

Role

UX Designer

Tools

Figma, Adobe XD, Google Form

COVID-19 Update original page design
COVID-19 Update page original design

Problem Statement

The current COVID-19 Update page failed to effectively navigate users and provide the information they needed to cope with an uncertain situation surrounding COVID-19. It also caused users' undue worry and the increase of inquiries for the student service departments.

Design Question

How can we increase ease of use of the website?

How can we allow users to access the information they need more easily?

Design Process

Web Design Process

Plan

Competitive Analysis

The COVID-19 outbreak and campus closure was unprecedented event. I decided to employ competitive analysis as the first research method to learn how other schools were managing this situation and have a better understanding of the college operation during the pandemic.

Competitors

COVID-19 page design sketcj

Goals

  • Identify what competitors offer as primary information
  • Learn how they organize high volume information
  • Evaluate the design patterns, visual elements, interaction opportunities to determine best practice

Findings

Strengths Weaknesses
  • The current campus status and school safety procedure were the top two primary information
  • A large amount of information was nicely categorized.
  • Accordion forms were used to provide a large amount of information while keeping the design clean
  • FAQ page was utilized to provide additional or miscellaneous information to answer more specific questions users may have.
  • Large images took a lot of space, which made the main page less informative
  • Unfamiliar or unclear words may confuse users, such as “COVID-19 Ready,” “Coug Life,” etc.
  • Too much text made it hard for users to scan the page and find the information they need quickly

Research

User Survey & Contextual Interview

Understanding users' needs and problems from multiple aspects was crucial in a chaotic situation that none of us had experienced before. I decided to send out online user surveys and conduct user interviews on Zoom.

Goals

  • Identify primary and secondary information that users are looking for
  • Understand users' concerns and pain points during the pandemic

Methods

User Survey Contextual Interview

User Survey

Contextual Interview

Gather data quickly and flexibly
from a large population of users
(n=20)

Collect qualitative, observed data
(n=6)

Participant Types

current students, faculty, employees and people outside of school

Findings

1. Expectations & Preferences

The following items are essential information that users want to know

  • Primary information:
    Campus status, class status, campus operation procedures, safety measures
  • Secondary information:
    College re-opening plan, resources for students/faculties, financial/mental health support, remote learning support

2. Problems and Concerns

  • 2 interview participants expressed their concerns that they might be missing out on some important information about the school, but don't know what they need to know
  • 30% of survey/interview participants were concerned about the quality of remote learning
  • 40% of survey/interview participants expressed their anxiety and worries about the uncertain situation
  • 15% of participants were concerned about the tuitions and their financial situations
  • Information is not often up-to-date or they can't tell if the information is updated in a timely manner

Baseline Usability Testing

I conducted usability testing with 6 representative users to evaluate the quality of the original design. I first allowed the participants to explore the site to collect their impressions and feedback on the page. I then gave participants tasks to find the essential information, which I identified from the survey and interview findings, to evaluate the ease of use of the original design.

Goals

  • Learn users' initial impressions and satisfaction with the original design
  • Identify design problems that prevent users from finding information quickly
  • Establish an initial benchmark to measure usability and user satisfaction

Findings

The most critical issue was that all participants failed to find the essential information or took a significant amount of time to find it.


Successes and Failures Per Task

Basline Test
Problem Severity/Scope
1. Scattered Information

The information was not categorized, and each information was randomly placed all over the page. Since there were no category names, users had to read each item from top to bottom until they find the information they were looking for.
Severity: High

Scope: High
2. Unclear visual hierarchy

Since the page barely had a visual hierarchy such as titles and headings, images/graphics, or color code, users were not able to scan the page to anticipate where the information that they need was located. All participants went through each item from the top until they find the information they were looking for.
Severity: High

Scope: High
3. Too much text and complicated words

The page was densely packed with too much text. Participants had to spend a significant amount of time reading large bodies of text to find the information. Some participants had difficulties with reading paragraphs that contain complicated/unfamiliar words.
Severity: High

Scope: Medium

Design Goals

Before moving to the design phase, I set design goals by specifying my initial design goal.

Quick access to primary information

Keeping users updated with primary information is essential in this circumstance. The new design should prioritize the primary information and allow users to easily access it.

Logical and effective content organization

Organizing the content in a way that makes the most logical sense to the users will contribute to optimizing the site's navigation

Scannable content

Make the page more easily scannable by utilizing a clear visual hierarchy, graphics, etc.

Up-to-date information

Providing the latest information is crucial to reduce users' undue worry under constantly changing situations. It is also important to let users know the information on the website is correct and up-to-date

Design

Affinity Diagram

Based on the findings from user research, I organized the data and information, prioritized features, and established a logical site structure and page layout. Since I was designing specifically for the COVID-19 Update page, my main focus was to categorize, prioritize, and map out the information to achieve the most logical page layout instead of building a whole site structure.

COVID-19 page design sketch

Findings

Primary information on the main page
  • Campus status
  • Class status
  • Health and safety
    (campus operation protocols, safety measures, campus reopening plan, etc.)
  • Latest update from school

Sub Categories

Remote Learning Support
  • Get ready for remote learning
  • How to use Canvas
  • Tutoring & student learning support
  • IT support
Faculty / Employee Support Working prograss
COVID-19 Resources
  • Mental health
  • Basic life support
  • Unemployment worker retraining
  • Technology resources
Student Services & Contact
  • List of student service divisions
  • Contact information
FAQ Millennials and additional information

Information Architecture

COVID-19 page Information Architecture

Design Sketch

COVID-19 page design sketch

Prototype & Test

Lo-Fi Prototype & A/B Testing

Based on the design sketch, I crafted a lo-fi prototype using Figma. To allow users to easily navigate and increase the accessibility of the website, I decided to employ "Quick Links" where users can find the most frequently used links quickly. To help users find it more easily, I conducted A/B testing and determined the best place for the 'Quick Links.'”/mark>.


Design A

Design A

Placed the Quick Links bar in the right column.

Pros

- The page looks cleaner with white space and less text on top of the page

Cons

- The Quick Links might not be very explicit

- The users have to scroll down the page to see the latest updates

Design B

Design B

The Quick Links bar is placed on top of the page.

Pros

- Easier to find Quick Links

- Users could find more information without scrolling the page down

Cons

Some users may feel there are a lot of information to process on top of the page

Findings

4 out of 5 participants found the Quick Links bar quicker with Design B. The page density in Design B wasn't a problem either.

Home page design

Final Visual Design

Users were able to find the essential information more quickly than the baseline usability testing. It suggested that I achieved the overall improvement of accessibility, scannability, and usability of the website.

  • The primary information is more explicit and easy to find
  • Improved the efficiency of the page with the "Quick Links" bar
  • Improved the scannability of the page with a clear visual hierarchy and color-coded labels
  • Enhanced readability of the page by minimizing the amount of text and using plain English

Why I went against simplifying the design more.

During the user research, I learned some people had no idea what information they needed to know in an uncertain situation. I found it critical to make the essential information visible and explicit instead of hiding it under each category.

Visual Design Visual Design Visual Design Visual Design Visual Design

Prototype Site

Created a prototype site with Adobe XD

Next Step

  • Due to proximity and time restrictions, I decided to mainly focus on designing for the primary user - current and incoming students - in this project. If I had more time, I would conduct further user research with faculty and employees to achieve a better inclusive design that works for all user types.
  • Since the goal of this project was to redesign only the COVID-19 Update page, the content outside of this page was out of scope. If I had more time, I would reexamine this final design by considering the content and site structures associated with the entire Seattle Central website as well as the Seattle Colleges website to make the design work as a whole website rather than just a single page.

What I learned

  • User surveys and contextual interviews with participants representing various user types helped me understand the needs and pain points of different user archetypes. While they helped me determine how to prioritize and organize a large amount of information, they also made me realize the importance and difficulty of achieving inclusive design.
  • The most challenging was conducting user research remotely due to the pandemic. When I conducted usability tests on Zoom, I was not able to observe the participants' behaviors properly such as their facial expressions or eye movements, etc. I figured out the way to get the most out of it by asking them to think out loud during the session.
  • This project made me realize the importance of iterative design evaluations and refinements to fix emerging errors and create the best end results.