Refer & Earn Redesign

Lead UX/UI Designer | Web | 12 weeks

1 of 2 UX/UI Designers | Part of ongoing working group with Marketing/Customer Service/Engagement representatives | Web & App | 6 months

The referral page needed to make two things immediately clear: what members could earn and how they could share their link. Instead, the original page contained misleading interactions and a separate performance journey that made simple updates harder to find.

I began by analysing user behaviour through heatmaps. They revealed clear patterns, including users clicking on non-interactive elements that looked clickable but weren’t.

The key focus was around the user’s primary goals, which were to understand the referral bonus and quickly share their referral link. Everything else was treated as secondary or supporting content.

Data from Google Analytics and Qlik showed that most users shared via copying their referral link. I made this most prominent on the interface.

Previously sharing options were presented as “Option 1” and “Option 2,” which felt unnecessarily complex. I simplified this into a clear primary action with secondary options grouped under “More ways to share.”

I began by revisiting behavioural data through heatmaps, which showed that user intent remained largely unchanged since the initial redesign.

I explored wireframes where I focused on making the process clearer and increasing the usefulness of the page. One key idea was to integrate referral performance directly into the main page, rather than requiring users to navigate to a separate “View Performance” page.

Before committing to a direction, I created a survey on the existing performance page to understand how frequently users visited it and what their intentions were. The insights supported the hypothesis that users wanted quicker access to referral updates without navigating away.

Before progressing to high-fidelity designs, I validated the feasibility of the approach with development and security teams. Users with a high number of referrals could cause performance issues, while displaying referral data could expose sensitive information typically protected behind a verification wall.

The number of available actions created a cognitive overload, making the experience feel messy. The native share sheet streamlined sharing, but the QR code introduced an additional option. Users were presented with three distinct actions, which added complexity.

I experimented with a slimmed-down, sticky section using a glass effect to reduce its prominence. The workshop helped reveal that the bottom menu was also changing to glass on iOS, which would duplicate the effect and clutter the UI.

The final direction retained the three available actions but opted for a simpler UI. I developed a final prototype, presented it to stakeholders and addressed potential concerns upfront. The solution was well received, with no blockers to development.

I initially explored changes such as adding text shadows and increasing font sizes, but these began to negatively affect the visual balance.

Separating the information into individual containers improved accessibility and aligned with another ongoing project. I also removed one of the boxes, as the same information was already shown within the pagination.

Heatmaps and analytics showed that copying a link remained the dominant action across both redesign phases. Keeping that behaviour central prevented the later work from becoming a change with no justification.

Integrating complete referral performance initially appeared to offer the best user experience, but development and security reviews revealed important risks. The “Latest Activity” section delivered much of the value with fewer performance and privacy concerns.