Sabrina Couto UX/UI Designer

Project overview

The situation:

Currently, we have a referral program that gives a free bouquet to the customer that makes the referral and a free vase to the person that signs up for our service.

Our referral program is very important to us to get more clients as it's cheaper than other marketing methods and our customers want to share our product with their friends and family.

Regarding the design, we have a referrals pop-up in the login environment that includes the referral link and the referral methods.

This is the current user flow:

Current user flow

This is our current UI design:

Mobile UI Design

Desktop UI Design

The problem:

Currently, our customers only use the referral program within the first two deliveries, so the number of referrals is not too high and therefore, we don't have many new customers due to our referral program.

The goal:

Find out why our customers only use the referral program with the first two deliveries and solve the problem to get more referrals in other stages of the customer journey as well.

My Role:

UX researcher and UI designer.

The approach:

I am the UX/UI designer in the referral squad and I work with people from the growth, marketing and sales team.

For this particular project, we started making a UX research, I made the UX research plan and conducted that research.

We had a really tight deadline for the research, so I decided to make phone calls to customers that have used our referral program only in their first two deliveries and asked them some questions to figure out why they haven't used the referral program since then.

Besides, we also conducted a guerrilla usability test of our current referrals pop-up to understand possible flaws in the UI.

The findings:

We found out that our customers are very interested in sharing our service with their friends and family because they are very happy with us but they think the referral program is very difficult to use and unintuitive. Besides, most of them don't understand how it works and what they will get if they make the referral.

Besides, they will prefer to have a more natural way to share our product with their friends and family.

The result:

Taking into account the results of the research, we brainstorm some different ideas that could solve the problem, some of them were:

  • - Adding Instagram as a referral method because some customers suggested that they would like to share a photo with their referral.

  • Implement a referral code which is easier to remember and more natural to share than a referral link.

  • - Adding Facebook messenger as a referral method: currently we have WhatsApp and email as direct ways to share our service and they are the most used ways. So we concluded that our customers prefer direct messages instead of massive sharing our product like Twitter or Facebook could be. Besides, it's more natural than massive sharing the product via Facebook or Twitter.

  • - Add a “copy” button to the referral link to make it easier to copy and paste the referral link.

  • - Make the referral link easier to remember by adding the name of the customer instead of something random.

  • - Redesign the referrals pop-up into a referrals page with more information.

In the end, we evaluate all the different ideas and we came up with the following final solution:

Redesign the referrals pop-up into a page with the following information:

  • - We are going to give the opportunity to use the referral link and the referral code. We have decided this because for now, we can't delete the referral link as some of our customers are used to it and there are some active links. Plus, in some cases, our customers would prefer the referral link instead of the referral code, for example, if you share our product via Whatsapp or facebook messenger. The referral code is better for in-person conversations.

  • - A “how it works” section. One specific section explaining how the referral link works and how the referrals code works, and another general section explaining how the program in general works.

  • - Possibility to send the email directly from our referrals page and importing your contacts from Gmail, Hotmail and Yahoo.

  • - Add the “copy” button to easy and fast copy the referral link or the referral code.

  • - Add Facebook messenger as a referral method.

Currently, we are working on the redesign of the UI layout.

  • Role: UX researcher and UI designer
  • Field: Online service subscription
  • Tools: Sketch, phone surveys, usability tests

User flow ideas

User flow ideas

New user flow


Main Background

Color Scheme