ooops!
it looks like i'm still working on this page

UofT Destress

Helping UofT students to alleviate academic stress by offering customized de-stressing suggestions and connecting them to existing resources in the university community.

project type

UX research & design, Product design

duration

8 weeks

role in team

Visual design, User research, Prototype, Data analysis

tools

Illustrator, Figma, Procreate, iMovie, After Effects

the story

BACKGROUND

In recent years, the University of Toronto made the headlines of many news articles for its inadequate resources to effectively deal with the volume of students seeking mental health help. In a report published by the university’s Innovation Hub, it outlined the factors that contribute to UofT students’ high level of academic stress: a campus culture of promoting individual excellence, the lack of belongingness due to a large commuter population, and the difficulty in navigating appropriate resources.

Why did it pique my interest?

At the beginning of my journey at UofT, my roommate was a second-year engineering student. From her daily schedule of studying 10+ hours and dramatic mood swings based on grades, I sensed a concerning academic stress level. Other UofT alumni I talked to further confirmed my assumption, when asked about their undergraduate experiences, dreadful memories of “not making the cut-off” for certain majors and the fears of being put on “academic probation” was mentioned by many. 
 
My own experience of overcoming struggles to maintain a healthy mental state in highly competitive environments made me compelled to tackle this subject. The project is carried out with the hope of changing students’ perspectives on academic stress and improving their access to appropriate support.

THE CHALLENGE

How can we help students better deal with academic stress in a highly competitive institution like the University of Toronto?

DESIGN GOALS

  • Help students understand academic stress is a part of the learning process
  • Make better use of the existing stress relief services on campus
  • Build a community for students to share experience and foster belongingness

discover

Identifying the problem

To understand better about the student’s perception of academic stress, how they deal with it, and their awareness of the support system offered on campus, we looked into existing reports on the topic , also conducted 9 semi-structured interviews and 20 online surveys.
Here are some thought-provoking quotes we gathered during the process:

Based on our primary and secondary research, we summarized three themes our design will address moving forward.

The academic pressure of a prestigious institution
Large population and high ratio of commuters create isolation
Difficulty in accessing help resources

U of T has a history of promoting individual excellence, students often fail to recognize challenge as a part of the process but rather question themselves about belonging to the distinguished community.

Lacking opportunities for close interaction, collegial relationships that don’t extend beyond school, large commuter population with limited time spent on campus, all contribute to the profound lonely experiences at U of T.

The tendency to internalize stress and feeling daunted by the process of accessing the mental health resources available on campus make students reluctant in reaching out for appropriate help.

Building Persona

As empathy is the key to creating a user-centric design, we built a proto-persona which will help us in making design decisions throughout the process.

Susan Persa is a 19 year old Engineering student at UofT. She studies very hard and is under pressure to meet her parents high expectations as well as her own. As a commuter student from Mississauga, she often feels disconnected from the university community. She barely talks to people from her class and finds it difficult in accessing the resources on campus.

ideate

big ideas

After listing out the pain points and needs of our persona in a detailed user journey, we started brainstorming for possible solutions. We then combined the big ideas into 5 main groups.

Prioritization & Features

After an internal voting process based on the ideas’ impact and feasibility, we decided to prioritize the following three features in our app.

VIRTUAL LISTENER
INSIGHTS & SOLUTIONS
BUILD A COMMUNITY

A chatbot which allows students to vent about academic stress without explaining background information.

Offers students customized de-stressing advice or directions on seeking appropriate professional help.

Connects students who struggle with academic stress to a welcoming community where they can share experience.

prototype

User Flow

Based on the prioritized featured, we established the user flow and sketched out initial screens to test internally.

clickable Prototype

After we reached agreement on the low-fidelity wireframes, I then created a clickable prototype using Figma.

getting feedback

After generating the clickable prototype in Figma, usability tests were conducted with 5 representative users. Each participant was given 5 tasks to complete and followed up with a casual interview collecting their overall thoughts of the application.

tasks
user #1
user #2
user #3
user #4
user #5
Sign in with utor id
get through on-boarding
"wish there was a next button at each step"
vent to chatbot
"wish the font size was bigger"
find a meditation spot
had trouble with the phrase "quite space"
"how do I get back from meditation?"
schedule an appointment
did not understand the "connect" button
"I'd like more information on the counselor"
high-Fi Prototype

A few internal guerrilla tests were performed as I created the high-fidelity prototype to ensure the issues found in prior usability tests were fixed. The below image demonstrates the process of consolidating issues in the clickable prototype and how the high-fi screens were evolved from the previous stage.

Scenario 1: Get-on-board

It’s the midterm season at UofT again, Susan walks into a huge class with a heavy heart. She thinks to herself: How is it possible that it’s halfway through the semester and I still don’t know anyone in this class?”

During the break, she overhears students talking about a new app called UofT Destress. Out of curiosity, she decides to give it a try.

Scenario 2: Check out events

After Susan sets up her profile in the app, she started browsing the homepage. “I didn’t even know UofT offered all these events to help students with academic stress!” She then decides to register for an upcoming mediation event.

Scenario 3: A study break

As Susan plans out her revision schedule in the library, she’s overwhelmed by the amount of material she has to cover within the limited time. She feels like she couldn’t breathe.

Her phone vibrates gently. It’s the app asking her if she needed a break. She takes the advice and finds a quiet spot nearby to meditate. After a few minutes, Susan is no longer overwhelmed by the stress and is able to refocus on her study.

Scenario 4: Venting about stress

After a long day of studying, Susan jumps on a bus to commute back home. She feels compelled to be verbal about her feelings. She wants to call her mother but she didn’t want her to be more concerned. She thought about her best friend, but she fears that he wouldn’t relate as they are in completely different majors now.

Susan then opens the chatbot app and started ranting about her day. By the time she got off the bus, she felt that some weight has lifted off her chest.

Scenario 5: Seeking help

Sometime after the midterm exams, Susan receives a notification that her grades are up from her midterm. It’s only a B-. She felt frustrated as this failed her expectations. She turns to UofT Destress for advice. After asking for more details about her problems, the app selects a professional counsellor for her. After scheduling an appointment, Susan also receives tips on relieving stress in the meantime.

evaluate

In order to further validate the design, obtain wider audience feedback and determine if the app adds value to existing UofT mental health services, I conducted another round of usability testing on 5 representative students. This summative evaluation consisted of three parts:  an online usability test to validate the improved user flow and spot any remaining problems in interface design, an System Usability Scale (SUS) questionnaire to quantify usability level, and a follow-up interview to gather qualitative, in-depth insights from users.

The same tasks were given to users as in the previous section for easy comparison of results. The table below is a summarizes the improvement in success rates.

usability test
tasks
mid-fi success rate
high-fi success rate
improvement rate
Sign in with utor id
5/5
5/5
0%
get through on-boarding
4/5
5/5
25%
vent to chatbot
4/5
5/5
25%
find a meditation spot
3/5
4/5
33%
schedule an appointment
3/5
5/5
67%
System usability scale

The System Usability Scale (SUS) provides a quick and reliable way of measuring usability. It consists of 10 Likert scale questions to obtain users overall impression on the usability of the system. SUS has proven to be a dependable method of evaluating usability and comparison to industry standards. The original SUS questionnaire for this study can be accessed here.

The SUS score of 73.2 was an evident indicator of potential users' approval of the app. At the same time, the score also suggested there is still much room for improvement.

qualitative feedback

In the last section of the evaluation process, a semi-structured interview was used as a way for me to acquire information that could not be reflected in the previous two sections. Below are some thought-provoking quotes:

I could see myself using this app. It’s really important to have something that’s available 24-hours. I never seem to have a breakdown during the mental health services’ drop-in hours, but it’s studying alone late at night when things get really bad.

I love the idea of the chatbot. I’m an international student and my English isn’t that good. I’m much more capable of conveying my thoughts when typing.

This is awesome for someone like me who gets anxious talking on the phone, especially about my mental health conditions.

I don’t like using the campus mental health service because the last time I called to book an appointment I was put on hold for more than 30 minutes. I think your app would really help with this!

The participants also provided useful suggestions for the app to move forward:

I wish there was also an incognito mode so we can seek help anonymously.

I think the app should focus on the “listening” part, that’s what sets it apart from other services right now.

Think of ways to validate the student’s experience while venting.

Consider adding some lecture videos so people can educate themselves about academic stress.

I think in order for users to trust the app, it needs to do more diagnoses before providing solutions.

I wish the interaction with chatbot was more natural. Maybe work on simulating human conversations.

reflect

test often

Rather than conducting complex usability testings at the end, it is more effective to validate assumptions at each design stage, and improve on the design repeatedly using the test results as guidance

an iterative process

Through this project I have learned the importance of constantly seeking for user input and iterating multiple rounds over initial design. Comparing the initial sketches with the end result, it's evident how much progress this project has made over multiple rounds of revision.

Know your users

To really get to know the target audience of this project, I actively engaged in experiencing the life of an undergrad student at UofT including taking the same courses and following the same daily schedule.

the story

Identifying the problem

Freelance designers struggle to keep track of their projects  and getting paid on time.

As a freelancer, it’s not only about remembering the deadlines, you also have to figure out the logistics yourself. B expressed that the current project managing platforms are targeted at corporate groups rather than individual freelancers, they fail to offer her enough flexibility. Most of the time she just uses an Excel chart instead.
Freelancers spend way too much time in the back and forth communications with the client. Often times, it’s because freelancers don't have the proper tools for communication. An email template, an invoice template, an expense recorder, a time tracker, these small things owned by corporate systems actually make a big difference.
According to research by the Freelancers Union, over 70% of freelancers have trouble getting paid at some point in their careers. It’s time to tell the clients freelancing does not mean our work is free.

the solution

  • Creating a fully customizable managing tool
  • Offering contract, invoice drafting assistance tools
  • Introducing third-platform payment

strategize

Design strategy

Full Flexibility
Communication Toolkit
Communication Toolkit

Allows freelancers to fully customize to their own needs.

Offer templates for emails, proposals, invoices to standardize communication and show professionalism.

Introducing 3rd party payment to resolve payment delay and trust issues

information architecture

design

home page
dashboard

Your daily briefing of the work ahead.

project list

Help you stay on top of all your projects.

single project overview

Dive into the details for a particular project.

Fully customizable
Allow users to customize at every step. Add whatever column needed to the chart just like Excel and arrange the dashboard like your own whiteboard.
Tools for Effortless communication
Templates for emails, proposals, invoices, these small things owned by corporate systems would make a huge difference.
A new Way of Payment
Referencing the great success of 3rd party online payment platforms such as Alipay and Stripe, the Pixel Punctual adopts this business model to ensure freelancers get the payment they deserve on time.

Reflect

User Experience Design is always an iterative process

Throught this project I have learned the importance of actively seeking for user input and iterating multiple rounds over initial design. Below are images of the first low-fi sketches, they document how much progress this project has made over multiple rounds of revision.

RESEARCH

Identifying the problem

One of the most important goals for Special Olympics Ontario is providing people who want to participate in the organization with guidelines advice, and help. Athletes, volunteers, staff, coaches, educators, community members, all depend on the SOO website as a reliable source for providing information and resources. Therefore, it is critical for the SOO website to communicate information to different user groups in a timely, efficient and concise manner.

Stakeholder Interview Findings

The program director of SOO James Norhona, helped us understand some of the organizational needs for redesign.

  • Staff members often receive phone calls from users who have trouble finding information
  • The old information portal is structured similar to a physical binder system and thus do not have a streamline hierarchy
  • Files within the old site do not contain searchable text

Content & Context Analysis Findings

  • organization: inconsistency items in two sets of secondary navigation system
  • navigability: irreversible contextual links and the absence of breadcrumb trials
  • search system: misleading search bar, extensive non-searchable files
  • labelling: mismatch between labels and content, counter-intuitive label names content: broken links and outdated information
  • general content: various broken links and outdated information

Usability Tests & Interviews

We performed user interviews and usability tests on 6 candidates who embodied the representative users of the website. The semi-structured research method allowed us  to go beyond the technical difficulties and understand the users’ emotions such as their frustration with the current website navigation.

Usability Tasks

The tasks were designed with specific scenarios for the candidates’ better understanding of the context.

You’re a volunteer for floor hockey, and you want to know floor hockey rules better. Where would you find information on floor hockey? Furthermore, you want to know about the time in between each game period (intermission period).

You’re a new staff working for the SOO. On your first day, you receive a call from someone who’s looking for partnership opportunities. You are directing  him/ her to find the contact person info to discuss about possible partnerships on the website.

You’re a new staff working for the SOO. On your first day, you receive a call from someone who’s looking for partnership opportunities. You are directing  him/her to find the contact person ino to discuss about possible partnerships on the website.

You are a parent looking for guidance with regards to locating a volleyball registration form for your child. You are unable to find this document and you are looking to submit an online form to contact a staff member to help you.

Findings

The tasks were designed with specific scenarios for the candidates’ better understanding of the context.

  • Overview: only 1 out of 6 participants successfully completed all tasks.
  • navigability: irreversible contextual links and the absence of breadcrumb trials
  • search system: misleading search bar, extensive non-searchable files
  • labelling: mismatch between labels and content, counter-intuitive label names content: broken links and outdated information
  • general content: various broken links and outdated information

design

Design Strategy

Based on our findings from the research stage, we decided on the following strategies to guide the design process:

DECLUTTER
restructure
RELABELING

Discard broken links, overlap information, outdated content, minimize user cognitive load.

Re-organize information architecture based on user analysis.

Re-name labels so they are intuitive, consistent and targeted at the intended audience.

Card Sort

Before beginning our card sorting study, we created a hierarchy of the current information architecture to better understand the organization structure as it stands. As several of the existing categories were well received in our previous user testing, and for ease of result interpretation, we decided to conduct a hybrid card sorting study.

Prior to the actual card sorting activity, we decided to use one of the participant recruitments provided by the SOO to conduct a preliminary pilot testing session for our card sort. To elaborate, we performed a remote testing session to identify major pain points so to adjust our card sorting template accordingly.

We then conducted 6 in-person card sort tests through the online platform optimum sort. Below shows the popularity matrix for this study. It provides strong rationale for our information architecture re-organization.

information architecture

After analyzing the card sort results, we came up with a information architecture scheme  of the website's which embodies user preferences and aligns with our design goals.

DELIVER

Design Suggestions Overview
1. Resources main page
2. sports & games page
4. support page
5. contact us page
Graphic Guidelines

The Special Olympics Ontario belongs to a much larger organization of the Special Olympics which already has established visual identity guidelines. This project followed the visual guidelines for better future integration into actual website.

Reflect

  • Strong sense of accomplishment when the proposal is greatly appreciated by the partner.
  • Users expressed by participating in the studies it evoked their interests in using the website.
  • Getting to know a special group of people who we wouldn’t have known otherwise. People of different roles all share the same goal of helping people with intellectual disabilities strive for better lives.