Improving the referral program: Case Study.
Bloomon is an online service subscription for flowers.
The referral program is very important to them so we’ve decided to study it and redesign the page.
Today’s solution
This is the current solution for the invite friends page. It is a small pop-up on the login environment with little information about how the referral program works and the links to refer a friend.
The value proposition of the referral program is that if a customer refers a friend and this friend signs up to bloomon, the bloomon customer receives credit for a free bouquet (of any size and it could also be a give-away bouquet) and her friend receives a free vase within her first delivery.
The challenge
Bloomon is having a referrals low rate that is below their target. Especially the number of times a customer uses the referral program.
The main goal is to find out why their customers only use the referral program within the first two deliveries and figure out how to get more referrals in other stages of the customer journey as well.
User research
As we had to figure out why our customers are using the referral program only within the first two deliveries we decided to conduct a small user research to understand the problems of the current UI and to understand the pain points of bloomon customers.
We conducted a phone survey among some of the customers that have used the referral program in the first two deliveries but not after that and we asked them some questions related to the referral program and why they haven’t used it since their second delivery.
Some of the questions that we asked them are:
- When was the last time you used our referral program?
- Why haven’t you used it between then and now?
- How satisfied or dissatisfied are you with our referral program?
- How easy to use did you find the referral program? Why?
User research findings
- 8/9 bloomon customers refer a friend to face-to-face conversations.
- 7/9 bloomon customers think that referring a friend is too much effort, compared to the benefit they obtain.
- 9/9 of bloomon customer refer bloomon to close friends or family and to people that are true flower lovers.
- 6/9 of bloomon customers didn’t know the value proposition of our referral program.
Design goals
- Bloomon customers have to understand how the referral program works and the value proposition.
- The process of inviting friends has to be clear and easy to do.
- Increase the number of referrals by 10%.
Competitive analysis
We analysed and researched the best invite friends pages in other online services. This is a summary of this process:
Ideation
First, we explored very different ideas for the invite friends page and also for how to explain how the referral program works in a very clear and concise way. This a glimpse of that process:
Concepts
One detail to take into account is that the login environment is under a redesign as well and it was decided to implement a wizard in all the different pages of the dashboard in order to help customers know what they can find in that specific page and how to use it. So, we decided to include this concept in the redesign of the invite friends page as well to be consistent on all pages.
Concept 1
The first concept was based on a wizard with small gifs in each step that explains how to do that specific step. For example: In the step where we explain how to share the referral link with your friends we included a gif making that task.
The main page it’s very minimal and only has the necessary information.
We conducted some usability test in the office and we figured out that people didn’t understand the relationship between the free bouquets credits and the number of invited friends on the invite friends page. Besides, almost nobody read the text on this page either.
Regarding the wizard, most people thought that the same explanation was duplicated because we explained more or less the same with text and in the gif.
Based on the insights, we redesigned the concept and from now own, we conducted guerrilla usability tests on the streets. This is very useful because those people didn’t know anything about bloomon or the referral program, so we could know for sure if they understand it.
Concept 2
In this second concept, we decided to use icons instead of gifs. We took this decision because the gifs weren’t necessary and also because in the rest of the wizards in the login environment we use always icons.
After conducting the usability tests on the streets we found out the following:
- 8/8 participants didn’t really read the text on the wizard, they just clicked on “next” as fast as they could. So in the end, they didn’t know how the referral program works.
- 8/8 participants focused the attention on the icons.
- 5/8 participants didn’t understand the email icon, some of them thought that it was for SMS.
- 8/8 participants remembered the link but not the code.
- 8/8 participants didn’t read the text on the main page.
Concept 3 and 4
Based on the insights of the previous usability test we iterated that design and came up with two different solutions.
Both solutions had titles on each step of the wizard and also the icon is smaller, so it doesn’t catch too much attention. The icon and the text are closer and everything is aligned to the centre.
The second concept had only three steps on the wizard as we only explained the code because we found out that explaining the code and the link was a bit confusing to people.
Besides, we tested these concepts in English and in Dutch.
The main insights are:
- 4/4 participants understood better the message in Dutch, which means the mother tongue is very important.
- 4/4 participants understood the value proposition (free bouquet — free vase)
- 2/4 participants didn’t understand the email icon.
- 4/4 participants remembered better the whole message on the three steps version of the wizard.
The final solution
This is the final solution, both for desktop and mobile. We finally chose to use only three steps on the wizard as participants remembered better the whole message and we also simplified the email icon.
Compared to the current solution, we deleted Twitter because we figure out from the data that almost nobody uses it and we include Facebook Messenger because from the user research insights we can say that bloomon customers prefer to refer close friends or family instead of massive sharing the product.
Next steps
The next step is to develop this new design and set up an A/B test with the current solution to prove if this new design really helps to get more referrals.
Takeaways
My personal takeaways of this projects are:
- Always test with at least three people your designs: I was very surprised to find out that most of the people didn’t understand the email icon. Also to find out that most people didn’t remember the value proposition in the previous concepts and we had to design different concepts until we found the best solution.
- Mother tongue is important: Here in NL almost everybody speaks English fluently, especially in Amsterdam, so I didn’t think that Dutch version would increase the understanding of the message, but it did!
This is my first time writing a case study so if you have any feedback on how to improve it or if something is not clear enough let me know in the comments!
