Overview
The purpose of the Husky Healing mobile app is to provide health and wellness support for UW students. Currently, with the changing states of the pandemic and school modality, students may be feeling disconnected, confused, or emotionally unstable. Husky Healing aims to address these concerns through COVID and mental health information resources, and student connection platforms. This project was completed in Winter 2022 in HCDE 318, an undergraduate course studying User-Centered Design.
Role
Team Leader
UX Design
UX Research
Team
Myself
Kaecy Choi
Joseph Zhang
Users
UW students struggling to cope with the pandemic
Time
Jan 2022 -
March 2022
Branches of the Application
Mental Health
This branch of the application contains wellness resources and exercises and a live connection with a UW mental health expert.
Dawg Pack
This branch of the application contains student group chats on topics ranging from academics to events and hobbies.
COVid-19
This branch of the application acts as as an information and guideline directory to nationwide and UW COVID-19 resources.
Process
Interviews
To start off our discovery process, each of us conducted interviews with three current UW undergraduate students. In my interview, I assessed 7 main areas: their identity, hardships in (1) online-pandemic school, (2) school in general, and (3) COVID-19, preferences with online classes, preferences with in-person classes, and self-care activities that they do.
During this process, I gained insight not only in the topics we hoped to address, but also in good user research practices---for example, not asking leading questions and not exploring a participant's problem with a solution already in mind.
Major patterns and pain points I identified in the interview include:
-
Difficulty learning with instructors and peers in online and hybrid environments
-
Difficulty forming connections with peers in online and hybrid environments
-
Difficulty coping with stress and anxiety in academics and in the pandemic
-
Confusion about UW COVID-19 policies
Personas
Personas are representations of types of users of our product. Personas are a way for us to draw conclusions of overall behavioral patterns, goals, and tasks of our users. They also help us develop empathy for our users. These personas, Brandon Jones and Kayla Kim, were created from data gathered in our three interviews.
Brandon Jones is a sophomore at UW who prefers online learning because he is worried about COVID, and also seeks to make connections while online.
Kayla Kim is a third-year student at UW who strongly prefers in-person learning because she has been struggling with the drawbacks of online (lack of connection, same tuition, difficulty learning). She needs a way to cope with her stress.
User Journey Map
A user journey map shows the progression of a persona through an experience, including touchpoints (interactions they have with a product or system).
Our user journey map focuses on interactions our persona (Kayla) has with her current circumstances, and her emotions at each touchpoint; therefore, personas are important to this step of the user-centered design process, giving us a better foothold to imagine user goals and tasks.
User journey maps help us see emotional highs and lows of her current experiences, which we can address in the user flow of the application.
When deciding on emotional highs and lows for Kayla, I proposed making her emotional high venting to her roommate after a stressful day, and her emotional low dealing with connections with peers in-person. I drew inspiration from all three of our interviewees, who described difficulties with peers in in-person settings, and that talking with supportive figures was really helpful.
Storyboards
Storyboards present a visual of how a user experience scenario might happen. Each team member developed two user experience scenarios and created storyboards for each. These storyboards allow us to consider possible user flows and interactions that may happen with our application.
These storyboards helped inform both specific details in the application (for example, a breathing meditation page, from my picture storyboard) and major pathways of the application (for example, a COVID-19 resources branch, from my sketched storyboard).
The two storyboard examples provided here were designed by me, and show users accessing COVID-19 information resources and mental health resources.
Low-Fidelity Interactive Prototype
In this phase of the process, we established the three branch structure of the application, covering mental health, student connection, and COVID-19 resources. Though the prototype was very bare bones, utilizing stock text, default typefaces, and greyscale, the branch structure was vital to our later development. I covered the COVID-19 branch, and as the resident Figma expert, supported my team members in the wireframes they designed.
Information Architecture
Though the prototype portions of this process were undoubtedly the most work-intensive areas, creating the application's information architecture was extremely complex. It was difficult envisioning all the different pages and connections that exist in our prototype.
I spearheaded discussion and decision-making for the information architecture, based on our low-fidelity prototype but with improved navigation and pages that we later incorporated into our high-fidelity prototype. I had to balance scope and detail versus feasibility for the project. Creating the information architecture was therefore incredibly vital to the final product, as it helped us solidify the three-branch structure of the application.
.png)
Interface Design Sketches
After creating the low-fidelity interactive prototypes, it was important to go back to design basics. I sketched out ideas of potential designs for the final interface, incorporating more graphic design artistry and UX design principles such as balance and whitespace. My interface design sketches contained a parti (focused sketch) and descriptions on interactions that the user can take.
The foremost example on the right shows an interface design sketch for a meditation page that I created. This page was later incorporated into the final high-fidelity prototype.
Double-click on a page to see more!
Experience Evaluation
Where were we successful? Where might we need more work? How can we improve our current prototype? We wanted to see how real users interact with our low-fidelity prototype. We created an experience evaluation plan of user flow tasks that 3 test participants ran through.
During my experience evaluation session, I measured how many mistakes (wrong clicks) the participant made, and afterwards I interviewed the participants on their experience of the low-fidelity application; things they found helpful and things they found difficulty or confusion with. I intentionally chose the same participant that I interviewed for user research at the beginning, so that I could also investigate how our prototype compared to their expectations as I believed they would have the best
The experience evaluation successfully helped us identify spots of confusion that we could improve upon. For example, my participant was confused about what the names of the three branches meant (they did not understand that "Dawg Pack" referred to chat), so we decided in our high-fidelity prototype to include informative icons for the main page, and I also made sure that word choice in general was more clear.
High-Fidelity Interactive Prototype
Our final product is here!
Creating this high-fidelity prototype entailed not only polishing and adding visual details (color, typography, icons) to our pages, but also adding new pages.
For the high-fidelity prototype, I led color and type hierarchy decisions, refined the home page and COVID-19 branch, and added app onboarding (Welcome, Log In, and Sign Up pages), and settings and info pages. Additionally, I oversaw consistency and alignment across screens, using gridlines and columns.
Check out the prototype below!
Outcomes and Results
Our final result was a high-fidelity prototype of Husky Healing.
Through user evaluation we confirmed that we achieved our goal of supporting UW students' health and wellness. Our application acted not only as an information resource but as a wellness guide for UW students struggling with connection and life in the pandemic.
I especially feel proud of the fact that the scope of Husky Healing broadly covers the major stressors of "the current situation." The three branches of the application worked together so effectively to encompass many issues that UW students may be experiencing currently, from traditional mental health concerns to social disconnect from remote schooling and confusion about COVID-19 news and policies.
Reflecting back on Husky Healing, I feel extremely grateful that I got to experience a complete user-centered design process, from research through prototyping to testing and evaluation. I'm also grateful that I had the opportunity to take on a leadership role in this project; it gave me valuable insight into team member management, project structure, and prioritization decision-making, especially towards the end as we worked on the high-fidelity prototype. An improvement I would like to do for my next team project is to establish reflection/check-in sessions with team members; the rapid speed of our prototyping made things feel rushed and at times inconclusive, so having meetings where we just discuss how we feel about the project would be helpful. Additionally, I feel like our high-fidelity prototype is still relatively bare-bones; I would have loved to have time and space for more visual artistry and creativity.