top of page
Screenshot 2021-03-23 231659.webp

Healthy Huskies

Project Overview

Healthy Huskies is a mobile application created to help college students navigate through the COVID-19 pandemic without fear. Created by students for students, Healthy Huskies has features that help students perform contact tracing, track their symptoms, schedule tests, and even stay up-to-date on all news about the virus.sure to add any relevant details or information that you want to share with your visitors.

Project Details

Duration: Jan 2021 - Mar 2021 (10 weeks)
Service: HCDE 318 Group Project
Role: User Experience Designer
Team: Group of 3 Designers
Tools: Paper & Pencil, Miro, Figma, Procreate

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. Myteam 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. My 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.

The Solution

Healthy Huskies, an all-in-one app that eases the process of navigating the pandemic with resources for University of Washington students.

Schedule a Test

Track Symptoms

Interactions

Current News

Untitled (Banner (Landscape)) (1).png

UW Students can schedule a Covid-19 Test and keep track of their test results all in one place. Using the testing sites near UW campus, students can get tested at times that are most flexible with their schedule.

Users have the ability to recorded and track their Covid-19 symptoms to look back at in the future.

The app will automatically log the location data of where a user has visited. This gives a record where the user have visited, and alerts the user if they have previously been exposed to the virus.

The news section showcases relevant news based on the user's location. Allowing students to be informed about the pandemic and changes in state guidelines,

Research

User Interviews

Jesse.png
Alex.png

In order to take a user-centered approach, My 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 my group conducted semi-structured interviews with UW students from different backgrounds in order to gain an understanding of how my team can support students during the pandemic. After these interviews, my group started synthesizing our findings in order to create a persona representation of our users.

Competitive Analysis

Each member of my 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.

Key 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

User Journey

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

Design

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 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 the 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

My team members and I 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. The storyboards generated different user scenarios and helped identify key path scenarios that we needed to include in our app.

Untitled_Artwork (14).png

Information Architecture

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

Information_Architecture.jpg

Key Takeaways

  • Creating the Information Architecture Diagram helped us visualize the hierarchy of each function to help simplify the user experience of Healthy Huskies.

  • With multiple functions such as Test, Interactions, News, and more, it is important for us to utilize a navigation bar.

Prototype

​After the design process, my team went into the prototyping process for Healthy Huskies. We created a low-fidelity prototype to use for usability testing to sketch out any future improvements and details that we could redesign. By creating annotated wireframes, my group also identified key features of each wireframe to help evolve our designs into a High-Fidelity Prototype.

Low-Fidelity Prototype

My team created 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 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 further iterations.

Experience Evaluation Findings

Using low-fidelity prototypes my team 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

Key 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

Annotated Wireframes

In order to give an overview of the purpose and functionality of Healthy Huskies, my 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.

annotated.JPG

Takeaways

  • Annotating the wireframes helped my 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

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.

Reflection

Overall, this project was a very fun and rewarding experience as this was my first time going through the entire user-centered design process. Each of my team members came with different design experiences and backgrounds and brought a lot to the table. We were able to adapt to the online format due to the pandemic and learned the value of communication, from scheduling meetings to letting each other our capacities to complete tasks, creating a healthy work environment. One of my greatest strengths was helping create the visual identity of Healthy Huskies utilizing my skills in digital illustration to make the process of recording symptoms more enjoyable to our users.

 

In the end, not only did I come out of this project with had a high fidelity prototype, but a deeper understanding of the user-centered design process and better teamwork skills.  

bottom of page