#WebDesign #CaseStudy
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 |
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.
How can we increase ease of use of the website?
How can we allow users to access the information they need more easily?
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.
Strengths | Weaknesses |
---|---|
|
|
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.
User Survey |
Contextual Interview |
Gather data quickly and flexibly |
Collect qualitative, observed data |
current students, faculty, employees and people outside of school
1. Expectations & Preferences
The following items are essential information that users want to know
2. Problems and Concerns
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.
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
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 |
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 |
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.
Primary information on the main page |
|
---|
Remote Learning Support |
|
---|---|
Faculty / Employee Support | Working prograss |
COVID-19 Resources |
|
Student Services & Contact |
|
FAQ | Millennials and additional information |
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
Placed the Quick Links bar in the right column.
- The page looks cleaner with white space and less text on top of the page
- The Quick Links might not be very explicit
- The users have to scroll down the page to see the latest updates
Design B
The Quick Links bar is placed on top of the page.
- Easier to find Quick Links
- Users could find more information without scrolling the page down
Some users may feel there are a lot of information to process on top of the page
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.
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.
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.