Sonar is a scalable AI-driven mental health platform for schools, offering 24/7 chat support to help students with their mental wellbeing. Users can talk to Sonny, an AI-powered wellbeing companion supervised by a human, for guidance and support anytime.

The challenge 🔍

Teens use Sonar in school, but no new users are joining

Sonar’s app engagement is strong, yet user acquisition is surprisingly low. To address this, I led the design process, working closely with product lead and engineers to solve the 2 key pain points driving the issue:

Users find it difficult to share their Sonar experience with others

Users lack motivation to share Sonar with others

The solution 🪄

Introducing “Invite a friend” feature: refer with fun & ease!

We made a huge impact! 🎉

The feature had just launched and successfully rolled out to all existing users!

While this is still in early phase, here’s the UX principles I followed to ensure its success:

Ease: 2 steps only with clear CTA

This will lead to higher conversion rate since users are more likely to take actions when the effort is small.

Fun: Instant rewards & progress tracker

This will increase referral success rate since users are more drawn to immediate benefits & more motivated when progress is shown

So how did I do it? Let’s start from the beginning!

User Research

Digging into the "why" behind users not sharing Sonar

I wanted to understand why current users were not sharing Sonar with others; thus, I partnered up with the user researcher to conduct user interviews with 10+ existing users.

64%

Of existing users did want to share Sonar with others, however, they found it difficult to do so.

85%

Of the rest of the users who didn’t want to share the app with others lack incentive to do so.

We came to the conclusion that…

Users are not sharing the app with others since 1. it’s difficult to do so 2. they lack motivation to share.

Who are we targeting?

We want to target existing users with mid-high engagement to acquire high-quality leads

Users who already had experiences chatting with Sonny and were actively engaged will more likely refer individuals who have similar needs as them, who fit our target user profile better.

Let's brainstorm!

So… what are some potential solutions?

I led a ideation workshop with the entire product team to gather new ideas and help the team align on the project goal. We landed on a few ideas at the end:

Deprioritized solutions:

Social media giveaways 📱

Social media is a popular way to gain Gen Z’s attention. However, Sonar has a weak social media following so it’s hard to build trust first.

In-person promotions 🙋🏻‍♀️

Since the school was in summer session and might not have many students in person, we decided to save this for later.

Prioritized solutions:

New referral feature 👀

This solution allows us to utilize our existing users to bring in their friends, helping us reach an audience that has a higher chance of having similar interests and needs as our current users.

Monetized rewards 🎁

We decided to use monetized rewards to motivate users to use the referral feature.

Scoping down…

How might we design a referral feature that encourages and helps users easily and quickly share Sonar to others?

Finding some inspo

How do other apps design referrals?

I sought inspiration from direct/indirect competitors and well-used apps to get a sense of how referral features are designed. I noted down some common trends that can be used in my design:

Design principles

Design with brand value in mind

Unlike other mental health apps, Sonar stands out with its relatable, not-so-serious approach to conversations with users. According to our UX research, students prefer casual, gen-z language when having a conversation with AI.

🙋🏻‍♀️ 👋

Friendly & welcoming

Sonny is like user’s best friend who is always there to listen.

✌️🤪

Casual & relatable

Chatting with Sonny should feel like chatting with peers, making users feel comfortable and engaged.

🙌 😌

Simple & Intuitive

Teens often have shorter attention spans; as a result, it should be simple for users to navigate and take actions.

As a result, I used Gen Z lingo and emojis to establish a friendly, casual tone in the UX writing.

Let’s visualize our ideas! 🎨

Visualizing where the feature lives and how it looks like through mid-fi design

After chatting with the developers, I decided to jump straight into mid-fi design. This helps them grasp the layout better and start coding sooner. I also focused on mobile designs first since our target users (young adults and teens) are more active on their phones.

Option A

Enter from homepage

Discoverable on both web and mobile

Take away focus from other content of the home page

Option B

Enter from side menu

Great for scalability; doesn’t fight with other content on the page

Not as discoverable on mobile

Entry point

It’s essential to make it easy for users to find the referral feature, so I explored different entry points on the app.

After discussing with the product lead, I decided to have the entry point located on the side menu for its scalability.

The checklist design will be implemented after MVP as a short-term way to promote the feature.

It’s essential to make it easy for users to find the referral feature, so I explored different entry points on the app.

After discussing with the product lead, I decided to have the entry point located on the side menu for its scalability.

The checklist design will be implemented after MVP as a short-term way to promote the feature.

It’s essential to make it easy for users to find the referral feature, so I explored different entry points on the app.

After discussing with the product lead, I decided to have the entry point located on the side menu for its scalability.

The checklist design will be implemented after MVP as a short-term way to promote the feature.

CTA buttons

I made sure users understood the benefits they received right away by mentioning them at the top.

I then iterated on the visual and content of the CTAs, settling on "Copy”, "Text link”, and "Email link" since these are the most common communication methods among young adults/teenagers.

From there, I explored different layouts that would take up less space.

We landed on text only buttons since it’s the easiest for developers to code and the most straight-forward for users to understand.

I made sure users understood the benefits they received right away by mentioning them at the top.

I then iterated on the visual and content of the CTAs, settling on "Copy”, "Text link”, and "Email link" since these are the most common communication methods among young adults/teenagers.

From there, I explored different layouts that would take up less space.

We landed on text only buttons since it’s the easiest for developers to code and the most straight-forward for users to understand.

Text only buttons

Text + icons buttons

Icons only buttons

With illustration

With badges

Visual elements

I wanted to explore gamification in the design to potentially achieve a refreshing, fun experience for the users.

I played around with the idea of giving users digital badges of Sonny (its persona is a dolphin) for every successful referral.

I also created another version with illustration for the purpose of A/B testing.

I wanted to explore gamification in the design to potentially achieve a refreshing, fun experience for the users.

I played around with the idea of giving users digital badges of Sonny (its persona is a dolphin) for every successful referral.

I also created another version with illustration for the purpose of A/B testing.

I wanted to explore gamification in the design to potentially achieve a refreshing, fun experience for the users.

I played around with the idea of giving users digital badges of Sonny (its persona is a dolphin) for every successful referral.

I also created another version with illustration for the purpose of A/B testing.

Aligning with developers

Understanding technical capabilities & making trade-offs

To refine the mid-fi designs, I met with developers several times to discuss technical details and speed up the MVP launch. We discussed on:

IOS sheet application

From my competitive analysis, I see many IOS native app having the slide up sheet to offer other actions of sending referral links. I discussed with the engineer team to realize that this is not implementable for our web app.

Badges implementation

The badges idea is fun, but is it hard to code? I learned from our developers that the badges design can be exported as images, making it easier to code and implement.

Progress bar display

It’s time-consuming to create the bar loading effect. As a result, I redesigned it to make it easier for developers to code, replacing the progress bar with numbers.

Test & iterate pt 1

Gathering user feedback on usability & visuals

After working with the developers on trade-offs, it’s time to get user feedback! We ran 10 user tests to fine-tune the design. Here are the highlights:

Test & iterate pt 2

A/B testing on the web design

After finalizing the mobile design, I created two web design options for cross-device accessibility and conducted A/B testing to select the best one.

Option A

Same design as mobile

Hard to find where to focus

A lot of empty space

Consistent with mobile design

Option B

Bento box design

Clear information hierarchy

Strong visual impact

8/10 users preferred option B due to the clean and easy-to-understand layout. With this result, I successfully convinced the product lead to use option B as the web design.

And here it is...the final design!

New feature unlocked 🔓 — refer your friends with fun and ease!

Let’s start the journey!

Users can access the referral feature from the side menu by clicking on “Invite a friend”.

Refer your friend 🙌

Users can copy or text their unique referral link to their friends.
Users get a pre-generated message that they can send right away to their friends.
The progress bar helps users track # of successful referrals and amount of money they’ve earned.

By making the referral process simple to use and rewarding, we are able to attract and acquire more new users.

Users can copy or text their unique referral link to their friends.
Users get a pre-generated message that they can send right away to their friends.
The progress bar helps users track # of successful referrals and amount of money they’ve earned.

By making the referral process simple to use and rewarding, we are able to attract and acquire more new users.

Users can copy or text their unique referral link to their friends.
Users get a pre-generated message that they can send right away to their friends.
The progress bar helps users track # of successful referrals and amount of money they’ve earned.

By making the referral process simple to use and rewarding, we are able to attract and acquire more new users.

Users can copy or text their unique referral link to their friends.
Users get a pre-generated message that they can send right away to their friends.
The progress bar helps users track # of successful referrals and amount of money they’ve earned.

By making the referral process simple to use and rewarding, we are able to attract and acquire more new users.

Congrats, popular! 🎊

After users send out 10 (max) successful referrals, they are congratulated and reminded of sending check-ins to their friends.

Through the check-ins, we are able to engage with the new users through our existing users.

After users send out 10 (max) successful referrals, they are congratulated and reminded of sending check-ins to their friends.

Through the check-ins, we are able to engage with the new users through our existing users.

After users send out 10 (max) successful referrals, they are congratulated and reminded of sending check-ins to their friends.

Through the check-ins, we are able to engage with the new users through our existing users.

After users send out 10 (max) successful referrals, they are congratulated and reminded of sending check-ins to their friends.

Through the check-ins, we are able to engage with the new users through our existing users.

Make it responsive

The design is made responsive for users who wish to access the referral feature from other devices.

And of course, making the design responsive is necessary to allow users to access this feature anywhere they want.

The design is made responsive for users who wish to access the referral feature from other devices.

And of course, making the design responsive is necessary to allow users to access this feature anywhere they want.

The design is made responsive for users who wish to access the referral feature from other devices.

And of course, making the design responsive is necessary to allow users to access this feature anywhere they want.

The design is made responsive for users who wish to access the referral feature from other devices.

And of course, making the design responsive is necessary to allow users to access this feature anywhere they want.

What to do next

The referral feature had successfully rolled out to all existing users!

Here are some next steps I wish to take:

1. Measure success through these metrics: total referral attempts, avg. time to first referrals, # of unique referrals, # of successful referrals, & referral conversion rate.

2. Conduct A/B testing on incentives and UX writings.

3. Explore more on the community-building aspect of the referral feature.

Reflecting on what I learned

Keeping a open communication with developers is so important 🙋🏻‍♀️

This was my first solo project at Sonar, and I quickly realized how crucial it is to communicate openly with our developers to make sure my designs are feasible. Working in 2-week sprints taught me to focus on the most important features for the MVP and refine from there. It also gave me a better sense of how much time and effort developers need for each design handoff!

Getting better at justifying my design decisions 🙌

There are many moments during my time working at Sonar that I was asked to justify my design decisions - why did you choose this layout? Why did you place the CTA here? These questions pushed me to delve deeper into my design decisions, carefully considering each iteration and researching UX principles and industry best practices. This process not only enhanced my understanding of design rationales but also sharpened my ability to articulate my decisions effectively, helping me grow significantly as a UI/UX designer.

Say hi through email or Linkedin! 🫶