Senior UX/UI Designer
helpbc.jpg

BC HELP - Mobile app design

title+screen.jpg

Project Overview

  • Role: UX Researcher and Designer

  • Duration: 3 months

  • Company: Boston College


Approach

  1. Inspiration

  2. Discovery: Research, Interviews

  3. Ideation: Persona Development, Extremes, Strategy Development

  4. Design: Rapid Prototyping, User Journey, Wireframes, High Fidelity Screens


1.INspiration

 

Mental Health as a wellness is such a large concept. I spent my four years at Boston College surrounded by peers who struggled with and attempted to achieve mental wellness. One of them is my best friend who I have lived with for three years.

I’ve heard from her and seen first-hand the struggles she went through as she maneuvered through confusion, denial, acceptance, and eventually healing with her struggles with dealing with stress anxiety. It’s not uncommon to hear about Boston College students dealing with depression, anxiety, and other issues, and yet it is clear to me that there is a need being unmet. I realized it could be a number of things: the generalized stigma that still surrounds the topic, the lack of resources at the University Counseling Services (UCS), lack of knowledge on both the students’ and staffs’ part, or maybe combinations of them, but whatever it is, from my experience, observation and interviews, it is clear that there is a barrier that can make it extremely hard for students to seek help. 

Brain-writing

After my inspiration to address the problem of how to best help students in immediate mental distress lead to idea brainstorming. Through “brain-writing”, we had a list of ideas that could help meet the needs of BC students.

 
 
Note Jun 2, 2020.png
 
 

We briefly considered a rewind room— a physical space with space for mediation, arts and craft, various distractions and comforts, with a panic button. However, later from my interviews we learned that while such a room might help with wellness and stress management in general, a person experiencing significant mental distress will be unlikely to leave their room/current location to go into a public space. 

We wanted to design an app, because

(1) the ability for a digital platform to consumed in a more widespread manner

(2) the ease of transporting information or the service on a phone

(3) its relatively low cost to the university.

 

2.Discovery

Competitive research

 

1.YOU at College

YOU at College is a portal with tools, content and resources for students. It is specifically tailored for the institute that purchase this platform for its students’ use. One thing I found really cool was their “Reality Check” surveys. It provides the students who take these surveys with well-being evaluations on their daily lives and habits. And then it directs them to relevant resources on campus or articles to help improve those aspects of their lives.  

 
 
YOU at College, an existing digital platform

YOU at College, an existing digital platform

 
 

YOU at College is not marketed as a “mental health” tool. Instead, it discusses mental health as just one part of well-being and academic success. The upside is that students might not visit the platform thinking they have a mental health issue, but through addressing other issues, such as physical health or sleeping problems, learn that all areas of wellness are intertwined, which means it can potentially draw in more users. However, one thing that it neglects is solution or help in the cases of immediate crisis. 

 
 

2. notOK

An app that does have a solution for cases of immediate crisis is called notOK. It is a suicide prevention app that features a digital panic button that can be activated to let close friends, families and support network know when help is needed. The user can add up to five trusted contact, so when they hit the button, a message reading “Hey, I’m not OK! Please call, text, or come find me” along with their current GPS location is sent to their contacts.

 
 
notOK, an app with a digital panic button

notOK, an app with a digital panic button

 

Interviews

 

One of the biggest challenges we faced was interviews and learning how to ask the right questions.

Asking about their mental health and potential mental struggles is a very sensitive topic that is so unique to the individual experience. We was asking about some of their hardest times at Boston College, so we created a guideline to stick to during the interviews.

“ While [University Counseling Services] is a really good resource, it's not going to help you if you can’t help yourself.”

- P, class of 2019

From the interviews, two interesting focus points emerged:

  1. The struggle of seeking out help especially in the cases when one needed to advocate for themselves.

    • contacting UCS, BCPD, and/or peers while in personal crisis

  2. The difficulty in finding different resources on campus.

    • Information is spread across the Boston College website. Lack of comprehensive list of resources available for students.

 

3. Ideation

 

Persona Development

Based on the user interview and research, we developed two personas - one to represent an average student looking for an easy way to find resources, and one to represent a student in a crisis.

 
 
Olivia.jpg
 
 
Mike.png
 

4. Design

 

Feature Prioritization

Now that we identified the concerns and pain points of the two personas, we listed various features that could address them. We group these features in level of importance in order to produce the minimum viable product.

 
 
Note Jun 2, 2020 (1).png
 
 

Journey mapping

We started designing the user flows based on the two personas. We developed one flow to access information and the second flow to seek help easily while on campus.

 
 
IMG_0368.jpg
 
 
 

Wireframes

With the two user flows in place, we designed user journey for two separate processes of the application. We had to integrate the “Olivia flow” and the “Mike flow” into one seamless experience using medium-fidelity wireframes.

 
 
signup & login.png
 
 
User Journey 2.jpg
 
 
 

Style Guide

BC Help was designed for Boston College students needing help. Taking this into consideration, we wanted the color scheme to be calming, straightforward yet vibrant. I wanted the primary action color to be a cool color that would pop against the dark background.

 
 
style guide.png
 

High-fidelity wireframe & prototype

 

High - Fidelity Wireframe

Created using Figma, Photoshop, and Illustrator. Below are some key screens.

wireframescreen.jpg
 
 
 

The Final Product

 
 
  1. Signup & Onboarding

  • Sign up with BC information

  • Short on-boarding tutorial ensures that the user becomes familiar with the UI

1.gif
 
 
 
 

2. Search for BC resources and make appointments

  • browse through a comprehensive list of BC resources on campus

  • Search for a specific resource using filters such as “academics”, “student life”, and “housing”

  • Self book appointments through the app by filling out simple information and selecting available date and time

  • receive confirmation email for the appointment

2.gif
 
 
 
 

3. During a psychological emergency, quickly alert personal network and seek help from BC response team.

  • Easily toggle switch to alert three of BC’s emergency response team: BCPD, Health services and emergency psychologist

  • pre-set information such as the crisis message and personal network contact makes for a seamless experience during a crisis

  • Track BC emergency response for ease of mind

3.gif
 

Next Steps:

  1. Emphasize that this app (or any other app) cannot replace traditional therapy and assessments and treatment of mental health concerns has to be done by medical professionals.

  2. Market to other Universities.

  3. Chat feature with trained professional from University Counseling Services.