Logo of the University of Washington - Bothell.

UW Bothell COVID-19 Website

Executive Summary

Our objective was to explore how COVID-19 affected the experience of current students and other groups who utilize the UW Bothell webpage. Our goal is to create an innovative, minimalistic, accessible, and informative COVID-19 webpage. By creating a practical user-friendly website, it will increase ease of use for our users and ensure the clarity of important COVID information.

Timeline

Janurary 2022 - March 2022

Team Members

Evelyn Durbin
Anna Arkhipova
Hien Luu
Manal Khan
Manal Lakrad
Jason Estrada
Phillip Han

Devices

Google Drive (Docs, Slides) - Content Folder
Figma - Prototyping, Wireframing, Personas
Zoom - Group Meetings
Discord - Group Communication & Meetings

Genre

Website Redesign

Initiation

Discovery Stage

Context

COVID-19 has drastically changed the way students interact on campus. More than ever, students consider how universities are handling the pandemic as a determining factor for applying to universities.

Hunt Statement

Our team’s hunt statement serves to explore the transitional experience of UW Bothell students in the midst of COVID-19. We seek to understand how current UWB students are using COVID-19resources to enhance their school life and learning experiences as we transition into in-person learning, in order to gain insights on ways to design a user-friendly webpage that will help students navigate to important information regarding COVID-19 with ease. By exploring how students leverage outside resources related to COVID-19, we can create a meaningful and delightful user experience for them when they explore the UW Bothell COVID-19 webpage.

Research

Rolling up the sleeves

Our objective was to explore how current students and prospective students utilized the UW Bothell webpage. We began our research with an initial website immersion to get a general idea of who our users were.

Original State of Website

The University of Washington Bothell COVID-19 webpage is the focus of our research. This webpage serves to keep members of the UW Bothell community informed about updates, requirements, policies, protocols, and resources. We focused on redesigning the information architecture of the webpage. The existing top navigation bar was kept the same because it was already connected to the existing UW Bothell homepage. We prioritized the top needs of current students at UW Bothell. Our team narrowed it down to mental health resources, health requirements and policies, FAQs, as well as designated eating spaces on campus. An entry page was integrated to allow more visual representation. Landing pages were created for the newly implemented health requirement and policies, FAQs, news and updates, and resources card.

Primary Persona

Personas

After researching our user demographics, we put together 3 personas to accurately represent the users we are catering to. These include the users' needs, wants, and pain points, as well as any other relevant context and information about their personality that affects how and why they use the site. Our personas consist of a current UW Bothell student, a prospective UW Bothell student, and a member of the UW Bothell faculty. We prioritized catering to the needs of the current UWB student as our primary persona, and the prospective UWB student and a faculty member were prioritized slightly lower as our secondary personas.

Secondary Persona

Scenarios

In order to provide context for the situations our users are using when navigating through the UWB COVID site, we wrote out four main scenarios we would focus on while collecting research on user satisfaction and the functionality of the site. These were as follows:

Experiencing Symptoms → Paul has been experiencing some mild coughing and fatigue, which he knows are potential symptoms of COVID. He needs to find out whether he should stay home, and what the UW requires him to do if he tests positive for COVID.

Returning to Campus → Paul is about to return to campus after being in online classes the previous quarter, but he isn't sure what the requirements are for coming to class in person. He needs to find out what he'll need to do before coming to campus.

Finding Safe Eating Spaces → Paul wants to know where he can eat on his lunch break safely. He needs to find out where the Designated Eating Spaces on campus are.

Worried About Campus Safety → Paul lives with someone who is at greater risk of COVID and is worried that coming to campus could be a risk to their health. He needs to find out about what the UW is doing to keep the campus clean and safe.

Journey Map

We created a journey map of our primary persona, Paul Hawk, a current UWB student, to gain a better understanding of his emotions as he navigates the UWB COVID page and brainstorms improvement opportunities at each step of the process. The map provides context for his actions and motivations and shows that despite encountering obstacles during his experience with the site, at the end of the experience he is still glad to have learned the information he did.

User Questions

To keep our goals in mind while planning out this project, we wrote a list of the most important questions for us to keep in mind throughout the research process. We used this list to narrow down the focus of our research and make sure we were exploring data that would directly help us uncover issues with the current site and create solutions for those issues, instead of getting side-tracked with data that had little to do with our goals. Those questions are:

What pieces of COVID information are our users looking for most often?
Is the information on the site easy to read and parse?
How easy is it to navigate to specific pieces of information?
Is it easy to understand where to find topics at a glance?
Are there any pages or sections of text of the site that get little to no attention at all?
How much of the available information is actually being read and remembered?
How easy is the site to use, in general?

Data Gathering

In this case, we believed that using User Surveys, Card Sorting, and filling an Ethnographic Research would be the perfect options for our research methods for data collecting.

Card Sorting

We used the card sorting technique to prioritize different elements and components of the current UW Bothell COVID-19 website, and note items that we believe will be useful for the user. We wrote down titles and key terms that indicate the information being displayed on the site, images or buttons that are effective in its place, any unique feature that is beneficial to look for information, and anything else that we believe could be useful to include in the COVID-19 website. Once we scanned the UW Bothell COVID-19 website, we thought of ideas and items that we believe should be incorporated into the potential redesign of the COVID-19 website. We wrote down 10 or more ideas, removed any duplicate ideas, wrote down themes we noticed among the ideas and items, and lastly blended all of our results as a group.

User Surveys

We obtained data about our users through a survey distributed via Google Forms. The purpose of the survey was to collect analytics about the UWB Covid information website and its usage, and the questions were intended to validate our personas and scenarios, as well as reinforce what we learned in our usability studies.
We asked a series of ten questions, which used a combination of open text responses, closed multiple-choice questions, and Likert-scale ratings, to provide us with both quantitative and qualitative data. The first three questions are close-ended, which determine which demographic the users belong to. The next three questions are open-ended to collect the features that users find most interesting and useful to their needs. We also asked which features the user may find confusing or difficult to use, as we still want to address their pain points. The rest of the questions were designed to gauge users’ satisfaction with the UWB COVID-19 Webpage.

Ethnographic Research

Due to the majority of our primary users (UWB students) being Gen Z, we incorporated some research about the characteristics of this demographic into our design decisions and research.The goal of the research was to understand how Gen Z may differ from other generations in regard to how they use and navigate websites, and by extension what may make the experience easier for them. It is worth mentioning that this is not our only user demographic, but due to our time constraints, we were only able to accommodate our primary and secondary personas.

Research Result Findings

Our team developed a Google Form questionnaire and sent it out to people who fit our personas.The survey is intended to collect analytics about the UWB Covid information website and its usage. Each answer was taken into consideration when creating a better user experience. Out of the ten people who took the survey, 9 people were current UWB students, and 1 was a prospective UWB student. When asked how likely they are to use this webpage for COVID-19 related information regarding UW Bothell on a 1 to 5 scale, 40 percent of the responses said 3, 20 percent said 5, 10 percent said 4, and 30 percent said 2. Survey participants also gave input on what they believed to be confusing aspects of the website. 3 of the 10 respondents did not like how the links looked and how many of them there were. One response noted the overwhelming amount of information as well. Overall, the questionnaire results helped us determine what we would like to include in our prototype to create an improved user experience than the current UWB COVID website.

User Wants

We also researched and analized elements from our dataset from users and what they would want for the website to obtain to provide succeed in their experience.

Guidelines

A prevalent section was the guidelines, as the COVID situation is constantly changing, and they wanted a dependable source to keep up with the latest information.

Map

Users wanted a map for questions that asked for the type of information they would like and recommendations for the site. The users found theDesignated Eating Spaces confusing for those unfamiliar with the campus. The list of room numbers and areas was rendered meaningless without an understanding of the different buildings and layouts.

Masks

Users requested more information regarding finding face masks on campus and how to care for them. Users disliked the PDF file that’s included regarding the use of face masks. Users recommended adding mask information to quick links and having it listed as a quick resource for users to access.

Updates

Several users wanted updates on the COVID-19 website about the ongoing COVID and campus prevention plan regarding the pandemic. However, this page existed under the title of “COVID-19 Communications” where UWB archives past and current updates.

General Layout

Simple visuals with less overwhelming text and more meaningful photos and icons. The users struggle with the tons of text on the current page and often glance over the information they’re looking for in the sea of text. This could be solved with visuals to display the information in away that is more digestible and easy to understand at a glance.

Quick Links

The quick links in the current site are seen as positive with users, however, they could be improved with better visuals. This could be solved if we replaced quick links with a card system where users can access information more easily.

Clear Navigation

The links were all blue text that the user could click on. So, it was hard for the user to differentiate between the navigation that opened a link versus the navigation that scrolled to an anchor on the page.

Statistics

Although there was only one user that left a comment, we believe that it was still worth mentioning. There was a user that wanted statistics to help gauge covid cases on campus. This adds information to the UWB COVID site, helping users see the rate of danger on campus.

Usability Testing - Current Site

To find out which parts of the current website work and which ones don't, we conducted 6 task-based usability tests. We invited 6 test users who represented our primary user demographics and gave each of them a series of 5 tasks to perform on the website, followed by a post-testing interview to clarify their impressions of the site and the difficulty of performing the given tasks. Three of the test users were current UWB students (our primary persona), one was a prospective UWB student (our secondary persona), one was a current UWS student, and one wasn't a student, but was of about the same age as the other testers. The testing took place mainly online using screen-sharing over Discord or Zoom. All comments were recorded and analyzed later on once all the testing and interviews had been completed.

Key Insights

Usability testing revealed several insights into which parts of the site work, and which parts need some improvement to offer a smoother user experience. Each of these key insights will be described below.

Users must read through large chunks of text to find important information ->
The most noticeable trend among all the test users was that they found the amount of reading they had to do to find important information cumbersome, or even frustrating. Users spent significant time scrolling up and down the page trying to figure out which heading they should be looking at, and then even time reading blocks of text in their entirety to find a link embedded within, or sometimes just to understand if the paragraph was relevant to their goal or not.
Users consistently struggle to find certain pages ->
Another common – and more urgent – trend was that users consistently struggled to find certain pages, such as the Communications page, which contains news and updates, and the" What do I do if I feel sick?" section.
Users rarely notice the navigation sidebar ->
Another reason for this is that users barely noticed the existence of the navigation sidebar. They instead relied on the Quick Links or links within the page's text to bring them to the pages listed there, which made navigation take longer and made the navigation path more difficult to repeat.
Users don't recognize the index as an index ->
Similarly, users had trouble recognizing the topic index on the main page as what it is – an index. An index is meant to give an overview of the page's content so the user can understand what the page contains without scrolling through the entire thing, but users rarely used it that way, instead of spending time scrolling up and down the page.
Redundancy of links leaves users confused and uncertain ->
The redundancy of certain links added to users' uncertainty and confusion over the page's navigation. Certain pages are linked several times throughout the page, but with inconsistency in the wording of the links. Some links with different wording go to the same page, while others with nearly the same wording go to completely different pages.
Designated eating spaces directions are hard to follow for new students ->
Our final key insight was that test users who had rarely or never been to campus expressed that the directions on the Designated Eating Spaces page are a bit difficult to follow. The page relies heavily on listing room numbers and landmarks to mark where the eating spaces are, which was easy to understand for current UWB students who knew the campus fairly well.

Information Architecture and Visual Layout

Finally, we used the results from our Card Sorting exercise to overhaul the site's information architecture and construct a new and more intuitive system of organization for the site's topics of information. We grouped the topics under 5 general navigation headings and made sure to list the most important information closer to the top of each page. We also revamped the look of the text itself, so that each section has a very visible heading, is divided from other sections by a divider line, and has plenty of white space to prevent the text from appearing overly dense. Important instructions that were previously hidden within the text were separated off and put into blocks, visuals, and lists. Important links were separated as well and instead displayed as buttons below the relevant paragraph, to make them easier to spot at a glance. In line with this, we also increased the visibility of the index/table of contents on the longest page, to allow the user to see the contents of the page at a glance.

Prototype

High Fidelity Prototype

Prototying Solution

After constructing the prototype, we performed another round of task-based usability testing onit to see if our solutions improved the experience. To directly compare our results to the results of previous usability testing on the current UWB COVID site, we used a very similar type of process. We invited 7 test users, three of which were current UWB students (our primary persona), one was a prospective UWB student (our secondary persona), one was a current UWS student, one was a student from an out of state university, and one was not a student, but of the same age group as the other test users. We gave each user 3 scenario-based tasks revolving around finding relevant information on the site. However, since we wanted to test every feature of the site, instead of giving every user the same tasks, each test focused on a different set of 3 features or solutions implemented in the prototype.

The main solutions we tested – the entry page, the top navigation bar, the designated eating spaces map, and the layout/architecture overhaul – were generally well-received by our test users. Tasks that involved finding a specific piece of information took users much less time to complete than they did in our testing of the current UWB site. The users exhibited minimal hesitation when choosing how to navigate the site, and there were no tasks where the user wasn't able to find what they were looking for. Users responded particularly well to the presence of the Entry Page, stating that they liked its simple straightforwardness, and found the descriptions below the navigation cards useful for figuring out where to go. They also responded well to the overall layout of the site's text and visuals. For example, one user stated that "You just kind of know when you can stop reading, instead of having to read the whole thing," about the experience of looking for information within the text, implying a substantial decrease in the amount of reading the site requires the user to do. Overall, we concluded that our proposed solutions had a very positive effect on the usability of the website.

Although there were a lot of likes, users did have a few dislikes about the prototype. One criticism we received is that while the Quick Links were useful, it was inefficient for them to beat the bottom of the entry page. If they were at the top, or otherwise visible without scrolling, the feature could be used for its intended purpose – being quick. Another opportunity for improvement is that although dividing up the text greatly improved the completion rate of the tasks, a couple of users still said they would prefer the text to be broken up by visuals or other elements even more in some places. One user mentioned that the top navigation looked a bit aesthetically strange next to the already existing UWB top navigation above it, but more inquiry would be needed to determine the implications of this. None of these dislikes seem to greatly affect the basic usability of the site, but these are things that could still be refined and improved upon in potential future iterations.

Results

After our team conducted our planned usability tests, interviews, and user research, we decided on four main recommendations for changes to the UWB COVID website. Based on the testing and feedback we received, these changes are likely to improve the experience of using this site by increasing its clarity, approachableness, and overall ease of use. From our collected data and in our designing stage, we prepared 4 recommended design changes for the redesign.

Overhaul Information Architecture
One of the main contributors to the success of our prototype was the reorganization of information on the site. Where the organization of the current UWB COVID site confused several times among our test users, the overhauled information architecture we used in our prototype's page navigation greatly decreased the number of confusion users experienced while looking fora particular page. Though the finer details of this information architecture could be tested further, the broad categories of "Health Requirements & Policies", "Resources", "News &Updates", and "FAQs" made intuitive sense to our test users, and the placement of important topics near the top of each page was well received as well. We recommend a similar approach in reorganizing the site's information architecture.

Break Up Chunks of Text
Clearly dividing up the sections of text on each page using large headings, divider lines, and various visuals and lists greatly increased the user's ability to quickly skim the text. Where in the current UWB site the user must read through a large amount of text just to get a feel for what information is in that section, the headings and layout of the text in our prototype allowed users to get the same understanding without reading much besides the section headings and subheadings. Additionally, separating the majority of the embedded links into buttons allowed the user to access those resources without reading the entirety of the text, as well. This solution was very well received among our test users, and we highly recommend this approach.

Increase Visibility of Navigation Features
Another of our successful solutions was making the navigation bar much more easily visible. Our approach to this entailed moving the navigation to the top of the page and making sure the font was large, bold, and easily readable, both of which make the navigation much more noticeable. Where the current UWB COVID site's navigation often went completely unnoticed, test users of our prototype made frequent use of the top navigation bar without needing to spend time figuring out how it works. Increasing the visibility of the index/table of contents on the longest page also had a similar effect. We recommend this solution, as it increases the user's freedom of navigation and succeeds in preventing confusion.

Add An Entry Page
The addition of a dedicated entry page to our prototype was very well received by the users.While it doesn't contain much text information on its own, the navigation cards and summaries succeed in providing a quick and efficient overview of what content the site offers. The UWB COVID site is packed with a large amount of information, and it's important that the user isn't overwhelmed by it, or they risk missing information that is important to their health and safety. The addition of an entry page serves to make the user's first experience with the site approachable and prevent confusion by offering an easy place to start looking.

Next Steps

Further Research

By moving forward and considering further research and the possibility of funding, we would broaden the scope of our research and look at the user traffic from the pages and observe where users are most of the time, and conduct more interviews with more students from UW Bothell that have different backgrounds. Another consideration we could have is exploring the integration of accessibility on the website so that it serves a wider audience.

With the opportunity to do further research, a few ways of collecting more data would be through conducting additional micro and nano usability tests on our prototype to refine. Furthermore conducting ethnographic research to support the decisions that we make for our design. We would also consider asking for access to tools such as heat maps and Google Analytics and using them on our prototype.

In the ideate, prototype, and test stage, we would continue refining our high-fidelity prototype by performing the A/B testing tool and work on removing or modifying any elements that the tester doesn’t like. We would integrate an interactive designated eating space map in our high-fidelity prototype to include indicators to differentiate the different areas from students and faculty and test it to learn whether certain elements are effective or distracting. A responsive measurement would be to explore additional platforms other than desktops like mobile view and tablet view. This will allow students and faculty to have options to view the website on any device they have access to. Lastly, explore kiosk features on campus. Specifically enhancing features such as temperature checks, markers for masks and gloves on an interactive map, and hand sanitizer stations. By including delighter elements in the UWB COVID site, users will be attracted to the features of each component. Beyond the recommendations we settled on using our initial research process, continuing to refine and research further could provide additional insights into improvements for the UWB COVID site.

Learning Outcomes

This project provided with different areas of experiences that I hadn't achieved in past team-based projects. Living in real time post pandemic and trying to go back to what was the norm before 2020 opened an opportunity to understand what works as students but also as designers and design the positive experience for the greater student body of the UW Bothell campus. As current UWB students during the time of the project, our experience brought richness in what students wanted the website to have as well as potential in-person experiences to better assist during the circumstances of distancing.

However, this project also allowed me to experiment what it's like to be in a team of disagreements and troublesome encounters. I learned what's like to disagree with teammates on ideas and decisions, I also experimented having to put more effort and having to cover for others who couldn't contribute as much as we needed to be. Regardless of what we went through as a team, we still able to navigate through the ocean of research and design to provide the best design recommendations for the new redesign of the UW Bothell website.