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.
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
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.
How might we help users quickly access the information they need by increasing the ease of use of the website?
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.
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.
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.
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.
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.
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.
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.
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.
The new design should prioritize the essential information and allow users to easily access it.
Optimize the site navigation by organizing the content in a way that makes the most logical sense to the users.
Make the page easily scannable for users without needing to read the content thoroughly.
Let users know the information on the page is correct and up-to-date to minimize their undue worry.
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.
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.
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.
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."
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.
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.
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.
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.
.svg)
