SelfCare: UX/UI Design, Mobile

A simple, incentivized, and cost-effective app that helps busy college students track and develop healthy mental health habits based on the amount of time they can devote.

My Role

UX Research

UI Design

Interaction Design

Team

Danji Lui

(UI Design, Front-end)

Tools

Adobe XD

User interview

Timeline

UC Berkeley FEMHacks, February 2020

(Awarded 2nd Place Hack & $600 grant)

“Self-care is any action you take with the intention of preserving or improving your current mental state or your mental health overall.”

— Hillside, Inc.

The problem.

College students are often “too busy” to take care of their mental, emotional, and physical well-being, and they don’t know what self-care looks like. Students are well-known for experiencing incredibly high stress levels, and national data from the Healthy Minds Study points towards increasing concerns regarding student mental health in recent years. Additionally, due to the high correspondence between mental and physical health, a conscious focus on one’s well being through self care is essential at this time period in a person’s life.

 Specifically, students at UC Berkeley are well-known for experiencing incredibly high stress levels. Due to a large student body capitalizing on few opportunities, students often report multiple mental health issues, including imposter syndrome and depression.

This challenge begs the question:

How can we provide students with an easy, incentivized, way to keep track of all their self care activities and complete them with the least possible amount of stress involved?

User Research


Based on fifteen interviews and data from UC Berkeley undergraduates, graduate students, and mental health counselors at the Tang Center (UC Berkeley’s official health-care provider).


coffee.jpg

Students think they’re “too busy”

The first question we asked students was when the last time was that they performed an activity solely gained to improve their mental or physical health. Quite a few students responded that they couldn’t remember, and when asked why they didn’t practice self-care, most of them said they were too busy. It was already challenging enough to complete their schoolwork and manage their extracurriculars without having to worry about self care.

 
BalletDoodle.png

Students don’t know what self care looks like.

Another set of questions we asked students was based on what they thought were activities that would help them take care of themselves and reduce stress. In this set, many students displayed that they didn’t know a lot about what kinds of activities would improve their mental well being. Seven of them stated, when asked how long a self-care activity should be, that a self-care activity should take more than 30 minutes because it requires “space” and “the right mentality. However, once we gave students examples of activities like “sleep early” or “drink a glass of water,” each student was able to suggest more similar activities, coming to realize that small, simple things can have a huge impact on building their happiness and mental strength.

MessyDoodle.png

College counseling centers are “lumped”

When we spoke to a counselor at UC Berkeley’s Tang Center, we learned that it usually takes about four weeks to schedule an in-person session with a student seeking mental health care. The wait is painfully long because there is a demand that exceeds the capabilities of the services.

This problem has been addressed by Chancellor Christ, who pointed out similar issues with Berkeley’s mental health services despite conscious efforts to prioritize students with more severe concerns. She commented that the best solution was to take precautionary measures to reconfigure the competitive culture at Berkeley by students taking action to develop a healthier mindset.

Interviews & Personas

“I want to practice self-care but I feel like I don’t really have a lot of time to do that. And when I feel like I do have free time, I’d much rather do something easy like watching YouTube instead of spending time thinking about what to do to improve myself.”

“I’ve tried so many things to combat the stressful culture at this school, but no matter how hard I try I keep getting sucked in. I want to succeed, and when I see other people who are doing well not sleeping until 3 am, then I think that’s what I should be doing too.

“I don’t really know what I would do to practice self-care. I feel like I think about it a lot and want to do it, but I can never think of anything good to do, so I just end up watching Netflix.”

Design Process

“The good thing is that self-care doesn’t have to be complicated. Minor changes accumulate into major developments in the long-run”

— UC Davis Wellness Services

Our Solution

Provide students with an easy, incentivized way to suggest and track self care activities. We realized that it was difficult for busy students to keep diligent and detailed track of their mental, emotional, and physical healthy in a consistent manner, so we propose the following method:

 

Keep track of health areas together

For those who don’t see the connection between their mental, physical, and emotional health. The number of hearts you have represents your “health” for the week based on the combined number of mental, emotional, and physical care activities you have completed.

Provide a clear list of possible self-care activities

For those who are unsure of what self care looks like or spend too much time deciding what to do. The activities suggested by the app will be separated based on how much time the student has on a particular occasion. The students will be able to capitalize on their fragmented free time.

Designing a User Flow.

Feature Design

Mid Fidelity mockups, using Adobe XD

With a clear idea of who I was designing for, I was now ready to design a clear and meaningful solution.

selfcaremidfidelityfeaturedesign.jpg
selfcarehome.jpg

Feature: Time Bubbles

Almost every student expressed that they felt they didn’t have enough time for self-care and/or that self-care took too much time to fit into their busy schedules. Our solution to this was to provide users with easy access to self-care activities specifically designed for short time intervals, so that the user can find self-care practices from whatever amount of free time they have to spare on any given day.

selfcarehome2.jpg

Feature: Health Point System

Many users expressed that they wanted to be able to track their self-care progress, and we thought that adding a point system to the app would be beneficial.

The number of hearts that are filled on the home screen represents the user’s “health” for the week based on the combined number of mental, emotional, and physical care activities they have completed.

The number of hearts a user receives per activity depends on the time the activity takes (e.g. 5-10 minute activities are rewarded with half a point, or heart, while 15-45 minute activities are rewarded with a full heart).

5minselfcare.jpg

Feature: Creative Self-Care Activities

A few of the users expressed the cost associated with many self-care products and activities that are marketed to them. Since the goal was to design for college students, who often don’t have the resources to spend money on self-care, we made sure that each activity selected can be completed at no cost.

The team consulted multiple resources and brainstormed 30+ self care ideas to challenge the existing campus work-culture, disrupt normative practice, and allow space for reflection.

Sample activities include writing a friend a letter, sharing feelings with someone who listens, and go to a class at the gym.

The user is also able to add their own self-care activities.

selfcareactivitypage.jpg

Feature: Post-Activity Reflection

Clicking on the activity allows the user to enter information about the specific instance of the activity, similar to a journal entry. This way they are not only completing an activity, but consciously reflecting on how it made them feel and whether they found it helpful.

Feature: Record of Previous Activities

Clicking on the activity also gives the user the option to view the days they have previously completed this activity, as another more extensive way of measuring their progress over time. Selecting the date allows them to view their reflection on the activity on that day so they can look back and see how completing the activity has made them feel on various occasions.

Implementation

Mid Fidelity, using Swift UI and XCode

*Due to the constraint of time, we didn’t get to implement the health points system but we plan to develop the feature in the future.

Design Changes

As we talked to the advisors and fellow participants at the hackathon, we received the feedback that our design seemed a bit too homogenous in the sense that there wasn’t much distinction via design between different types of activities, or different activities based on their activity pages. Based on this feedback, we decided to make some changes as we made our high-fidelity prototype on the Swift UI. Our initial idea was to keep things minimalistic because users expressed that many health care apps seemed very complex and time-consuming, so we thought of a few ways to add some personalization while still keeping things simple.

  • Color distinctions: assign different colors to activities of different time-lengths

  • “More activities!” button: After users finish a task, we decided to encourage them to go back to the home page and do more self-care activities to emphasize that the journey doesn’t end after one activity.

  • Customization: Allow the users the add their own self-care practices for each timeframe that we may not have covered.

  • Illustrations: Simple yet visually appealing illustrations to make the individual activity pages more personalized.

Impact

based on responses from industry professionals and students

Our design for the SelfCare mobile app was favored by 6 industry professionals and won second place at UC Berkeley FEMHacks 2020, with a $600 grant.

Other students, along with professionals, mentioned they loved our choice of colors and simplicity, and that the design was user-friendly and encouraged the user to stay on the app. They loved the unique time-considerate aspect of the application and thought that it would be critical to helping students manage their time better.

Discussion

Some further considerations to improve & implement this project:

  • Implement the health-points system. 

  • Make the app feel more personal; perhaps add an onboarding sequence to accomplish this.

  • Connect the app with social media so users can share their health-points and recent self-care activities to raise awareness and increase incentives.

  • Design a statistics/calendar page to keep track of users’ activity history. The app will compile weekly self-care reports to update users on their progress.

Previous
Previous

Daybook

Next
Next

COVIDCare