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

Sonar has an amazing product, yet it struggles to get users

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:

✌️2 steps only with clear Call-to-action

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

💰 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!

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.

Getting some ideas 📝

What forms can the referral take?

I teamed up with the product lead to brainstorm how to make the referral feature more appealing to users. We’ve considered:

👾 🎮

In-app gamification

Completing referrals can unlock new/hidden features or points for the users.

📱 🎉

Instagram giveaways

Host a giveaway on social media and have one of the entry requirements as referring # of friends.

🎁 💰

Rewards & gifts

Tiered reward programs or monetized compensations for # of successful referrals.

📢 🙋🏻‍♀️

In-person promotions

Have referral QR codes, posters/flyers, or in-person booths on school campuses.

I decided to deprioritize social media giveaway and in-person promotions because Sonar's social media following was too small to make an impact, and schools were on summer break, leading to low foot traffic.

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:

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 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 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.

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.

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.

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!