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
aaa
aaa
aaa
aaa
aaa
Sep 2020 - Dec 2020
Individual Project
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 increased inquiries for the student service department. I decided to redesign this page to help students navigate college during the pandemic.
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 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.
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.
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.
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.
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.
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 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.
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.
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 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.
if you want to learn more about my projects, give feedback, or work on an exciting project together!
©2023 | TOMOMI MATSUZAKI