UW Bothell Coronavirus Website Redesign

Overview

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. Our ethnographic research shows that Generation Z is advocating for mental and physical health resources in higher education.

Our research aimed to find ways to provide a meaningful and seamless experience for students, prospective students, and faculty personnel when navigating the University of Washington Bothell COVID-19
webpage. In doing so, we hope to cater to the current and future needs of everyone on campus and those who wish to be a part of the UW Bothell community.

Tools

  • Miro

  • Figma

Team

  • 3 UX designer

  • 1 project manager

My Role

  • UX designer

  • UX researcher

  • Workshop facilitator

Timeline

  • Overall: 8+ weeks

  • Discovery & Research: 2+ weeks

  • Design & testing: 6 weeks

My Design Process
UW Bothell Coronavirus Website Redesign

Define

What problem are we trying to solve? What are our stakeholder’s values and goals?

The Problem

We spent more time understanding The UW Bothell Covid Website in the Define stage. Its mission is to provide information to students and staff about the latest covid news and how the university is handling the virus from spreading to one.

Our objective was to explore how current 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. This gave us insight into things we liked, and disliked, and the main goals of the site.

Our Stakeholders

Values & Goals

  • The school was looking to engage its primary users to use the site with ease.

  • Have a clear navigation system.

Success Metrics

  • Our product will enhance student and staff engagement by focusing on the user experience and ease of use rather than unnecessary information.

  • Our product will focus on delivering a transparent navigation system where everything will be visually clear for users.

Research 

What do we need to understand about our users and the problem space?

Ethnography 

We also did some ethnographic research to observe key behaviors and problem areas. 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. Here’s what we learned:

  1. The primary users were mainly incoming freshmen.

  2. Understand how Gen Z may differ from other generations in regard to how they use and navigate websites.

  3. Their largest room for improvement was the lack of content and unnecessary hyperlinks. Their navigation bar was also difficult to locate.

User Survey

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.

The following data we obtained about our users through a survey distributed via Google Forms: 

Demographics 

The first three questions are close-ended, which determines which demographic the users belong to.

Open-ended questions

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.

User Satisfaction

The rest of the questions were designed to gauge users’ satisfaction with the UWB COVID-19 Webpage.

Additionally-

Our last question, “Please take a look at the Designated Eating Spaces page, linked in the left navigation bar of the site. How confident are you that you could find those spaces on campus?” was designed to collect information about whether our delighter (an interactive map) is necessary, without affecting responses by mentioning that solution outright.

UW Bothell Coronavirus Website Redesign

Card Sorting

To make sure that the site’s information architecture is aligned with user expectations, we had 2 remote card sorting sessions using Figma. Our goal was to find smaller, intuitive groupings for the existing product categories. After organizing the data, we ended up with 5 clearly defined main categories with 3-7 subcategories in each.

Analysis

Personas

We wanted to form a deeper understanding of our users' goals, needs, experiences, and behaviors. So, we created 3 personas for each of our user segments. They were based on user interviews and surveys, and we kept updating them throughout the project as we gathered more data. We used these personas whenever we wanted to step out of ourselves and reconsider our initial ideas.

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 faculty members were prioritized slightly lower as our secondary personas.

UW Bothell Coronavirus Website Redesign

User Journey

Key usability insights

  • Users consistently struggle to find certain pages

  • Users rarely notice the navigation sidebar

  • Users do not recognize the page index as an index

  • Users must read through large chunks of text to find important information

  • Redundancy leaves users confused and uncertain

  • Directions to designated eating spaces are difficult to understand for users who have not been on campus

Research Questions

  • 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 on the site that get little to no traffic/attention at all?

  • How much of the available information is actually being read?

  • How easy is the site to use, in general?

Ideation

What’s our solution? Is it in line with the problem, our users, and stakeholders?

Idea #1 

Develop an interactive kiosk to help students find different places on campus where they can eat & study while maintaining social distancing during the pandemic. The kiosk will also provide students and faculty with any updates from the school regarding covid. The kiosk can be accessed online.

Pros

  • Provides a positive experience for new visitors to the school. 

  • Helpful for students to find ways where to study and eat on campus without creating any confusion. 

  • Accessible online for those who like to plan without having to call the school. 

Cons

  •  The product does not meet the team’s budget.

  • The length of the project will not be enough as this kind of project will need more time to conduct more interviews and usability testing with students and staff at UW Bothell. 

Idea 2

Develop an interactive map to add to the designated eating areas page to help students navigate around the campus and find places with ease. In addition to the map, we will focus on creating a user-friendly website with a focus on the navigation bar and making sure the number of texts and links on the site are not overwhelming for users. Our number one goal for this approach will be that users find answers to their questions in a short amount of time without any confusion.

Pros

  • The interactive map will help many incoming students and faculties find eating designated areas during covid.

  • Navigation Bar will be more likely used with ease and comfort.

  • Less text and more content and information will provide a user-friendly experience throughout the site.

Cons

  • Not enough time to run usability tests, interviews, and micro usability to come up with the best results possible.

UW Bothell Coronavirus Website Redesign

The Decision

As a team, we decided to go with our second idea. By highlighting users’ needs, we focused on Guidelines of Covid requirements, Covid updates on the website, and the location of masks on campus.

Our delighter is to add a map for designated eating spaces.

UW Bothell Coronavirus Website Redesign

Research Summary 

Design: Phase One

What's our vision of the platform? 

Sketches

We each created low-fidelity sketches that demonstrated some of our individual ideas for the site’s layout and flow. This helped us tremendously with explaining our individual concepts and ideas for visuals and we chose the most effective routes which ended up being parts and pieces of different sketches. 

Wireframes

Once aligned, my team and I started putting together mid-fidelity wireframes before transitioning into high-fidelity designs.

Validation

How are people interacting with our product?

We then created a higher fidelity prototype to conduct usability testing and made changes where needed. This test was task-oriented and we asked participants to do things like 'find the visitor policies' or 'find eating areas'. After these tasks, we asked some questions to better understand their experience. Due to covid restrictions, we ran remote tests and tested four people in total. These are some of the responses:

  • Navigation - The navigation and breadcrumbs had some repeated options, which was confusing.

  • Quick Links - This portion should be at the top for a user-friendly experience.

  • More features of facilitators - ​More features like going back to the top towards the end of the page, a FAQs option for visitors and upcoming students, and a map.

Design: Phase Two

UW Bothell Coronavirus Website Redesign

Solutions tested in prototypes

UW Bothell Coronavirus Website Redesign

Areas of further research

After our team conducted usability testing, user 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 from users, these changes are likely to improve the experience of using this site by increasing its clarity, approachableness, and overall ease of use.

Reflection

Challenges

One of the biggest challenges we faced here was the difference in our thoughts, ideas, and opinions among the people on our team. This is to be expected in any design project, especially in newly formed teams. Though, oftentimes our team struggled with communication and effective collaboration. 

It's ironic actually, midst this we were designing an entire application that can help teams get through issues just like this through team building exercises and we actually did some of those activities ourselves! This was a really essential piece in our process because it not only allowed us to empathize directly with the issues and concerns of our target audiences but allowed us to be on the same page so we all could come together and make a great product that made sense.

Takeaways

This project was my first time working with stakeholders and I loved the experience! As someone who is super detail-oriented and values intentionality as a designer, it was nice having some guidelines such as values and goals outside of those within the team to always refer back to throughout the design process. This is one of my favorite projects so far!