A social chat and audio app for mental health awareness

UX Researcher

UX Designer

UI Designer

Figma

Whimsical Wireframes

💡 Context

MendingTree is a platform that talks about mental health freely. Many young women are experiencing mental health issues and have no one to connect with. We provide a safe and secure environment connecting our users with people with the same experiences. By choosing MendingTree, we can live without mental health barriers.

My goal for this project is to provide a design of their initial MVP. I can also do low and high-ﬁdelity sketches, provide style guides, an interactive prototype, and design the MVP application of MendingTree.

💼 My role

I did the design role for this project by myself and with the developer team and project manager.

My roles include:

Research

UI Design

User testing

🔍 Research

I focus more on searching other competitors since this project's goal is unique and easy to navigate. After my discussion with the CEO of MendingTree, he said we want to focus on social media and something like the “Clubhouse” & “Twitter” style approach since, based on my research, most people want to open their issue in Twitter with a limited person.

I did some competitor analysis, but this idea is unique and different from other Mental health apps like Headspace, Calm, Talkspace, and others, which I focus more on how Clubhouse flows. But one thing I like from one app I saw is a reaction similar to Facebook features. “Care” became popular, but we focused on Emoji reactions at first since the development and creation of unique emoji need more validation for early MVP ideas.

One of the major concerns of the CEO is the privacy of users. They don’t want to reveal any sensitive information like first and last name

🫂 User’s Persona

I created two different user personas.

💭 User’s Journey

Here is the journey map of both user personas.

🤔 Problem

After having decent information from research, I had to focus on flow, like creating information architecture and wireframe, but here is the problem statement from the CEO of MendingTree.

There is too much stigma around mental health. Our goal is to reduce stigma bycreating an environment that democratizes the voice of our users.

But one of the biggest problems here is creating a Stories feeds with community or user group feeds.

⚡️ Approach

🔶 Information Architecture

✍🏻 Wireframe Sketch

Here are some old sketches from my field notes. This is an early idea, and some of the flow is already directed to Figma since this is more on MVP, and they don’t have the budget to take too long for the project.

As you can see, I have some notes from the developer & CEO because some flow-in sign-ups are already developed, which I need to adjust from information architecture.

Explaining the Home user group and Notification of what will be possible.

💖 Output

Splash, Welcome & Onboarding Screens

Login & Register Screens

Home - User group, Stories, Threads, and Comments with react screens

Share stories, Threads, comments, and favorites, react with emojis, share, and Notification screens

The Event, Tickets, and Account Settings screens

Create Group discussions or Small talks (Open & Close) screens

User group screens

User group - Small talk as Moderator

User group - Small talk as participants

User group - Group discussion as moderator and participants

Settings and sub-menu

✨ Lessons Learned

What can I do better?

This project was too much back and forth, and we are still unsure what the final features will be since the client is undecided about the priority. I need more time for wireframes.

Usability testing for main target users since I do more guerrilla testing, and we can’t validate the flow from one feature to another.

Improve the screens as much as possible since some screens are too complex for users.

MVP solution is a mobile application, but it looks like an all-in-one app.