US fintech appGrowth

Referral Redesign

Rebuilt the referral flow and made the offer card testable by Growth without engineering. Not shipped yet, so no conversion data.

The redesigned referral flow in four screens: Refer 3 friends, Get $500 with an invite link, a congratulations screen after a friend joins, an Allow access to contacts prompt, and Win Assured $120 with reward cards.
Role
Product Designer, sole owner
Timeline
13 months · 3 phases
Tools
Figma
Status
Designed. Hi-fi signed off. Referral templates in the dev queue.
13 moProject length
3Phases
$25Standing reward ceiling
1 weekPhase 3 hi-fi, after a one-day wireframe

Overview

A referral flow Growth can test without a dev sprint.

Problem

The 2022 referral screens showed none of the new reward rules, and Growth needed a full dev sprint for every messaging test on the offer card.

My part

Sole owner across three phases and 13 months: the UX flows, the offer card rebuilt as a modular component Growth controls, and the hi-fi screens.

Result

Hi-fi signed off and aligned with Growth and product, waiting on a dev sprint. Not shipped, so there is no conversion data yet.

Context

Who tells a friend about an app they barely use?

That was the real question. Not how to clean up the flow, but whether anyone actually wanted to refer the app, and whether the screen helped them do it.

The company is a US fintech app. It helps people manage credit card debt, pay bills, save, and build credit. The referral programme is one of the only organic growth levers the product has: a $25 reward for every friend who signs up and completes a qualifying transaction.

I owned this project for 13 months, across three separate phases, each revived when Growth had bandwidth. The brief when it started: Referral 2.0 → 3.0. Nothing else.

Problem

The 2022 UI was doing the asking, not the selling.

The referral flow had not been touched since 2022. The reward rules had changed: new qualifying actions, a $25 ceiling, a $10 minimum transaction, a five-referral monthly cap with no carry-over. The screens showed none of it.

  • Unreadable reward rulesThe reward ceiling and qualifying conditions were buried in copy. Users couldn't skim what they would actually earn.
  • A sprint per testEvery PLU messaging test cost Growth a full dev sprint. The PLU, the in-app card surfacing the referral offer, was static.
  • An outdated styleThe old screens were built on a design language the product had since replaced.
The older 2.0 referral screens: Your Referral Rewards with a 2 of 2 awards gauge and a friends list, and a Pending list with Send reminder buttons, annotated that the real action screen is hidden behind several clicks and that the core screen is non-interactive.

Older 2.0: extremely mixed-up flows, making it harder for the user to reach the dashboard. The real action screen sat behind several clicks, and the core screen was non-interactive information.

The older 2.0 UI: a Thank you screen with a heart, a green Refer 3 friends, Get $500 screen with an invite link, and a Get $125 $500 when you refer 3 friends screen with an invites-sent track.

Older 2.0 UI.

Goals

Make the reward obvious, and put the offer in Growth's hands.

UserUnderstand the reward without hunting for fine print. Get to sharing in one action. Trust the offer is worth passing on.
BusinessHigher referral conversion, no backend changes. A Growth-controlled PLU, testable without a dev sprint. Full visual alignment with the Phoenix design system.

Process

Three phases, with eight months between two of them.

Phase 1
2 monthsUX from scratch. I mapped the full referral experience in FigJam, built the 3.0 UX flows, explored a scratch-card treatment for the referral card, ideated PLU screens, and locked the illustration direction with the design director.
Phase 2
2 monthsUI hygiene across all touchpoints. Illustration delivered by the illustrator. Screens ready, aligned with the design director, shared with Growth. Then deprioritised: the RMS track took Growth's bandwidth, and the screens sat for eight months.
Phase 3
2 monthsThe design director revived it with one constraint: no backend involvement. Wireframes done in a day. Hi-fi closed in a week. Aligned with Growth and product. Closed.
The referral flow indexing board: a legend defining the flow notation, a taxonomy splitting in-app from out-of-app touchpoints, a row of value propositions covering mutual reward, monthly cap and tiered offers, and the written conditions each party must meet to earn a reward.

FigJam: Referral Flow Indexing.

Key decision

The constraint that made Phase 3 faster.

The design director's brief on revival: no backend involvement. I took that further than a refresh.

The real ask surfaced in the minutes of the meeting with Growth. Growth needed a PLU system they could control dynamically: vary the message, test the offer, swap the visual, with no dev sprint. That meant designing the PLU as a modular component, not a fixed screen.

The constraint forced the right outcome. A PLU Growth owns is more valuable than one that looks better.

Ruled outStatic PLU screenSingle message, designed once. Every change needs engineering. Growth can't test without a dev sprint.
ChosenModular PLU componentMessage, visual and CTA templated. Growth controls all three from BE + FE. Built to feed the RMS system Growth was building toward.
The How does our referral program work screen, before and after: the older 2.0 version as a plain checklist, and the new 3.0 version as a timeline with icons, a limited offer and a gift illustration.

Older 2.0 was inconsistent with the user experience, and the funnel and proposition were not consistent. New 3.0 retains the same UX so the new UI can be launched and tested quickly.

Solution

The redesigned referral, from home card to confirmation.

The $120 shown in the redesigned screens is a limited-time promotional offer, not the standing reward.

The improved 3.0 UI: a congratulations screen for a successful referral, a Give $25, Get $25 invite screen with a shareable link, and a Limited period offer screen, Get $125 $500 when you refer 3 friends, with an invites-sent track.

Improved 3.0 UI.

The referral components: a green Refer 1 Friend to claim card, the Refer and Claim dashboard at $0 of $120 with reward cards and a friends list, a small home banner, a Earn up to $120 upsell card, and the $20, $40 and $60 reward cards.

The components: the Refer and Claim dashboard, the home banner and upsell card that Growth controls, and the $20, $40 and $60 reward cards.

The How does our referral program work screen on two phones: share your referral, wait for your friend to become eligible, get $25 deposited to your Bright Stash account, and a limited offer, ending on a Got it button.

How the referral program works: share, wait for eligibility, get paid.

Outcome

Signed off and in the queue, not yet shipped.

Hi-fi signed off by the design lead. Aligned with Growth and product. Waiting on dev sprint allocation.

Referral templates are P0 as of Aug 2026, blocked on compliance availability and Growth team leave. Not dropped, in queue.

No conversion data yet. The hi-fi hasn't shipped.

In hindsight

Three things I would challenge in my own work.

I waited for full bandwidth · mine I did not push a lightweight test, so the screens sat idle for eight months.
I flagged a compliance dependency late · mine I raised it at alignment, not at kickoff.
I left an illustration question untested · mine I raised it when I could have tested it myself.
"I kinda liked it, lets roll with it. We can of course change later depending on the performance." Design director, on the illustration

Takeaways

What I would do differently.

  1. Push for a lightweight PLU test as soon as Phase 2 ended. It would have closed the eight-month gap. I did not push for it, and that is the one I would take back.
  2. Treat the Phoenix constraint as a design tool. It felt like a limitation. It was not. Designing modular from the start (message, visual and CTA as independent variables) produces something Growth can actually run experiments on. I would apply that constraint deliberately next time.
  3. Prototype the illustration question instead of sending a Slack message.