Refer & Earn Redesign

In 2021, I redesigned the referral page, then known as Tell-a-Friend, after it had gone several years without a meaningful update. The interface was dated, several elements were unclear, and the page no longer reflected how members actually shared their referral links.

Because referrals became an increasingly valuable acquisition channel, the experience was revisited in 2025/26. The second phase moved beyond visual modernisation and focused on improving the complete journey, including referral activity, naming, discoverability, web and app consistency, accessibility, performance and security.

This case study shows how the product evolved across both phases and how research from heatmaps, analytics, surveys, customer support and competitor reviews shaped the final direction.

I led the UX/UI work across both redesign phases, working from research, testing and prioritisation through to high-fidelity prototypes.

• Analysing behavioural data, heatmaps, surveys and support insight to identify usability problems.
• Defining hierarchy and simplifying the referral and performance journeys across the web and app.
• Working with Marketing, Engagement, Customer Services, Development and security teams to balance user, business and technical needs.
• Supporting accessibility, design-system consistency, and responsive behaviour.

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 (pre 2021) contained misleading interactions and a separate performance journey that made simple updates harder to find.

The later redesign introduced a broader challenge. I needed to make one of TopCashback's most valuable acquisition channels even more useful - with increased sharing and reminding,, without creating performance issues for highly active members, or removing the flexibility Marketing needed to change rewards and promotional messaging.

Discovery

I revisited the referral page as it had become one of TopCashback's most valuable acquisition channels. The goal was now no longer a visual improvement, but to enhance usability and effectiveness across the entire journey. This phase involved close collaboration with marketing, engagement teams, and customer services. I aligned on key priorities for the referral page, including reducing any friction, and addressing common user issues raised through support channels.

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

I applied a MoSCoW prioritisation framework to define what the page truly needed.

I analysed several referral programmes (e.g. Wise, Rakuten, Dropbox, Zilch, Spotify) across web and app to help identify best practices and emerging patterns.

Using Miro, I explored wireframes where I focused on making the process clearer and increasing the usefulness of the page. One key idea was to integrate the 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.

Key Findings

Before progressing to high-fidelity designs, I validated the feasibility of the approach with development and security teams. This presented key challenges such as, users with a high number of referrals could cause performance issues, displaying referral data could expose sensitive information typically protected behind a verification wall. While solutions like pagination or lazy loading were possible, the security implications would negatively impact the experience.

Design Exploration

I explored a number of iterations to find the right hierarchy for the page. One of the biggest design decisions was deciding what users needed to see first, should the page immediately communicate the referral reward, or should it prioritise helping users share their referral link as quickly as possible? I used analytics, heatmaps and customer behaviour to guide these decisions rather than relying on assumptions.

I also wanted to introduce a "How it works" section after reviewing customer service enquiries. A recurring theme was that some members didn't fully understand how the referral programme worked, particularly around qualification and thresholds. Bringing this information into the page reduced the need for users abandoning or contacting support.

After several iterations, there was alignment on information hierarchy. With this foundation in place, I created interactive prototypes that allowed me to experience the page as a user would. This further allowed me to refine interactions before development.

As I was building the prototypes, I made extensive use of Figma’s Auto Layout and creating interactive components to ensure flexibility and consistency throughout.

Auto Layout proved particularly valuable when designing the table, as it allowed me to efficiently manage data, especially when exploring the filters. This not only streamlined the design process but also made handoff to front-end development simpler. It also enabled other designers to reuse components maintaining consistency across the team in other projects.

Design Exploration - App

Once the desktop and mobile website designs were finalised, I began exploring how this would translate to the app (iOS and Android). It was not suitable to just copy the mobile site, I evaluated which elements should remain consistent across platforms and where the app could take advantage of native behaviours. The result was a hybrid approach that had familiarity whilst ensuring the experience felt like it belonged within the app.

However, I identified a usability issue within the primary sharing section - the green container where users access their referral link. The number of available actions created a cognitive overload, making the experience feel messy. A key difference in the app experience was the use of the device’s native share sheet. While this did streamline the sharing, it introduced an additional constraint: the QR code is an additional option. As a result, users are presented with three distinct options, which adds complexity.

I explored several approaches to rebalance the hierarchy, including adjustments to colour and layout to reduce this visual complexity.

I experimented with ideas, such as, introducing a slimmed-down, sticky section using a glass effect to reduce the prominence whilst maintaining accessibility.

In a group workshop, I presented the rationale behind these ideas, including the potential benefits of adopting a more modern visual approach. Through discussion, I evaluated each option against user needs, and overall clarity. The final direction retained the three available actions but opted for a simpler UI to try and reduce this complexity.

The feedback workshop itself was valuable in validating my ideas, helping to see considerations that were overlooked e.g. the bottom menu was to be changing soon to a glass menu on iOS which would cause duplication of the effect and clutter the UI.

Solution

After iterating in Figma, I developed a final prototype and presented it to stakeholders. I anticipated key questions and addressed potential concerns upfront. The solution was well received, with no blockers to development.

Accessibility follow-up

An accessibility challenge I encountered was the use of white text on a green background, which did not meet the required WCAG contrast guidelines. I initially explored changes such as adding text shadows and increasing font sizes, but these solutions began to negatively affect the visual balance.

To solve this, I explored an alternative approach by separating the information into individual white containers. This obviously improved accessibility, and it also aligned with another ongoing project which is great for consistency - I ensured there was no confusion between them. I further identified an opportunity to simplify the interface by removing one of the boxes entirely, as the same information was already being shown within the pagination.

During the initial 2021 redesign, I led the UX/UI design, working closely with developers to modernise an outdated and non-responsive page.

The second phase became a larger product initiative, I worked alongside another UX/UI Designer to reach the final solutions. I was also involved in regular workshops with a working group (including marketing, engagement, and customer service representatives), allowing us to review ideas, and consider points from different teams perspectives to reach agreement and prioritise improvements, before moving into building them.

The first phase improved an outdated and non-responsive referral experience into a modern interface, with a clearer hierarchy. By prioritising the users actions, the redesigned page reduced cognitive load, and made the referral journey easier to understand and most importantly, complete. This change resulted in a 36.6% decrease in rage clicks, and a 43.5% decrease in dead clicks.

The second phase built on those foundations by taking a more evidence-led approach. Through behavioural analysis and collaboration, I further enhanced the referral experience by improving the transparency - on thresholds and 'How it Works' - and introducing a latest activity section that was built directly from the users core goals. Data pending.

• Designing from behaviour: 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 justifcation.
• Compromising results in new ideas: 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 less performance and privacy concerns.
• Accessibility can improve the wider design: Resolving colour-contrast issues led to a cleaner summary structure and helped remove duplicated information, improving hierarchy as well as being accessibility compliant.