Students developed a mobile app to support the mental health of university students. The project involved interviews, a prototype created with HTML, CSS, and Javascript, and extensive testing. The final app was presented at the CS 160 symposium at Berkeley, showcasing its potential impact on promoting mental well-being among students.

Catherine Zhao, Hridhay Suresh, Joymaneet Kaur, Karen Ting, Saiteja Kambhampati

July 2022 - Aug 2022 | 3 weeks

Product Design, User Research, Prototype & Testing

Figma, Google Docs, Pencil & Paper, HTML, CSS, Javascript

Many students at Berkeley actively engage in numerous activities alongside their demanding coursework, which requires a significant time commitment. Balancing participation in clubs, involvement in research programs, maintaining a social life, and excelling academically can sometimes take a toll on a student's mental health. Due to Berkeley's size, it may not always be able to promptly offer the necessary resources for every student when needed.

"My Check-in" is a centralized mobile app that provides essential mental health resources to all Berkeley students. The app allows students to connect with their peers, communicate with healthcare professionals, maintain a virtual journal to track their emotions and thoughts, and stay informed about mental health events on and around the campus.

Understanding the frustrations and aspirations of students regarding their mental health

Create a novel product that provides convenient access to mental health resources, encompassing unique features currently unavailable in any single platform

As our next course of action, we opted to analyze the various features our Mental Health app will incorporate, drawing insights from our own experiences and feedback from fellow Berkeley students. To achieve a clear and comprehensive outline of the concepts we wanted to explore, we employed an Hierarchical Task Analysis (HTA) tree. We focused on four main verticals: journaling, event planning and tracking, a status page, and a chat feature.

The observational interview involved two UC Berkeley students. The initial interviewee was a four-year Berkeley student who had previously engaged in therapy but had not availed themselves of UC Berkeley's mental health resources. The subsequent interview was conducted with a third-year UC Berkeley student who had briefly tried some professional services in the past and made efforts to connect with UC Berkeley's mental health services before.

Here are our key findings:

Expressed a preference for confiding in friends rather than seeking help from professionals

Emphasized their reliance on methods such as journaling, expressing their thoughts in writing, and engaging in self-reflection as effective ways to seek help

Crucial to encourage users to establish a consistent routine with journaling and self-reflection, as doing so can help them maintain awareness and mindfulness regarding their thoughts and decisions

Utilizing our findings, we updated our HTA tree.

To gain a deeper understanding of the end-users and to fully meet their needs, we developed a persona and a textual scenario that exemplifies how this app would be of great assistance.

FRUSTRATION

maintaining a healthy work-life balance and feels overwhelmed by an excessive workload

GOAL

shift her mindset and improve his current situation, seeking a more balanced and manageable approach to her academic and personal life

Drawing from the observational interviews, synthesis from the studies, and the revised HTA tree, we have identified several features that warrant exploration. Subsequently, we created sketches of the home page, essential features, and potential interactions between various screens.

Notable features highlighted in the sketches include:

Journaling: Users can maintain a journal using creative system-generated prompts.

Chat Feature: Users can connect with peers who share similar interests and backgrounds, or seek assistance from available healthcare professionals.

Events Page: A dedicated page to keep track of events happening in and around Berkeley and the campus, catering specifically to Berkeley students.

Relatable Conversations: Users can filter other users by their major, use emojis to track their emotions throughout a day or week, fostering relatable conversations.

Central Navigation: A bottom navigation button provides seamless access to all features.

As a next step, we refined the scope to focus on three crucial features: the events page, journal entries tracker, and the chat feature. Additionally, we envisioned a homepage and a personalized profile screen, where users can provide more information about themselves to receive tailored recommendations and connect with individuals who share similar interests. To visualize the flow and interactions between all the screens, we created a wireframe that illustrates the various possible connections between them.

After assessing our progress, we recognized the significance of replicating the wireframe, proposed interactions, and features as high-fidelity wireframes before commencing the actual coding process. This step played a crucial role in finalizing the design, as it allowed us to make informed decisions about the user interface and prevented the need for excessive code revisions later on. By creating high-fidelity wireframes, we ensured that the UI elements were well-defined and provided a clear visual representation of the app's layout and functionalities.

home page

past journals

daily prompt entry

new chat

recent chat

events page

profile page

Once our design was solidified, we proceeded to implement it by utilizing HTML, CSS, and Javascript to develop an interactive prototype. This prototype allowed us to bring our envisioned features to life and provided a tangible representation of the app's functionality and user experience.

navigation bar interactions

journal page

conversation page

events page (used an api)

Could easily navigate through the website and interpret the meanings of icons on buttons.

Uncertainty about certain interactions such as the "generate" button for generating prompts was not entirely clear in its purpose

Unsure about the meaning of each filter in the conversation page

Suggested improvement: Add small descriptive or more explicit phrases to clarify actions and ease confusion

Layout appeared self-explanatory, enabling users to easily find the buttons and input fields

Some expected features, like an archive of moods, were missing from the application and should be considered for inclusion

Upon completing our prototype, we had users engage with our interactive prototype. We sought their input on their initial reactions upon opening each page, their perceptions of certain buttons or interactions, and observed how they interacted with the app through various scenarios.

Here were our key findings:

Reflecting on the project, it was rewarding to see how conversations between users with similar backgrounds and interests provided valuable support. The feature allowing direct chats with healthcare professionals was well-received, offering a convenient alternative to the eTang appointment system. Encouraging regular journaling through system-generated prompts proved effective in helping users de-stress and express their thoughts.

Looking ahead, our next steps involve integrating Berkeley students into the platform with active journaling, events, and chat with peers features. This step will foster a community where like-minded individuals can connect. Building self-help groups based on majors, colleges, and activities is a promising way to establish a robust support network for students in need.

Conducting early user testing with Berkeley students is a strategic move, as their feedback will play a pivotal role in refining the app's features further. The time constraints during the coding phase affected the prototype's resemblance to the wireframes, but with more time, we would aim to improve its alignment with our original design vision, particularly addressing the appearance of the calendar portion that used API.

Throughout the project, I assumed multiple roles, spanning research, design, and development, which was an eye-opening experience. Witnessing the project from inception to completion provided valuable insights into the challenges and dedication required in each role. Personally, I found the project fulfilling, and it shed light on my preferences for future endeavors. Given the freedom to explore and innovate due to less restricted requirements for the final project, we were able to delve deeper into the design process, leading to a more meaningful outcome.