top of page

Healthy Huskies

A mobile application to help University of Washington students navigate the COVID-19 pandemic

Screenshot 2021-03-23 231659.png

The Project

Duration

Teams Size

My Role

Tools

Targeted User Group

9 Weeks

3 Members

Entire project design including research, designing and testing

Miro, Paper and Pencil, Figma

University of Washington Students

About

Healthy Huskies is a mobile application created to help college students navigate through the COVID-19 pandemic without fear. Created by UW students for UW students, Healthy Huskies has features that help students perform contact tracing, track their symptoms, schedule tests, and even stay up-to-date on all kinds of news about the virus.

The Problem

Students at the University of Washington have very busy lives, where they are expected to balance multiple classes and extracurriculars while making sure they are staying healthy and safe during the COVID-19 pandemic. Our team decided to design an app for University of Washington students that addressed all of their needs in regards to getting through the COVID-19 pandemic. The university currently has a Husky Coronavirus Testing Program that helps students get tested for COVID-19 but it has limited functionality. Our team saw an opportunity and created Healthy Huskies where students can schedule COVID tests and while having access to other COVID-19 resources they might need all in one place.

Our Process
Research

Utilizing human-centered research methods to gather data from our users.

​

This section is comprised of:

  • Competitive Analyses

  • User Interviews

  • Personas

  • User Journey Map

Define

Using design techniques to brainstorm possible solutions for our users.

​

This section is comprised of:

  • Design Requirements

  • Storyboards

Ideate and Prototype

Taking the information from the previous steps and creating possible solutions

​

This section is comprised of:

  • Interface Design Sketches

  • Lo-Fi Interactive Prototype

  • Information Architecture

  • Annotated Wireframes

Test and Develop

Creating low fidelity and high fidelity mock-ups of our proposed solution.

​

This section is comprised of:​

  • Usability Testing

  • Evaluation Findings

  • High-Fidelity Prototype

Reflect

Creating  high fidelity mock-ups as well as reflecting on the process

​

This section is comprised of:​​

  • Reflection

Research

​

In order to take a user-centered approach, our team conducted a series of interviews with potential users to get a better sense of what students do on a daily basis, identify any frustrations and desires, and to gauge their experiences with available COVID-19 related programs. Each member of our group conducted semi-structured interviews with UW students from different backgrounds in order to gain an understanding of how our team can support students during the pandemic.

​

The Script:

​

  1. How old are you?

  2. Where are you living?

  3. How many hours daily would you say you are on your:

  4. Phone?

  5. Computer/Laptop?

  6. In terms of health, are you high-risk or immunocompromised?

  7. How often do you travel out of your place of residence?

  8. Are they quick trips? (Ex. Grocery store)

  9. Are they long trips? (Ex. Going home for the weekend)

  10. Are you a part of the husky coronavirus testing?

  11. How long have you been a part of the program?

  12. Do you use the program on your phone or computer or both?

  13. What do you think about the daily check-ins?

  14. Are the questions relevant?

  15. What do you think should be asked?

  16. How often do you get tested?

  17. How easily are you able to schedule a covid test?

  18. What do you think about the process of getting your results?

  19. Do you know where to get information if you or someone you know tests positive for covid?

  20. How up to date are you with covid related news like spikes in your area?

  21. Would you get the vaccine right when it is available?

  22. Would you know how to get the vaccine if it came available?

  23. Do you think it would be helpful to have a vaccine waitlist?

  24. Do you often look up when a vaccine will be available for you?

​

Our Takeaways

​

  • Many users found the process of scheduling a COVID test to be very lengthy and inaccessible

  • Not many students are up-to-date on COVID-19 related news

  • Students get overwhelmed with the flood of emails and information they receive about the virus

User Interviews

Competitive Analysis

To begin our research, each member of our team performed competitive analyses on other COVID-19 related products on the market. To get a sense of what similar apps were out there, we conducted research on three different products: Husky Coronavirus Testing, The National Health Service COVID-19 App, and Stay Safe Philippines.

​

Screenshot 2021-03-13 175840.png
nhs covid19.jfif
Screenshot 2021-03-24 221108.png
Our Takeaways
​

  • It is difficult to schedule a test when a user has no symptoms and when tests are unavailable.

  • The process to access one's results is complicated and inefficient, as many applications redirect users to an external website and enter a code.

  • Location tracking is effective in helping users perform contact tracing

Personas

After our research, our group started synthesizing our findings in order to create a persona representation of our users. Utilizing Miro, our group started affinity diagramming our research in order to find common themes and insights that we could use as evidence within our personas. Visually mapping the pain points, needs, desires, and other key findings from our research helped our group establish a more in-depth understanding of our target users. While there were many similarities amongst the needs of our users, we found that many of the students whom we had interviewed had variations in their goals and characteristics. Our targeted audience was University of Washington students, but through our research, we were able to identify two particular student groups and how their priorities shape how they stay healthy and informed during the pandemic. Our team created personas based on these two discrete archetypes, one being the "working student" and the other being the "surviving student."

Screenshot 2021-03-24 224059.png

After these two variations of our user group were established, our group began crafting the personas. First, we created a provisional "paper" persona. As students working in a virtual setting, we sketched out drafts of our personas online using Miro. We then adapted these provisional personas into a more polished version using Figma.

Alex.png
Jesse.png

User Journey Map

The user journey map represents our persona, Jesse, going through a typical day balancing school and work in addition to scheduling and receiving a COVID-19 test. We documented touchpoints and different emotional responses Jesse would experience based on our user research. The user journey map helped us identify where strong emotional responses are to keep in mind for our design requirements.

User_Journey_Map_Revised.png
Define

After gathering quantitative research about our users, we started working on potential design solutions for a COVID-19 App. Now that we had a better understanding of our users and project, we started creating designs. This section contains the several methods we used to help guide our designs, including design requirements, storyboards, and an information architecture diagram.

Design Requirements

Based on the information that we gained from our user research, competitive analysis, personas, and user journey map we created the design requirements for our Healthy Huskies app.

  1. Instruct students on how to navigate pandemic.

  2. Record and alert students of any interactions with people or places with COVID-19 exposure.

  3. Manually enter the addresses of places they had visited previously to stay updated on possible virus spread.

  4. Inform students of state guidelines or breaking news regarding the virus.

  5. Provide students with their COVID-19 vaccine and testing information.

  6. Allow students to input possible COVID-19 symptoms in order to gauge whether they may need to get tested.

Storyboards

Each team member created two storyboards based on our design requirements to visually convey user experiences. The storyboards allowed us to contextualize why and how a user would use our app visualizing them navigating it, their emotional responses, and their thoughts while going through each step. Our storyboards generated different user scenarios and helped identify key path scenarios that we needed to include in our app.

Ideate and Prototype

After the design process, our team went into the ideating and prototyping process for Healthy Huskies. We first started with interface design sketches that helped us create our first low-fidelity prototype. We then used this low-fidelity prototype for usability testing to get user feedback and start to sketch out any improvements and details that we could redesign. By creating annotated wireframes, our group also identified key features of each wireframe to help evolve our designs into a High-Fidelity Prototype.

Interface Design Sketches

Low-Fidelity Prototype

We created our low-fidelity prototype in Figma. This prototype helped us work through each component of our app and understand what features were most relevant to our users. We focused on the five main features from our design requirements and implemented the key pathways that we generated from the storyboards into a more clear visual form. The low-fidelity prototype helped us visualize the layout and general flow of the app while allowing for more detailed implementations to be added in future iterations.

Information Architecture Maping

We created an Information Architecture Diagram in Miro to map out the different pathways that we explored in our storyboards and implemented in our low-fidelity prototype. This helped us figure out the connections between each feature and understand the user flows of our app. By creating an Information Architecture Diagram, we were also able to go back to our low-fidelity prototype to focus and fix unclear paths that users had found confusing.

Information_Architecture.jpg
Our Takeaways
​

  • The static navigation bar and use of a back button make navigation through the app quick and efficient

  • Recurring components such as the calendar or overlays should have similar UI styles

  • Users don't know to horizontally scroll on the Interactions page if they are not prompted to

Annotated Wireframes

Our Takeaways
​

  • Annotating the wireframes helped our team realize what symbols and buttons should be further emphasized to our users

  • Annotating the wireframes made us reflect on our designs and the intentions within our implementations

In order to give an overview of the purpose and functionality of Healthy Huskies, our team created annotated wireframes for each page of our app. These wireframes explain each function of the app step by step by annotating the key features of the app. Ultimately, this allowed us to understand any flaws of the application and what needed to change before creating the finished product.

Usability Testing

Using our low-fidelity prototypes we worked with 3 potential users to perform usability testing. We first planned out the tasks we wanted our users to perform and drafted post-task questions in order to receive valuable feedback. We reminded our users that we wanted them to finish these 3 tasks and voice any feedback or questions they have during the entire process.

​

The three tasks that we asked users to complete were:

  1. Input daily symptoms

  2. Schedule a COVID-19 test

  3. Find a COVID-19 news update article

​

Our Takeaways
​

  • Many users found it confusing to navigate through the application

    • Certain overlays lacked "close" buttons where users would find themselves stuck on a certain screen while finishing a task

    • User flows were a bit confusing, users didn't know whether to input their symptoms under "Daily Check-In" or "Symptoms"

  • System Feedback and Consistency

    • Healthy Huskies relies on information to be constantly updated, but without system feedback, many users did not know that information was recorded when the app did not say so

    • The app did not reflect changes in information states. For example, when the Daily Check-In was finished, the Home Page still stated that the user has not performed the Check-In yet

  • Daily Check-In, Test, and News

    • When asking users what feature(s) they would most likely use if they had accessed the app for a few minutes a day, many users stated that the Daily Check-In, Test, and News would be most utilized

    • The Daily Check-In was stated to be very quick and easy to navigate through, and was not bothersome compared to other Symptom Tracking applications they have used

​

Ultimately, while there was confusion about user flows and certain details within our low fidelity prototype that needed improvement, it is apparent that these features can be fixed with intentional design decisions. Our Team will take all of the feedback from our usability tests in mind, both positive and negative feedback, and utilize this to help best inform our future design decisions when creating our high fidelity prototype.

Test and Develop

High-Fidelity Prototype

This high-fidelity prototype was the final step of the process. It is the accumulation of all the work that we have explored this quarter. During this step we used the feedback we gained from the user evaluations to make changes from our low-fidelity prototype and add more depth to our key pathway features.

​

Also during this step we finalized the visual designs of our app. This is key to a high-fidelity as this is how the app would be perceived when available to the public. The branding and colors are based on our targeted user group, University of Washington students. The design is simplistic with playful touches while also realizing that this is a very serious topic that should not be taken lightly.

Our Takeaways
​

  • Our team used a "purple and gold" color scheme, mimicking the school colors of UW

  • We ensured that recurring components such as buttons, overlays, and the calendar were consistent through the app in order to make users feel familiar with key features

Reflect

Reflection

Overall, this 9-week process has been very rewarding. Our team came in with some experience in design, but it was our first time going through the entire user-centered design process. From start to finish, our team met virtually every week for multiple hours to work on deliverables for this project. Without the combined efforts of everyone on the team, Healthy Huskies would not have come to fruition. Through this process, we developed a deeper understanding of what it means to empathize with users, especially as students ourselves. In addition, we have been able to practice our skills as designers through extensive research, ideation, and prototyping while understanding what it means to be a successful team. Communication is a key factor in our team's success and each of us came into this project with shared goals that we hoped to accomplish together. When our teams were formed, we created a list of group norms to establish in order to cultivate a healthy working environment. Each of us came from different design backgrounds; however, we found that through working together, we were all able to practice and learn new design skills. Ultimately, our group meshed very well together and this experience served as a way for us each to connect with one another while taking on new skills in user-centered design.

​

We came into this project with little to no experience with the user-centered design process but have learned a lot from this project and the mistakes we made along the way. In each step, we furthered our understanding of the design process and if we did this project again, there would be a few things that we would change.

​

Here are our biggest takeaways from the past 9 weeks:
​

  1. When conducting user interviews, we learned that it can be difficult to leave any bias out of our questions. Each member of the team had used the Husky Coronavirus Testing Program before and we each had our own opinions of it. We really had to focus on avoiding questions that pushed our users to say something that we wanted them to say and tried to make our questions as neutral as possible in order to receive truthful and unbiased user feedback.

  2. The user interviews also showed us how to write questions that would help us in designing the project. After conducting our user interviews, it was easy to see what questions were helpful and what questions were irrelevant. When we do this process again, we will have a much better understanding of what kinds of questions to ask users to get feedback that will really make a difference in the design.

  3. While conducting usability testing, we found that ourselves feeling very rushed and believe that we could have received better feedback if we had more time. We did not have our low fidelity prototypes as functional as we would have liked before testing them with our users. If we had been able to test them more ourselves to make them fully functional, our users would have been able to give us better insights on how we could improve our design.

  4. Our whole team had little to no experience with Figma, and as a result, we found ourselves spending a lot of time figuring out how to work the program. Looking back, we could see all of the ways we could use these developed skills to spend less time making the elements and interactions of our prototypes. This would have allowed us to have more time for other portions of the project such as usability testing.

  5. Lastly, if we had more time for this project we would have done more usability testing, where we would have conducted usability testing with the "Wizard of Oz" approach. Our prototypes had limitations as our app relies heavily on information updates that are difficult or not possible to implement with Figma. The Wizard of Oz approach would allow us to display the correct information and pages while conducting usability testing and would allow us to gain more feedback on how to improve our design.

The Next Steps

Although we completed our project for the scope of the class, this app is not finished. In order for this app to be implemented we would need to complete several more steps.

  1. More usability testing would need to be performed. We did usability testing with several users for the app but we made changes as a result of these tests so we would need to test those changes with users again. 

  2. The app needs to be coded. We created this app in Figma so at its surface level the app is functional but we would need to code it with React or something similar to be able to put it out for UW students to use. 

bottom of page