LiveWhale
De-stigmatizing mental health resources for students
Fall 2018
Timeframe: 24 hours
Group Members: Andrew Goodridge, Wyatt Michel, Akash Shah
Deliverables: High-Fidelity Mockup, Prototype
Fluxathon 2018
For some context, this app was created for Fluxathon 2018, a 24-hour hackathon-esque UX competition hosted by SCAD’s UX club. Groups of two to three people were chosen and assigned the task of creating a mobile app/service according to a prompt which was revealed as soon as the competition started. These groups would assemble 24 hours later to present to the other groups as well as a panel of judges. The prompt this year was connecting a community, specifically addressing one of three different statistics associated with the prompt. My two teammates and I decided to answer a statistic on social anxiety:
“According to Harvard Health Department, 12% of Americans will suffer from social anxiety disorder in their lifetime. Social anxiety disorder causes an irrational fear of unfamiliar people and situations, resulting in social isolation.”
Ideation
From the beginning our brainstorming, the idea for this app was shared among my group members. All three of us have been affected by mental illnesses and poor mental health resources, both on a personal level and within our communities. Creating a solution to this problem went beyond the prompt we were given.
Although we were aware that there are similar apps which try to solve the same problems we were trying to solve, we came to the conclusion that the way we would implement our features would be unique and innovative in relation to similar apps. We decided to focus on a few specific issues regarding mental health resources in colleges and universities:
We created three different components to directly combat each issue:
Support Rooms: a group of chat rooms with topics relating to specific mental health problems which can be discussed. Example topics can vary from depression to time management to relationships. Each Support Room is moderated by a mental health counselor for better security and student support. These counselors will lead the discussion in the Support Rooms.
Local Events and Sessions: a campus map which shows local mental/physical health-related events in your area happening now and in the future. Events and sessions range from group therapy sessions to social events. Signing up for these events is a seamless and easy process, not requiring having to contact anyone or fill in any forms
One-on-One Counseling: a step-by-step questionnaire made so applicants are not overwhelmed or confused during the process of collecting information. Matches users with a specialist/college counselor and quickly sets up appointments with them.
Process
To begin our process, we brainstormed and researched many ideas on the identity of the app. We eventually decided on the name “LiveWhale”, not only as a play on words from “live well”, but also to incorporate the “whale”, which would be our app’s logo and a part of it’s identity. We picked a light indigo, proven to convey patience and wellness, to use across the app, along with many other key brand decisions which were made during this part of the process.
We then started collaborating on a sitemap which would guide users through the app and its components. Our scope initially was very macro, not spending too much time diving into each component.
After we had the general layout of the app, we split up and each took one of the three components, diving into our assigned component at a low-fidelity scale. I was tasked with the “Support Rooms” section of the app. I had initially thought of this component during the early stages of the app so I had many ideas for this section that I was ready to test out and implement. One of my first ideas was to list the support rooms in a block grid, as opposed to a standard bulleted list. Originally I was going to make a series of illustrations for each support room to go with their specific topic, however due to a lack of time I had to keep the illustrations very abstract and simple. I came across many similar conflicts during this part of the process, having simplify my elaborate ideas for the greater good of the entire app.
a selection of lo-fi wireframes/sitemaps each of us made
After we each finished our wireframes, we regrouped and critiqued each of our components, later revising certain parts of our components. We then made some universal design decisions before creating a high-fidelity mock-up of the app.
During this portion of the process, I was assigned the task of creating a live demo of our app. I combined all 20 high-fidelity screenshots of the app and gave each transition a specific animation, making sure it wasn’t too distracting while simultaneously enhancing the experience for the user.
Demo:
Heres a live demo of the prototype which we presented as our final submission:
Demo Link