A SaaS platform to facilitate the creation of connection and community among university students
Robyn Bautista | UX/UI Designer
Jonathan Su | Project Manager + Product Designer
Diana Carrasco | Public Health Specialist
Jose Luis Pacheco | Full-stack Developer
Lucy Liu | Undergraduate Student
”Branches” was created as a submission to Hack Mental Health 2019 at UCSF, the world’s largest mental health hackathon with over 500+ participants. A total of 63 different team submissions were made at the event.
We initially tackled the HopeLab Challenge: hacking a solution to address social isolation in young people. We further defined the problem as university students feeling socially isolated due to an absence of safe space & deep, personal connections.
Our team collectively explored the problem space and decided on an MVP. I was then responsible for designing the student user search flow of the product which included initial conceptualization and wireframes of a key feature alongside the design lead.
Our product connects students with organizations and mentors based on their value systems and interests to foster a deeper sense of safety and connection. We received a Judge’s Recognition Award (three recipients) and were one of nine finalists.
Defining the Problem
As a team, we took a few hours to brainstorm ideas around two design challenges presented at the hackathon: social isolation in adolescents or access to mental health. Ultimately, we decided on the theme of social isolation because of our personal interest and experience in the area as well as having a university student present on our team.
Our first challenge was to narrow down the scope and meaning of social isolation. We discovered the following interpretations:
What is Social Isolation?
Absence of safe space and deep, personal connections
A repeated action/behavior done with the purpose of removing oneself from social situations and friends
Over a period of time, isolating habits could easily lead to a socially isolated lifestyle. Due to the stress, social anxiety, and pressure that university can bring, social isolation is a common problem among students. However, in such a taxing environment, it is crucial for students to have a well built support system that they can trust and turn to in times of need.
The new question we asked ourselves was:
How can we help university students find safe spaces and create deep, personal connections?
Each team member brainstormed solutions to the problem based on personal anecdotes, and after refining our ideas, we decided on a platform providing students a means for creating deeper relationships with their peers with two key features:
1) Student organization matching based on interests and values
2) Option for mentorship by group members and leaders
We wanted to focus on bringing students together in person as well as providing them the resources to create connections.
By providing mentorship and matching students with organizations based on interests AND values, we would help students find spaces where they would have a sense of belonging and safety, fostering deeper connections with others. We hypothesized that this would lead to reduced social isolation.
Low-fi Mock-ups: Interest Search User Flow
I was tasked with creating the user flow for a student’s search and subsequent matching with organizations. Due to our limited timeframe, I completed this off-site from the hackathon and sent the wireframes to our design lead for further development and skinning of hi-fi screens later that night.
Best practices with inspiration from meetup.com, UCSF’s organization website, and Canva’s onboarding process. Designed with Sketch.
Design Challenges and Obstacles
Our product design lead designed the UI components and high-fidelity screens after breaking from day one of the hackathon. When we reconvened the next day, I was assigned the task of reconciling the interests screen with the values screen. There was a problem of too much overlap between the two, as well as potential user confusion due to lack of clarity and explanation.
Lack of values feature on the Interests Page - No focus on creating deeper connection
Too much overlap with the Values page - What happens when an interest and value are the same? (ex: choosing health as a value AND an interest)
Lack of context and instruction - Leading to potential user confusion
Increased cognitive load - Users having to “think” about which values to search for
I decided to combine the two pages and utilize the photos as a way for students to select their values. For example, once a student selects the “art” photo, the page would automatically populate some suggested values like “creativity”, “beauty”, or “innovation” as well as the interest of “art”.
Branches was a conceptual project, however, our next steps would be to flush out a full prototype and perform further testing with users. Due to the tight time constraints, we weren’t able to fully validate and test the product and relied on personal anecdotes, online research, and our university student team member’s experience. However, The hackathon was a challenging exercise in designer collaboration and design thinking techniques.
As a team, we enjoyed seeing passions and interests come together as participants bridged the gap between technology and mental health to solve problems. The weekend was full of meaningful conversation as we shared experiences and ideas (and came away with some new friends and colleagues!).
We encourage everyone to continue being a part of the discussion and solution of mental health issues.
Learn more about HackMentalHealth 2019 and the winning teams here: