Referral System

My role

I was responsible for the full design execution of the referral system — from structuring the flow and defining user experience to delivering the final UI. I closely collaborated with the task owner and technical specialist to gather functional requirements and understand technical constraints. Based on that, I developed the core concept and finalized the complete design.

The solution

I designed a seamless user experience that guides users from generating their unique referral link to tracking conversions and requesting payouts. The interface balances simplicity with transparency, ensuring users always know how their referrals perform and how close they are to a payout.

Referral system logic

The referral system makes it easy for users to share their link and withdraw rewards.
Each flow is designed to be simple, predictable, and transparent — ensuring that users always understand what’s happening and what to expect next.

Mobile screens showcasing the referral page interface, including the referral link input, performance stats, how-it-works section, and milestone reward progression.

Referral page overview

The entire referral experience is presented on a single, well-structured page. It includes the referral link, sharing options, balance tracking, a payout section, and detailed performance metrics — all designed to be intuitive and accessible.

Desktop view of the referral dashboard showing the user’s referral stats, link generation options, milestone bonus tracker, and a visual explanation of how the referral system works.

Sharing the referral link

Users can generate their personal referral link and share it via copy or a dedicated modal. The share modal includes quick options for email and social platforms, making it easy to invite others in just a few clicks.

Two mobile screens showing the referral link section and sharing modal, including social media icons, referral stats, and copy link functionality.

Three mobile screens showing the payout process: referral earnings list, withdrawal confirmation modal, and payout history screen.

Requesting a payout

When the user reaches the minimum balance, the withdrawal button becomes active. The process includes choosing a payout method or adding a new one, followed by a confirmation modal that clearly communicates the status of the request.