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.
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.
Build a clean and logical page structure and make the page more informative to navigate users throughout the page more efficiently by:
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 |
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.
Strengths | Weaknesses |
---|---|
|
|
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.
Expectations & Preferences | Problems & Concerns |
---|---|
|
|
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 |
Based on the findings from user research, I organized the data and information, prioritize features, and established a logical site structure and page layout
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 |
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.
The page looks cleaner with white space and less text on top of the page
The Quick Links is not noticable
The users have to scroll down the page to see the latest updates
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
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.