SCC COVID-19 Web Design Project Header

Seattle Central College
Vs. COVID-19 Outbreak

Case Study
UX Design
Web Design
  • Date: Sep-Nov 2020
  • Project Type: Indivisual
  • Role: UX Designer
  • Tools: Google Forms, Figma, Adobe XD
Yellow Button

Overview

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 in order to help users navigate college more smoothly and provide better expeirence with Seattle Central.

Seattle Central Campus
Yellow Button

Problem Statement

The poor usability and design of the COVID-19 Update page failed to navigate users and provide the up-to-date information they needed surrounding COVID-19. This caused users' undue worry and the increse of inquiries for the student service departments.

Yellow Button

Goals

Build a clean and logical page structure and make the page more informative to navigate users throughout the page more efficiently by:

  • Empathizing users and understanding their needs and problems
  • Analyzing how users interact with the page

Design Process & User Research Methods

01. Plan Competitive Analysis
02. Research User Survey / Contextual Interview

Baseline Usability Testing
03. Design Affinity Digram

Prototype Testing

A/B Testing
04. Develop
05. Launch
Competitive Analysis
Yellow Button

Competitive Analysis

COVID-19 page design sketcj

What I Did

As the COVID-19 outbreak and campus closure were an unprecedented event, I decided to conduct competitive analysis to learn what other schools were doing and have a better understanding of the college operation during pandemic.

  • Evaluated what competitors offered as primary information and how they organized the high volume data
  • Identified design patterns and visual elements used and interaction opportunities to determine best practice

Finding Examples

Strengths Weaknesses
  • The current campus status and school safety procedure were the top two primary information provided on all competitors’ websites
  • A large amount of information was nicely categorized. Showing only the category titles and graphics kept the main page clean and simple.
  • 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 that 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 information they need quickly
User Survey / Contextual Interviews
Yellow Button

User Survey & Contextual Interview

  • Participants: 26 (current students, faculties, employees, people outside of school, etc.)
  • Methods: Online survey (Google Forms) / one-on-one interview (Zoom)

What I Did

As I knew understanding users' needs and problems was one of the most crucial aspects of user research in this project, I spend a significant amount of time for user surveys and interviews. I chose a variety of user type as a participant in order to see as many perspectives as possible and make the design inclusive.

  • Identified what users needed from the COVID-19 page
  • Understood what users would have expected to see on COVID-19 page before visiting the page
  • Identified any issues that users were facing during COVID-19 outbreak

Finding Examples

Expectations & Preferences Problems & Concerns
  • 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
  • 30% of participants concerned about the quality of remote learning
  • 40% of participants expressed their anxiety and worries for the uncertain situation
  • 15% of participants concerned about the tuitions and their financial situations
  • Information were not often up-to-date
COVID-19 Update original page design
COVID-19 Update page original design
Yellow Button

Baseline Usability Testing

  • Participants: 6 (people who have never used the Seattle Central website)
  • Methods: one-on-one interview (in-person & Zoom)

What I Did

  • Evaluated the ease of use by testing the original page with representative users.
  • Identified any usability problems and determine the participant’s satisfaction with the page
  • Established an initial benchmark to measure user satisfaction.

Finding Examples

Problem Severity/Scope
1. Scattered Information

The information were not categorized, and they were randomly placed all over the page. Since there were no category names, users had to read each items from the top to bottom until they find the information they were looking for.
Severity: High
Scope: High
2. 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 the paragraphs that contains complicated/unfaniliar words.
Severity: High
Scope: High
3. Unclear visual hierarchy

The information were not categorized, and items were randomly placed all over the page. Since there were no category names, users had to see each items from the top until they find the information they were looking for.
Severity: High
Scope: Medium
COVID-19 page design sketch
Yellow Button

Affinity Diagram

What I Did

Based on the findings from user research, I organized the data and information, prioritize features, and established a logical site structure and page layout

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

Design Sketch

COVID-19 page design sketch
Yellow Button

Prototype & A/B Testing

I decided to employ "Quick Links" where users can find the most frequently used links quickly. But the problem was that I didn't know where to place it in order to help users find it in the most efficient way. I conducted A/B testing to find the best place for “Quick Links” using mid-fidelity wireframes.

Design A:
1 participant prefered this design

Pros

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

Cons

The Quick Links is not noticable


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

Design A

Design B:
4 participant prefered this design

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

Design B
Home page design
Yellow Button

Final Visual Design

Through iterative prototype testing, I evaluated the preliminary design and achieved the further refinement of the design. It showed that users could navigate themselves to find information more quickly than baseline usability testing, with which I achieve the overall improvement of accessibility enhancement and scannability of the final design.

  • Achieved offering the primary information users needed efficiently by nicely categorizing items and placing them to be easily found in the upper part of the page
  • Employed a "Quick Links" bar on top of the page where users access the most frequently used links quickly
  • Improved the scannability of the page by using a clear visual hierarchy with bold headings and color labels. This eventually reduced the time that users consume large bodies of text
  • Enhanced accessibility and readability of the page by minimizing the amount of text on the main page and transfering the additional information to sub pages.
Visual Design Visual Design Visual Design Visual Design

Prototype Site

Created a prototype site with Adobe XD

Yellow Button

Reflections / Next Step

  • User surveys and interview with 26 participants, representing various user types, showed me a wide range of needs and perspectives. This became one of the crucial activities that helped me to determine the primary information to place on the main page.
  • One of the most challenging aspects of this project was conducting user research remotely due to COVID-19. In the remote usability tests on Zoom, since I was not able to observe the participants' behaviors properly such as their facial expressions or eye movements, I asked them to speak their thoughts or feelings out loud during the sessions.
  • This project made me realize the importance of iterative design evaluations and refinemenets in order to fix emerging errors and create the best end results.
  • If I were to continue working on this project, I would consider the actual site structures that associated with the entire Seattle Central website and the Seattle Colleges website to make it work better in the real world. I would also conduct further user research with faculties and employees to make the design more inclusive for all the targeted users.