drop-referral-header@2x

SKETCH | INVISION | ZEPLIN

Improving Referrals @ Drop

Enhancing the referral experience by improving visibility and engagement


OVERVIEW

I designed new components and redesigned app screens to improve the visibility and engagement of the referral program at Drop to help reach the 750k linked users goal by the end of the year.

ROLE

I was the sole product designer on the Platform team at Drop. I worked with the product manager and software engineers on the team to implement these designs. I shared my work with the design team which consisted of all the designers from the different teams.

OUTCOME

After the first designs (Phase 1) of the improved referral program rolled out, the number of referral screen clicks and referral code-copying was 2x. Metrics for the second half of Phase 1 and the Phase 2 designs have not been released yet.

PROBLEM

With the last quarter of the year (Q4) in full swing, Drop still needed to reach its goals of 750k new linked users for 2018. Acquiring new Drop members through organic referrals was identified as a channel with high potential. However, the low visibility and non-engaging nature of the current Give $5 Get $5 referral system was a barrier for users to refer.

ANALYSIS OF CURRENT REFERRER FLOW

To better understand the problem at hand, and because I wasn’t completely familiar with the referral process as a new intern, I created a user flow for a referrer on the app.

drop-referral-flow

 

Two key take-aways:

It takes too many steps for a user to get to the referral screen (A)

The user flow ends after the code is sent (B)*

 

*The friend who is referree has to link a card and confirm their email in order for the referral to be successful (ie. both parties getting their 5,000 bonus points). However, the referrer has no visibility of the referree's progress after sending the code.

RESEARCH

Looking at the pain points found in the flow analysis, I decided to look at the referral programs in popular apps that I’ve used before to get some insight as to why their referral programs are so successful. Some popular apps I looked into were Uber, Lyft and Airbnb.

I also looked into apps that had a similar point-earning and referral model as Drop, such as Bunz and Ritual.


Insight: Referral call to action is visible on the home screen and easily accessible

drop-referral-research-insight1

APPROACH

This project was done in two parts. The first part (Phase 1) was to address the number of steps it took to find the referral page and the second (Phase 2) was to address issues of a lack of visibilty and engagement with the program after someone refers.

 

How might we improve the Drop referral experience for all members to easily access the referral program and be engaged with it?

IDEATION 

Along with input from the product manager and the design team, I brainstormed potential ways we could solve our problem.

Below is a compiled list of ideas we had, sorted by screen.

drop-referral-research-ideation

 

We couldn't use all the ideas that were brainstormed since some ideas were A) were not feasible given the amount of work and time required and B) had higher trade-offs. For example, by placing banners in every screen, it may be interruptive and may cause fatigue for users. Thus, banners should be used sparingly and only in impactful places that wouldn't have a high trade-off.

Phase 1: Navigation Badge, Banners, Triggered Modals

Phase 2: Referral Progress Visualization

PROCESS (PHASE 1)

I did some sketches in my notebook and then proceeded to work with the Drop Design System on bringing some of the ideas to life for some referral upsells.

  • Navigation CTA
  • Banners
  • Triggered Modals


Note: Illustrations in banners taken from Dribbble for ideation - I take zero credit for the illustrations in the banners

PROCESS (PHASE 2)

We needed to close the gaps in the referral process for both the referrer and the referree. This meant creating two experiences that would help both parties understand where they currently were in the referral process and what they could do to complete the referral.

We interpreted it as: 

  • For the referrer: a visualization of their referrals and the progress
  • For the referee: seeing their pending points and taking steps to complete the tasks

FINAL DESIGNS (PHASE 1)

The final designs for Phase 1 were completed first and then deployed. 

Navigation Badge CTA

drop-referral-finaldesign-nav

Triggered Pop-overs

drop-referral-finaldesign-popovers

Banners

drop-referral-finaldesign-banners

FINAL DESIGNS (PHASE 2)

I created two flows: one for the referrer and one for the referree.

Referral Progress: Pending Points (Referree POV)

drop-referral-finaldesign-pending-points

Referral Progress: Referred Friends (Referrer POV)

drop-referral-finaldesign-referral-progress

METRICS

October 26th: Navigation badge and banners were implemented

  • Referral Screen Views 
    • Doubled rate from ~7000 views per day to 14,000 views per day
    • Steady rate of ~11,000 views per day after a week
  • Referral Code Copying
    • Doubled from ~700 codes per day to ~1,400 codes per day

Metrics for the triggered referral modals have not been released yet and phase 2 of the project is being built in 2019.

REFLECTION

This project allowed me to take ownership in a feature and to tackle an important problem. I was able to work alongside product managers, software engineers, designers and members of the marketing team to bring this solution to life. I enjoyed seeing the impact of my work and seeing my designs come to life. 

I am grateful for the opportunities that Drop provided me and for the people there that have helped to make these changes happen in the app.

View More Projects

Improving Referrals @ DropProduct | Mobile

Adobe x The Ocean AgencyDesign Competition

12 Days of Gifting @ DropGraphic Design | Marketing

Context Chats @ Air MilesUser Research | Mobile

Daily Illustration JournalVector Illustration

Eggy ComicsDigital Drawing