top of page

Quarantine Companion

Keeping the users’ mental health in check during the pandemic by collecting data on various grounds such as their social activities, fitness goals, and skills developed during their leisure time.

Project Type: UX Project

Client: The City of Brantford
My Role: User Research, Prototype, UX Designer
Timeline: November 2020 to December 2020

Image by Noah Silliman
Image by Fabian Møller

Problem

As a class project, we chose to target the issue of mental and physical well being of individuals during the multiple lockdowns which were brought into effect due to COVID-19.

Our Design Process

DEFINE

While COVID-19 claimed many lives and put healthcare systems to test, it also became a cause for many mental health issues due to the imposed lockdowns. We aimed at providing mental peace to many survivors and people restricted to their houses. The two factors which affected people’s mental health was their physical as well as social well being. Therefore, our team decided to focus solely on these two areas.

EMPATHIZE

Our team shifted towards the user research phase to get to know more about our users. Our secondary research was conducted through articles present on multiple websites. We discovered that 28% of Americans have been living in isolation and had no in-person contact with people for months ever since the pandemic started. People had been experiencing depression and anxiety way more than pre-pandemic times. With gyms being closed due to the lockdown, they had been suffering from physical health too which had a huge impact on their mental health.
To visualize the pain points of our users, we created an empathy map. You can find the empathy map below.

Empathy Map.png

PERSONAS

Our second step was to conduct interviews with our target audience. We managed to gather data from 10 participants with diverse backgrounds. We established that most of our participants increased their use of online social platforms and experienced decreased in-person interactions. Participants stated that they used to go out only for groceries and spent most of their time at home during the pandemic. The majority of the participants were not consciously informed about their decreased daily activities.

Our team then developed the problem statement below.
“Wren, a full-time student and part-time pizza delivery driver, needs to focus on creating healthy routines in a very unstructured environment in order to successfully navigate the new pandemic landscape.”

Modern Office

Ideation and Iteration:

Sketching

Our team used Wren’s persona as a helping guide to list down the most important pages of the app. Here are some of the sketches our team developed.

Low-Fidelity

Wireframes

Once the rapid sketches were completed, they were used as the basis for our low-fidelity prototype/wireframes. The wireframes were designed in Figma with the intention of coming up with a basic layout for the application

Low-Fidelity Wireframe

Low Fidelity Testing: Wizard of OZ Testing

Three participants were chosen at random to conduct Wizard of Oz testing with. The testing was conducted through an online Wizard of Oz test. Upon presenting participants with the wireframes, they were asked to complete scenarios such as:

 

  • Input hours for ‘in-person communication’

  • Check the number of hours spent on exercising for the month of June

Members responsible for conducting these tests tried observing and noting down every pain point/hiccup in the user journey. Some key findings are as follows:

  • 2/3 the participants found ‘Input page’ as a dead end since the buttons on the page confused them.

  • Navigating around the input section was another confusing part about the wireframes.

To relieve the prototype from these pain points, changes were made into the medium-fidelity prototype. For instance, the input page was broken down into multiple pages for a better step-by-step process. Elements were labelled more appropriately, and more recognizable visual elements were used to make the design more intuitive.

Mid-Fidelity

Wireframes

Once the rapid sketches were completed, they were used as the basis for our low-fidelity prototype/wireframes. The wireframes were designed in Figma with the intention of coming up with a basic layout for the application

Mid Fidelity Testing : Think-Aloud Protocols

The next step was to conduct usability testing of our medium-fidelity prototype. We chose 5 participants and asked them to interact and complete tasks with the prototype. To gather valuable insights, we conducted the test as a think-aloud protocol. Some tasks which were given for completion were:

  • Checked how socially active the user was in the last week

  • Checked the calendar to find out how long the user took to facetime Abbey on December 5th.

Improved Mid-Fid 5.png

Mid-Fidelity Wireframe

Implementation

Our team pitched the idea to our classmates in late December 2020.

Iterated Mid-Fidelity Prototype

After having conducted multiple tests on the prototype at various stages of its design process, we fine-tuned it. The final iteration of the prototype is below.

bottom of page