Skip links

Referral Program

Designing a referral program for fintech

Revamping referral program from user engagement to improve conversion rate.

MY ROLE

Design Lead, UX Researcher,
Interaction Design, Prototyping

ENGAGEMENT

2 Sprints

CLIENT

Salary Hero

Discovery

Data Analytics

Data analytics revealed an interesting pattern in the referral user journey, showing a focus on tracking engagement through click rates and code copying. However, the journey had a high abandonment rate after these actions, prompting further investigation into why users dropped off at this stage.

Understand

Usability Testing

Based on the data, I wanted to understand how users engage with the product throughout the entire process. To explore this further, I conducted usability testing with blue-collar workers, our primary user personas.

Key Findings:

To highlight the findings, I have outlined the key observations and recommendations below.

Observation

  1. Clarity of Information: Users found the referral process confusing due to unclear instructions and ambiguous terms.
  2. Non-Tech Savvy Problem: Users struggled to send the code due to a lack of education—copying and pasting code may be simple for tech-savvy individuals but not for these users.
  3. Support and Assistance: Users had difficulty finding support and felt abandoned.


Recommendation

  1. Simplify the language, use shorter sentences, and add visual aids (icons, tooltips, or illustrations) for guidance.
  2. Explore alternative mechanisms for sending the code, such as UTM links, so users can click instead of copying the code.
  3. Add visible support options (help button, live chat) and provide tutorial videos or step-by-step guides for self-help.

Benchmarking

Before diving into the design, I wanted to explore how referral programs are currently implemented in the market. To do this, I took screenshots of various apps and websites and analyzed their visual aspects and user experiences across different industries.

Ideation

I sketched ideas focusing on reorganizing the information architecture to improve user understanding by defining hierarchy and content organization.

Sketches Referral Page

After sharing these with my PM and team, we discussed the pros and cons of each approach and chose a solution that balanced user needs with technical constraints.

Validate & Iterate

Given the parallel projects and limited resources, I defined success through two milestones in collaboration with the PM:

M1: Storytelling & Communication
Reorganize information, create clear and concise copy, and add communication tools to guide users throughout the process.

M2: Changing the Share Code Mechanism
After discussions with the developer, this milestone focuses on overcoming technical constraints to create a seamless sharing experience by replacing the manual copy-and-paste process with an auto-apply code feature.

Polish

Designs & Prototypes

After finalizing the design direction, I created high-fidelity designs, and created an animated prototype to visualize the look and feel, serving as a resource for developers.

Referral Key Screens

Key Takeaways

The key takeaways from this project are:

1. Uncovering User Pain Points: Usability testing uncovered the pain points of low-accessibility users, revealing crucial insights that shaped the design, making it more inclusive and user-friendly.

2. Aligning Business and User Needs: This project was a deep dive into aligning business goals with user experience. The challenge was to boost engagement and conversions while staying true to the needs of low-tech-savvy users.

3. Iterative Design for Real Impact: Iterating based on real user feedback allowed me to refine the design in a way that not only improved engagement but worked within technical constraints, delivering real, measurable value.

Related Projects