The Bright Side

Scope: User Research, User Testing, UI/UX Design

Timeline: 7 Weeks

Tools: Figma, Adobe Illustrator

Project Overview

Developed for the 10-week Prototyping course in UC San Diego, The Bright Side is an application that provides a positive forum for uplifting news and a sense of community. During those 10 weeks, I worked in a team of five, taking the roles of the visual designer and user researcher.

The Challenge

Mental health has been entering the spotlight as a core issue for many individuals, especially with young adults. The COVID-19 quarantine has only exacerbated feelings of loneliness, stress, anxiety and more. With such uncertain, negative, and unprecedented times, young adults are struggling to find a platform or resource that provides actionable information to better themselves as well as finding a community to feel less overwhelmed.

Mission Statement

How might we provide a resource for students and recent graduates to improve their mood and outlook on the COVID-19 pandemic?

We will provide a resource for students and recent graduates to help regulate their mood by implementing a platform built for sharing positive news, coping mechanisms, and tips to better mood and health.

Needfinding

Secondary Research

We studied the benefits of exercise upon mental health and looked at various subreddits and facebook groups such as r/COVID_support, r/mentalhealth and Mental Health Support During Corona. A majority of people had a shift in mood during the pandemic (generally from good to bad), so there’s a rise in need of advice and support to help get through this difficult time.

Questionnaire

After doing secondary research online, we created a questionnaire about people’s mental and physical health during quarantine. Out of 35 people…

20 stated that quarantine was hurting their mental health
- 13 felt lack of social interaction was the cause
- 7 were affected by the idea that they’re unproductive while at home
15 stated that mental health and mood were their top priority during quarantine
30 stated a change in their daily routine
- 12 stated that quarantine was causing a sedentary lifestyle
- 10 stated that they felt less productive/unmotivated
- 9 felt a lack of social interaction and friendship

In-depth Interviews

Following the questionnaire, we conducted six in depth interviews. Here are some insightful quotes from 3 interviewees regarding shifts in mood/mental health as well as daily routines:

User Personas

After consolidating the information and data from our secondary research, questionnaire, and interviews, we created two personas.

Nicole Graham is a senior undergraduate student looking for a full-time position upon graduation. She majors in data science so she’s looking for a tech role; she had a summer internship lined up but was canceled due to COVID-19. Now she’s continuing her search, but it’s become very difficult because of lack of information on which companies are still actively hiring. Losing her previous internship led to disappointment and lack of motivation. She feels burnt out because of all the work she did before and now feels like she has to start back at square one. She also knows she should be productive with more time on her hands, but feels no sense of motivation due to the ongoing uncertainty of the pandemic.

Needs:
- Access to relevant information in terms of jobs/companies
- Something to help keep her on track
- External motivation because she lacks internal motivation
- Some sort of guidance/mentorship
- A better sense of time

Goals:
- Wants a full-time job or internship (leading into a full-time offer) after graduation
- Wants to be emotionally at peace during quarantine
- Wants to be more productive with her time during quarantine
- Wants to feel motivated to do work or better herself instead of being lethargic

Nick Jones used to have a very set routine with his life, he’d go to work, head to the gym, socialize a bit maybe grab a coffee with some friends, and then go home and play some video games. But after the coronavirus epidemic started he began to see how much it was affecting his life. He wasn’t going out anymore, stopped exercising, and is couped up at home. Nick begins to feel very depressed and disheartened by all of the news he sees, but feels the need to stay up to date with the situation. He feels panicked and anxious all the time and wonders when will this ever end?

Needs:
- A way to stay up to date with coronavirus news
- To feel more positive about the situation
- To know how he can help the situation
- An outlet or activity that instills positivity into his life

Goals:
- Wants to stay up to date with the situation but doesn’t want to feel disheartened
- Wants a distraction from negative news/info
- Wants to maintain some form of exercise
- Wants to return to some sort of status-quo/normalcy

Storyboarding

After conducting a second round of interviews where we asked participants about a collection of storyboards we made, we decided to base our project on the following storyboard:

During the quarantine, there have been reports about increases in anxiety and changes in mental health among young adults due to the changes in what is considered normal and the limited access to activities and resources that people consider to be their coping mechanism. Like Amy, we want to help people who are going through difficult situations related to their mental health by providing avenues to alleviate their condition in their homes.

Competitive Audit

From the 8 competitors that we found, our top 3 were: The Happy Arc, John Krasinski’s “Some Good News” YouTube channel, and goodnewsnetwork.org. The reason being was because each competitor focused on good/positive news, which was our biggest concern.

In addition to our “provides good news” criteria, 3 other important factors for us were: Interactivity, coping mechanisms of some sort, and family friendliness. We wanted our users to be able to interact with our app and others in various ways, look to our system as a resource to better mood/mental health, and feel a G-rated sense of community.

We feel that our app/proposed solution stands out because of our intent to fuse multiple assets of positivity, community, and coping into one app. With such negative and unprecedented times, we aim to provide a unique support system, with positive-only news regarding the ongoing pandemic, an interactive community for users to gain a sense of reassurance and hope, and a form of coping mechanism for individuals to track and reflect on their personal progress.

Wireframing

During the initial stages of designing and wireframing our mobile system, we wanted our platform to centralize around one core element: positivity. With that, we felt that the 3 main assets to best support this was through: news, community, and journaling.

First, with our “News” tab, we wanted our users to be able to click into top stories to view all previews of various positive news articles related to COVID-19. In addition, we wanted both our search function and Staying Positive section to take users to a collection of articles within specific mental wellness categories to better resource and support for our users.

Second, for our “Community” tab, we wanted to dedicate a positive quote banner to change on a daily basis to keep morale high. In addition, we wanted to mimic a sense of community for people to read, react, and reply to other people’s posts, while having the option to share stories of their own.

And lastly for our journal tab, we created a space where our users could track and reflect on their daily mood/journal entries that would only be accessible to them.

Wireframe User Testing

During user testing with the low fidelity prototypes, most people had little trouble performing the assigned tasks and said our app was easy to use. However, there was some confusion regarding the labeling of buttons and sections in the news and community tabs. Some users also requested for us to add features such as direct messaging and post bookmarking when asked how to improve the app. We took these ideas into consideration and added them to the high-fidelity prototype.

High-Fidelity Prototype

We created the following style-guide to base the high fidelity screens off of:

(I was in charge of designing and creating the logo on Adobe Illustrator.)

High-Fidelity Prototype User Testing

Following creating the high fidelity mock-up, we conducted another round of user testing to collect more feedback about our updates. From this feedback, we created a list of improvements to be made:

- News:
  - Labeling of buttons in news screen
  - Make it more like a “home screen”
- Community
  - Making DM from community feature more obvious
- Journal
  - Addition of tags to the Journals to be able to find previous entries
  - Simplifying a page due to confusion on how to get to analysis
  - Changing location of the “add entry” button

Previously, users would have to click on the profile name to DM someone from the Community tab, which didn’t have any obvious signifier, so we added a DMing icon next to the comment and heart buttons to make this more obvious.

Regarding the news, “Staying Positive” was originally the location for the user to find the “Categories” page, across testing many users had a hard time finding it. We recreated it to be geared more towards being a “homepage” for the user and make sure it clearly displays the categories.

For the journal, there was originally a simplified page for easy access to adding and finding your most recent posts, and you had to click on the calendar for a more detailed page. However, many users had problems with finding the “detailed page” so we decided to cut the simplified page and give users immediate access to the other, making it the default journal page.

Final Product

Iterating through our wireframes, low-fidelity prototypes, and user research testings, we created our final product: The Bright Side. “A positive forum for uplifting news and a sense of community.”

Focusing on positivity, our mobile application will provide a safe space for users to take a break from the overwhelming news platforms that evoke disheartened emotions and/or negatively impact mental health. Especially with shelter-in-place orders, our app will encourage support for those who feel they have none during these times.

Sign-Up:

Discover:

This is essentially the home page users are greeted with after logging in or signing up. We chose to focus on positive news as the front page because we felt it was most impactful and this was validated through user testing as well. The main focus is that it promotes positive news related to COVID19. We noticed that because of how depressing the world was, users needed an escape to see the bright side. Beyond articles we also included a visual for # of recoveries at a given location. We also wanted to allow users to filter through specific categories which was mainly just a quality of life thing.

Community:

While we do want to spread positive information regarding recovery statistics and ways for someone to improve their mental health, we know that there are other people who have personal stories that are uplifting and give hope that there is a light at the end of a tunnel. We dedicate the community tab as a space for those people to share their stories and support others there. Users can browse many posts and can interact with them by liking them, commenting on them, and messaging the owner of the post if they want to further the conversation.

Journal:

While we have a space to openly share your thoughts, we also provide a private journal for the user only. The overall Journal page allows for the user to easily track their moods by looking at the calendar, the tracker below, or through the entry list. We gave the user other functions such as photo attachments and drawing for added flexibility, as well as the option to tag their entries using their own hashtags. By using the tagging functionality, users can sort through their entries to find specific ones.

Profile:

By clicking on the profile icon on the top left corner of each screen, the user can access their profile menu. From this menu, the user can access their journal, messages, notifications, saved posts, and settings.