Referrals redesign

Product Designer

12 weeks

Mobile (iOS & Android)

The existing rewards program was suffering from technical debt and UX friction. I was brought in to overhaul the end-to-end referral experience, unify the visual language across platforms, and ultimately drive higher user engagement and successful referrals.

Stepping into this new role, I knew I needed to balance fresh thinking with practical execution. I approached this challenge ready to bridge the gap between the end-user's needs, engineering's technical realities, and leadership's business goals (PM & CPO). I decided to go bold. I was prepared to deep-dive for the UX audit and present 5 distinct approaches to the problem, actively inviting rigorous critique to stress-test my design decisions. My manager brought me in specifically for this unclouded perspective, allowing me to advocate for a ground-up redesign without being weighed down by the existing company dynamics or the technical debt.

Before the redesign, the referral process felt like a chore rather than a rewarding experience. During my initial audit, I identified three major categories of friction:

1

The referral flow was incredibly long, disjointed, and text-heavy, leading to high drop-off rates.

2

Once a user successfully made a referral, there was no celebration, success message, or way to track the status of their referral. Users felt unvalued.

3

The designs ignored the core design system, leading to broken Light/Dark mode experiences, stark inconsistencies between iOS and Android, and several WCAG accessibility concerns.

"How can we simplify the referral process, make it effortlessly accessible, and ensure users feel valued for contributing to our app's growth?"

A unified, user-centric rewards engine. I redesigned the experience from the ground up, focusing on speed, accessibility, and emotional design. Here is a breakdown of the key features introduced:

By integrating native device contact books, I eliminated the tedious manual entry process that previously hindered users. Now, they can seamlessly search, select, and refer friends and family in just a few taps.

To solve the "blank canvas" problem where users hesitated over what to say to their friends, I designed a feature that offers pre-written, highly contextual in-app messages.

I introduced a dedicated tracking dashboard to give users full visibility into their referrals. This centralized hub allows them to see exactly who they've referred, check the real-time status, and view the rewards they've earned.

A referral is a massive win for the business, and it was crucial that the user felt that appreciation. I designed rich, celebratory success screens enriched with engaging micro-interactions.

Midway through the project, I started using Claude Code to push direct changes for spacing, copy, and component state tweaks cutting back-and-forth on the small fixes engineers often deprioritised. When an FE engineer became unavailable during a critical build phase, I used a Figma-to-code workflow to build new components straight into the internal UI library, with states integrated into Storybook. What started as a workaround became the standard: by the end of the contract, handoff had moved to a Figma MCP setup — tightening the design-to-production loop.

Beyond introducing new features, I completely rebuilt the UI utilizing the app's foundational design system components to resolve deep-rooted technical debt.

The redesigned flow is yet to ship in Q2 2026. Quantitative results are pending post-launch measurement, but the redesign reduced screen count by 30%, eliminated 12 documented friction points, and passed internal QA. The system established WCAG-compliant standards across 100+ components and improved design-to-development handoff efficiency by 35%.