Back

Revamping BeMe: Reducing Drop-off, Boosting Teen Engagement

BeMe is a mental health app for teenagers. It uses digital media, live support, and clinical care to boost their well-being, make them happier, and provide early help to prevent more serious issues.

Design Team

Director of Design

Rajaram Shetty

Sr Designer UX

Rahul R Pillai

Junior Designer

Palak Gupta

Duration

March - Jun 2023

My Role

As a senior UX designer, I worked with stakeholders, led brainstorming, shaped the product concept,
mentored junior designers, defined visual style, and created a design system.

Project Overview

The app faced a retention challenge, with users visiting but   not engaging long-term. While initial user acquisition was strong, the app struggled to maintain ongoing user engagement, leading to high churn rates.

Our Approach

Key touchpoints on the design roadmap

Evaluation

Ideation

Wireframing

VD & Design system

Evaluation & Insights

The client provided an 80-member user group based in the US. We conducted interviews with them to uncover their pain points and frustrations with the app.

We carried out a heuristic evaluation to identify usability issues within the app.

We also reviewed feedback from the Play Store and App Store to gain additional insights from user reviews.

We found a few insights based on the
research and separated them into two sections.

UX Shortcomings

Issues such as poor clarity, lack of feedback, and bad communication frustrated users.

Bugs in the app reduced user trust.
A messy layout made the app less effective in supporting mental health.

Impact on Users

The app doesn’t make users feel understood, causing concerns.
The app fails to become a trusted companion,   limiting its effectiveness as a mental health resource.
The app’s solutions don’t address users’ specific   problems, reducing perceived value.

Evaluation Samples

Onboarding

Failed to understand the user

This app fails to gather data from users, which would help provide the right set of offerings later on.

Not leading the user to
right solutions

It is because the app failed to gather
user inputs

Experience is not seamless.

The app interrupts user journeys and lacks clear instructions, making it difficult to move forward smoothly.

Evaluation Samples

Home

Unclear CTAs

The empty circles look like checkboxes, but tapping them opens another screen, confusing users about the expected action.

Lack of Feedback

Users expect immediate results after input, but the app moves them on without showing any response, leaving them unsure if their input was received.

Invisible Transformation

Changing content on the "Daily Reset" card after watching a video can make users feel lost and unsure if they completed their task.

Evaluation Samples

In effective Features and Tools

Irrelevant Quiz Tool

The app aims to distract users from depression with tools like quizzes, but instead, these tools often create extra pressure. This added stress can push users to leave the app, defeating its purpose.

Redefining the Philosophy

Drawing from the insights gathered during the evaluation stage, we developed eight core philosophies to design a better app that is more empathetic throughout the user journey and easier to use.

ENCOURAGE

Them to Talk

VALIDATE

Their feelings

REMIND

That they are not alone

SUGGEST

They reach out for help

LISTEN

With full attention

UNDERSTAND

Their perspective

RESPECT

Their privacy & autonomy

DISPEL

Fear of judgement

Redefining The App Structure

We conducted a two-week design sprint with stakeholders to refine the app's structure.
Key considerations included:

Adopting a more empathetic tone for the app's voice.
Designing relaxed user journeys with enhanced clarity.
Providing compassionate support throughout the experience.

Below is the finalized Information Architecture.

Turning Ideas into Reality

Once the Information Architecture was set, we spent four weeks building the wireframes, working closely with BeMe’s research team in the US to test each step along the way. Their feedback made a huge difference, helping us quickly refine and improve the product. With limited time and budget, we focused on creating a streamlined design that stayed true to user-centered principles.

Our main goal was to keep the app feeling engaging and conversational, making users feel truly understood. To do this, we designed a clean, simple interface and added micro-interactions and empathetic content that made the app feel like a caring companion throughout the user journey.

Personalised Onboarding and User Interest Capture Module

The previous version of the app faced several usability challenges in the onboarding process, such as a lack of user understanding, insufficient guidance toward relevant solutions, and a disconnected experience. To address these issues, we implemented targeted improvements

Enhanced User Engagement: We introduced an additional screen dedicated to capturing user interests, enabling the app to deliver personalized recommendations based on individual needs. This user-centered approach made users feel understood and directed them towards solutions that were most relevant to their mental well-being.

Seamless User Flow: To ensure a more cohesive user journey, we focused on creating a clear visual hierarchyand progressive disclosure, guiding users smoothly through each step of onboarding. These adjustments helped reduce cognitive load and made the process feel more intuitive and seamless.

From the onboarding screen, users have a clear understanding of the actions needed to get their “fix,” reducing cognitive load. We included guided tutorials to ensure a smooth learning curve and prevent any confusion. In the second screen, we integrated an illustrative element depicting a moody character, fostering a sense of empathy and making users feel understood. After selecting their mood, users are prompted to share the reason behind it, allowing the app’s AI-driven personalization to deliver a tailored solution based on their input.

Activity Tool

In the old app, some activities felt confusing and even stressful for users, which took away from the overall experience. To fix this, we developed new activities and improved the user experience of existing ones, making them more intuitive and engaging. One of the key activities we introduced aimed to help users let out their emotions in a safe and fun way.

In this activity, users start by selecting the "Flush the Toxicity" card. The app then automatically starts recording, allowing users to freely speak their thoughts and feelings. Once they finish, a "Flush It" button appears, giving them a moment to let go of what they’ve just shared. When the user presses this button, the camera opens to show an animated closet, where they can watch their frustrations being “flushed away” into a virtual toilet.

Setting up the Visual Style

To make sure the visual design appealed to teenagers, we worked with BeMe’s research team to better understand what they liked. We explored their preferences for colors, fonts, and overall style. Based on this feedback, we created a mood board that helped guide the design system, making sure it matched what teens wanted and the app’s friendly tone.

Finalizing the Visual Style

With the visual direction in place, I developed three different style options. Playful Mood, Wholesome Comfort and Calm Oasis. Each style brought a unique tone, shaped by our understanding of what teens prefer visually. Following feedback and discussions, we decided on Calm Oasis, which offered a calm, balanced feel that aligned perfectly with BeMe’s goal of creating a supportive space for teen mental health.

Building the Design System

With the Calm Oasis visual style finalized, I began building a design system to ensure consistency and efficiency throughout the app. From the start, I collaborated closely with the engineering team to understand their capabilities and technical constraints. This early partnership allowed us to design elements that were both visually appealing and feasible for development.

Typography: I chose Poppins, a free Google font that is clean, modern, and highly readable, making it an ideal choice for a teen-focused app.
Icons: I used line-style icons for their simplicity and clarity, ensuring a minimalist look that complements the overall design.
Illustrations: Due to the tight timeline, I sourced illustrations from Streamline. These friendly, minimalistic visuals aligned perfectly with the Calm Oasis style, helping to maintain a cohesive look without sacrificing quality.

This design system provided a solid foundation for creating a seamless user experience, balancing both design vision and technical execution.