UX Designer / UX Researcher

CWW

The Centralized Wellness Website

Bringing Husky Health together.

 

About The Centralized Wellness Website (CWW)

There are currently over 50,000 students, faculty, and staff populating the University of Washington (UW). Over 25 health/wellness related units exist with the intent to help students by providing useful information, access to resources, and health/wellness related support. But in reality, students are frustrated and overwhelmed by the sheer volume of overlapping services that are confusing because of their similar yet conflicting information. This has become a barrier to students who are often deterred from reaching out for help when they need it the most.

Our goal was to create a more accessible website that consolidated 6 of these online resources.

This project was broken into 4 phases: Research, Design, Testing, and Presentation. 


Research

Competitive analysis
Stakeholder interviews

Surveys

Persona

The research phase of this project helped us explore the design space. We set out to understand how other universities had handled this type of project before through a competitive analysis. We then sat down with all of the major stakeholders to understand what their health and wellness related units provided for students. Finally, we reached out to students with multiple surveys to gain insight into their goals, motivations, and frustrations. This layed out the foundations for our designs. 

 

Competitive Analysis

 

The competitive analysis was conducted on three other university websites which provide health and wellness-related resources: Arizona State University, Stanford University, and the University of Oregon. This analysis was meant to be an exploratory exercise to better understand the project space. By exploring sites similar to the CWW, we hoped to learn how universities similar in size and organization to the UW structured, advertised, and connected students to appropriate health and wellness resources.

My focus was on Arizona State University's (ASU) wellness website. I found that ASU used a simple method of categorization or resources and services in one website. This meant that students were able to search for their needs easily without knowing a specific department to search under first as with UW's current status. A big weakness of the site was the large of amounts of information in blocks of text. These blocks lacked hierarchy and generally made it hard to parse information. Overall the site gave us ideas on how to organize services and showed us how too much information can hinder our site. 


Stake Holder Interviews

Once we had a basic understanding of how this project space had been tackled before, we interviewed our stakeholders to understand how each one could fit into the CWW. These interviews were used to gain information and insight into what each unit provided. We began our interviews by asking simple questions, such as, “So, what does the "unit" do?” and then diving in with follow up questions. The interviews were also used to develop an understanding about what each unit had personally collected about student frustrations from direct feedback, website analytics, comment cards, and/or other means. I interviewed Hall Health Mental Health and the Resilience Lab. 

Our interviews gave us a lot of information about the current state of the different units'. For analysis for this task, we had the interviews transcribed and then coded each interview for information. Through coding, we were able to find themes and trends through out all the interviews. What we found was:

 

Time accessing resources

Interviews showed that students did not have much success finding or using resources. Some resources require in-person appointments, of which students often have to wait more than a week for an available meeting time. In consequence, this produces high no-show rates.

 

Mental health stigma

Stigma about mental health was also a large barrier for students. Stigma affects the student population on a cultural and personal level and often leads students to believe that what they are experiencing might not be big enough to need help, regardless of the level of crisis being experienced.

Resource confusion

UW’s health and wellness units struggle with content that students find confusing either due to overlap across multiple pages and websites and the presentation of the content itself. Overwhelming amounts of text with no apparent hierarchy prevent students from accessing the wellness information and resources they need. Furthermore, students experience confusion while trying to identify resources when multiple websites from different units seem to provide similar resources.

Vision Meeting

We participated in a SWBC meeting to get student input by conducting a survey, discussion, and participatory design activity to understand the student perspective on the current state of health-related websites at UW. The goal for this meeting was to understand what would help make health-related resources more accessible to students.

A group of SWBC students being led through the participatory design activity


Survey 1

The first survey was designed with students’ interests at heart and reflected topics (such as website content, typical student goals, and student frustrations) which were brought up in both the stakeholder interviews and the Vision meeting. We hoped that by deploying a student survey we would be able to validate our previous findings from the competitive analysis and stakeholder interviews and gain further insight into what UW students are seeking from these health-related websites. This first survey received 14 responses.

The survey was deployed using a Google Form and included 9 content questions and 2 additional questions which allowed the participant to be entered to win a $20 Amazon Gift Card. We received a total of 14 survey responses from students at the SWBC meeting.

Individual health motivates students to seek resources

The survey results suggest that students’ motivations are linked to individual health needs. This finding came from the combined typical goals of UW students (61.6%):

  • Seeking information for themselves 30.8%

  • To take action towards self-help 30.8%

This was finding strengthened by responses to which resources students have searched for on UW health-related websites which were:

  • Information on scheduled appointments 53.8%

  • Self-help 46.2%

  • Walk-in appointments 46.2%

Departmental services are unclear to students

Of student participants, 92.3% said they preferred to filter search results by topic (counseling, fitness, wellness, etc ) instead of by the department that offers each service. 61.5% of students also preferred a more granular approach to filtering by types of resources such as one on one or group resources. Only 23.1% of student responders stated a preference of filtering by department, showing a lack of knowledge about what services specific departments offer to students or that students don’t initially care which department offers which service, as long as they can find what they need.

Students are not confident navigating UW websites

From our survey results, it was clear that students have struggled to navigate UW websites. 53.8% of our survey participants responded that they feel only neutral about their ability to navigate UW websites, and only 23.1% of participants stated that they feel very confident in their ability to find the resources they are looking for on UW health-related websites.

Survey 2

Because our first survey was given to a biased audience (the SWBC was a group created to support student health and wellbeing), we wanted to validate the results. I created a supplementary survey with a couple changes based on feedback from the stakeholders and students at the Vision meeting. This Survey was sent to the entire UW student body via mass email distribution and was important because it gave us a broader audience with an unbiased view of what students were thinking. This supplementary survey netted 729 finished responses which validated most of the previous survey findings.

 
 

What we changed

Reference name change throughout survey

  • Requested by UW Health and Wellness unit

  • Changed “UW health and wellness” to “health, mental health, recreation, and support resources”

  • This made sure students were not confusing the whole of health and wellness with the actual department

Question 2 was changed from a pick one to a rank each answer

  • Requested by students

  • Changed Question 2 into a ranking question

  • This change allowed students to provide multiple reasons for visiting UW health-related sites, giving our team a better image of student goals and motivations

Validation

We were able to fully validate 2 of our 3 initial survey findings. Individual health motivates students to seek resources and Departmental services are unclear to students were both validated. Our 3rd finding, Students were not confident in their ability to navigate UW websites, proved inconclusive in the supplementary survey results. We believe that this was due to the wording of the question, “How confident are you in your ability to find health, mental health, recreation, or support resources on UW websites?”. This question can be easily misconstrued as, “How confident are you in finding information about UW on the Internet?” which changes the heart of the question. However, we were positive that our first survey was validated through the use of our second survey and feel that we were backed by strong data.

Persona

Based on our research, I created a persona, named Anita. Anita was an important piece to our project because she solidified our research in a relatable and simplified fashion. She was a 20 year old sophomore who lived off campus whose grades had begun to slip causing anxiety and depression. We relied upon this persona heavily in almost every aspect of this project following her creation. Whenever we began designing, or came up against competing ideas as a group, we asked each other what Anita would do.

 

Design

Sketching

Information architecture
Wireframing

Our research gave our team firm ground to stand on, so we began designing the actual website. We ideated by participating in a sketching/critique session as a team. This gave us enough content to build an information architecture map and finally a fully wirefamed version the Centralized Wellness Website.

 

Sketching/Critique

Our sketching/critique session involved individual team member’s sketches, critique sessions, and discussion of major themes. Sketching allowed us to explore our own ideas individually and because they were a low fidelity task, we were able to produce a large number of design ideas quickly for critique as a group. The critique became invaluable to us because it gave us all a chance to build a unified idea to design from.

Team members were encouraged to create sketches about potential website designs while using our persona Anita to validate their design choices. We began the critique by posting our designs on a wall. Next, we set a timer for 10 minutes and allowed everyone to evaluate the sketches and write down their critiques on sticky notes. Following the individual silent critique, our team convened to discuss the comments made for each sketch and our rationale behind our notes.

 

Include a persistent crisis button

A persistent crisis button that would exist on all pages of the website. This button could have been something as simple as a red circle with a “!” in the middle that is positioned in the corner of each page. Once clicked, this crisis button would provide information to critical resources.

Drop-down menu

Drop-down menus were a common feature found in our competitive analysis. All of the teams sketches included them in some fashion. On the CWW, this menu would persist across all pages of the website and provide students with a consistent and simple navigational tool.

Major categories on the homepage

One finding from our survey was that students prefer to filter and search information and resources based on topic, not by department. To incorporate this into our website designs, many of the sketches included icons or images for several categories of health-related resources, as well as a short description of the category.

Imagery

Our team agreed that images of students, staff, and the UW community could contribute to a welcoming and inclusive feel to the site. These images needed to be carefully curated in order to enhance the site and maintain focus. Images of real students, not stock or abstract images, alongside student testimonials or next to resource information could also be helpful in breaking the stigma associated with certain resources, such as mental health.

Content layout on major category pages

From our discussion, we decided that once a user selects a major category to explore, either from the homepage or the drop-down menu, they will be taken to the main page for said category. This major category page will connect users to appropriate resources through two methods: a link to a minor category page or a search. To maintain consistency across all pages, links for minor categories will be displayed in a similar manner as the major categories on the homepage.

Information Architecture

Design ideation gave us ideas on what should be in our website but did not give us a starting point or road map for pages we would need o create for it. So we created an information architecture map (IA map) to help us understand how to structure the CWW. The IA map eventually became our checklist for our wireframes. We mapped out general user flows of how we thought students, like Anita, would naturally interact with the CWW. We decided on the user flows of:

  1. Find in-person counseling

  2. Using the crisis button

  3. Signing up for a mindfulness class

We then created an IA map to envision these flows and give our site a framework to build upon.

 

Wireframes

Sketches and IA map in hand, we began wireframing the CWW. This task was the meat of everything we had done up until this point. All of our research and design can easily be seen in each of the wireframes. We decided on medium fidelity and set to creating a gray scale version of the CWW in Figma. The wireframes allowed us to design and build the CWW quickly, much like sketching let us iterate quickly earlier in the project. The wireframes were made into an interactive prototype of the CWW for usability testing.

We created a comprehensive list of all the various page types that would make-up the site. The page types helped us categorize pages that would have similar layouts and content. The page types were:

  1. Home and Major Category Main

  2. Resource Information and Referral Information

  3. Minor Category Results and Search Results

  4. Event Calendar

  5. Event Information

We then established a grid system based on a 12 column layout and typography/color palette used from UW branding. We created basic page layouts for each of the top three page types. Once all the necessary screens were created for the usability testing tasks, we annotated the wireframes and built an interactive
prototype in Figma for testing.

 

Testing 

Usability test kit
Usability study

Now that we had a testable prototype, we had to test it. We needed to know how students would interact with our designs. Were we succeeding in creating a health and wellness website that was in fact more accessible than the current sites? We went about finding the answer to this question by building a usability test kit and conducting 3 usability tests with student participants.

 

Usability Test Kit

I created a usability test kit to run our usability studies with. The test kit outlined the purpose of the study, research questions that were being addressed, session scripts, layed out protocols and procedures for interview questions, and prepared documents such as consent forms and our data logging forms. This helped our team understand exactly how each test should be run and kept each test consistent no matter which team member was there to facilitate it. 

I first identified 4 research questions that we wanted to address about our site. These questions were used as guidance for our studies and helped us hone in on student frustrations with our current designs of the CWW. Our research questions were:

  • Can users successfully find the information they need using the CWW?

  • Can students efficiently find information?

  • Does the Centralized Wellness Website cause frustration for students?

  • Does the CWW cause confusion for users when finding resources?

Next, I crafted 3 tasks from our users flows for students to complete during each study. Those tasks were:

  1. To find in-person counseling

  2. Find help during crisis

  3. Find a recreational class

 

 

What it did for us

  • Helped us setup each study quickly and efficiently

  • Provided a consistent script for the facilitator to read from

  • Setup post task/study and interview questions

  • Kept the study free of mistakes and mishaps

Usability Study

The usability study was used to identify any usability problems in the interactive prototype of the CWW before we moved onto high fidelity mock-ups. This task was very important to our process because it gave us qualitative information that about our designs that helped improve our final designs. This study focused heavily on how students were able to move through the site, rather than visuals, or content (such as specific text or information).

We used our prior survey participants to recruit students interested in helping us test our designs. We offered a $5 Starbucks gift card to each participant who attended the testing. Each test was conducted with three team members: one facilitator and two note takers. After receiving consent from the participant, each session was recorded using UXCloud, a usability testing tool that facilitates screen sharing, video and audio recording, and note taking. Each test was ran according to the usability testing kit to ensure consistent facilitation across each test.

 

What went well

We received feedback from our participants that made us confident in several aspects of our wireframe designs. A few positive comments from participants included that:

  • Organizing the content into three categories (mental, physical, recreation) is helpful

  • Once the crisis pop-up tab was made visible, it was a valuable resource

  • The CWW website layout was intuitive
    Returning to the homepage was easy and similar to other UW websites
    Dropdown menu was familiar and easy to use

As we moved forward with editing our wireframes and developing high fidelity mock=ups of the site, the positive user feedback validated our design choices.

What we learned

Scheduling a Counseling Session is Unclear

The first task we asked users to complete was to “Find and pick counseling that they could get access to quickly”. After clicking into the counseling page, the participants were unsure which counseling option would work best for their situation because the time-to-access a counselor was not readily available.

The fix

We created a quick info section for each counseling service on the counseling page and added a “Steps to Access” section inside each service.

 

“Physical” is Confusing

During the second task, to find help during crisis, 2 participants tried to click through the “Physical Health” link. This link was originally meant to be used to find resources such as Hall Health, doctors visits, and general bodily health information. When asked why participants chose this action instead of something else, they stated that they thought the wording of a threat to their personal safety referred to a physical threat to themselves and linked their thought with the word “physical.” This was not the intention of our naming this major category and should be iterated on to prevent future confusion.

The fix

We renamed the three main categories to Mind, Body, and Play and gave each one an icon to help with context.

Crisis Button Needs Improvement

Our second task asked users to find help during a personal crisis scenario. This was easily the most-failed task during our testing. During observation of testing, participants were unable to find the crisis button due to positioning and imagery of the icon. Participants ended up either not being able to progress without help or quitting after searching our site for a couple minutes in frustration.


The fix

We moved the crisis button into a main category icon space just below the image link on the homepage. The button would then transition to the lower right of their screen and remain there even while scrolling up or down. This allowed for better accessibility.

 

Presentation 

High fidelity mock-ups
Capstone Open House

Reflection

Our final product for this project was the high fidelity mock-ups of the CWW. These mock-ups were showcased in a sponsor meeting to much praise and then in the HCDE Capstone Open House poster presentation. During these 2 events, we were able to present all of our work and receive feedback from the public on the project.

 

Hi-fi Mockups

Our usability study led us to our final deliverable: high-fidelity mockups. We made all the necessary changes found from testing and got work adding in context, imagery, icons, and text into our wireframes. These mockups were meant to be exemplars of what the CWW should look and feel like. We developed four main pages and one special site component, the crisis pop-up, for future designers and developers to use as templates for constructing the site. These pages were:

  1. Home

  2. Mind

  3. Counseling

  4. Short-term Counseling

  5. Crisis Pop-up

Home: The main landing page and face of the website

Mind: The page that hosts the counseling, mindfulness, and mental health education

Short-term counseling: An information page that gives the complete details on a specific resource

Counseling: A results page that provides students with resource options.

Crisis pop-up: A pop-up designed for students who need immediate help in a crisis situation

Presentation

We presented our final project to our sponsor at UW Student Life. They were thoroughly excited about the amount of work accomplished over the course of the 10 week capstone project. They told us that they look forward to pushing this project towards development as soon as possible.
We also participated in a poster presentation at the HCDE open house event on May 29th 2018. At this event we were able to showcase our work through a poster, a short promo video, and our high fidelity mockups.


Reflection

The Centralized Wellness Website was a success. It competently consolidated 6 health and wellness units’ websites into one easily accessible website and was met with high praise. Our sponsors told us that our project wasn’t just helping students, but it was also leading the conversation at UW on how health and wellness should be represented on campus. We also received a plethora of thank you and well wishes from members of the SWBC at the open house for our hard work and we received letters of appreciation from the Vice President of Student Life, Ellen B Taylor. To share a bit of the letter, she wrote:

“As students are able to engage with the site to connect to a mental health therapist, find a yoga class, or know where to turn in crisis, please keep in mind the positive, lasting impact the Centralized Wellness Website will have for our campus community. Thank you for helping make that a reality.”

As a UX designer, I strive to create things that will have a meaningful affect on those I design for. At the end of this project, I can’t help but smile knowing that our project was impactful, and that it will carry meaning well into the future. My team members and I did great work during a very short and stressful timeline. This project could have easily been scoped for 6 months to a year but was accomplished in less than 10 weeks. UW Student Life will begin website development for the CWW as early as this summer (2018). Thank you.