Click Competitions · Case study

01

Context · the acquisition

We didn't start with a brief. We started with a live business.

Click runs two competition types: regular prize draws and Instant Wins, where the result is revealed the moment you buy. Tickets are cheap and the thrill is immediate, which is exactly why people come back.

The studio I work for bought it at the start of the year, underperforming but alive. That changes the job entirely. There was no greenfield, no staging-only audience, no permission to pause. Every change had to ship under real traffic, real money, and real winners mid-flight.

The mandate What the business expected

01Convert better: the platform leaked sales

02Modernise a dated, mobile-hostile experience

03Keep every existing user through the change

04Move fast enough to justify the acquisition

My remit What I owned

01UX design end to end, led with a team

02Most of the product strategy & prioritisation

03The checkout rebuild, basket to success

04The design system behind the whole rework

02

The challenge

An inherited platform that worked despite its UX, not because of it.

Almost every flow had flaws, and checkout was the worst of them: a bulky five-step path with hidden CTAs that leaked conversions at each handoff. Mobile, the surface most players actually used, was the most broken. And two things players now expect simply didn't exist.

Inherited problems

✕Bulky five-step checkout that leaked sales at every handoff
✕Very poor mobile experience on the primary surface
✕Hidden CTAs, nothing optimised for conversion
✕No wallet, every entry re-entered card details
✕Manual prize claims, handled by staff, one by one

The hard constraint

You can rebuild the plane, but it has to keep flying. 220,000 people are on board, and none of them can feel the engine swap.

Full platform migrations usually shed users at the seams, every changed habit is a reason to leave. A live audience this size meant the rework was as much a risk-management problem as a design one.

Strategic considerations · the tensions I designed against

i

Rebuild vs. disrupt

Fix what's broken without breaking the familiar.

Existing players have muscle memory. The checkout needed clearer CTAs and far less typing, but the core act of entering had to still feel like Click.

ii

Speed vs. risk

Two months, on a live platform.

Velocity was a requirement, not a luxury. A design system and phased rollout let us move fast without betting the whole user base on a single big-bang release.

iii

Convert vs. trust

Optimise hard, manipulate never.

Conversion was the mandate, but a competition product lives on trust. Every friction I removed had to make the right thing easier, not nudge people into spending they'd regret.

03

Strategy & approach

I sequenced the work by where the money was leaking.

With two months and a live audience, prioritisation was the strategy. I reworked the platform end to end, but I ranked the work by conversion and business impact, fixed the biggest leak first, then added the missing capabilities, all on a shared system so the team could build in parallel. The three deep-dives below are the highest-impact slices of that wider rework.

1

Rebuild the checkout

The single biggest conversion leak. Fixing it returned the most revenue per day of effort, so it went first.

Highest impact · rebuild

2

Add the Wallet

A balance system to remove repeat-entry friction and build trust through self-serve withdrawals. New capability.

Repeat-rate · net-new

3

Build self-serve Prize Claim

Turn a slow, manual, admin-heavy process into an instant flow where winners choose their prize. New capability.

Efficiency · net-new

∞

A design system underneath all three

The enabler. Shared tokens and components are why a full platform rework shipped in two months and stays consistent as it grows.

Foundation · scalable

04

Deep-dive 01 · the checkout rebuild ● Rebuilt · before / after

Rebuilt around every place the old flow leaked.

The full path runs lobby → competition → basket → checkout → payment → a success screen that pays off the thrill. I rebuilt each step around one question: what is stopping a player from finishing? Each pair below shows the inherited screen, the reworked screen, and the friction removed.

Before

→

After

a

Turn a long scroll into a quick entry.

The old competition page buried Add to Basket beneath prize copy, rules and FAQs, on one flat price. The reworked entry opens as a focused panel: preset ticket bundles (10+, 50+, 100+, 500+), each showing its own discount, and a live “you saved” figure that moves with the quantity. Committing takes seconds, and the bundle tiles lift basket size without a hard sell.

Bundle discountsLive savings shownAdd to Basket in reach

Before

→

After

b

A basket that holds more than one draw.

The inherited basket carried a single line item and a plain subtotal. The rework lets players manage several competitions at once with per-item steppers and remove, strikes through the original price so the saving is unmistakable, and surfaces a few relevant “people also added” draws, more tickets per order, no extra friction.

Multi-item basketSavings made visibleRelevant add-ons

Before

→

After

c

Stop making players type their life story.

Checkout used to be a long billing form: full name, address, phone and email keyed in by hand before an order could go through. The rework replaces it with a quick review: quantities stay editable, eligible discounts apply in a tap, and the new wallet balance can be put straight toward the total. Less typing between intent and payment means fewer people give up at the last step.

No manual address formOne-tap vouchersPay from wallet balance

Before

→

After

d

Pay the way you already want to.

Payment used to be a card form bolted onto the end of checkout. The rework gives it a dedicated screen led by the fastest options: Apple Pay, Google Pay and PayPal alongside card, with the payment processor and security badges shown plainly. Fewer keystrokes and visible trust are what carry a competition order over the line.

Apple / Google PayPayPal + cardVisible trust badges

you
won

Step e · order successful → you won

The success screen is a moment, not a dead end.

When an order contains Instant Wins, the confirmation leads with a Reveal Instant Win Results button that opens a celebratory “You won!” screen, every instant prize and the winning ticket numbers gathered in one place. Regular-only orders get a clean, reassuring confirmation. Either way it ends by pointing players toward more competitions, turning a finished order into the next one.

Reveal Instant Win Results“You won!” prize listLoop back to more draws

05

Deep-dive 02 · the wallet + Net-new capability

A balance, a cash-out, and a paper trail, all self-serve.

The platform had no concept of a balance. Every entry re-collected card details, and money moving in or out was opaque. I designed a wallet that does three jobs: it makes the next entry effortless, makes cashing out feel safe, and gives players a clear record of everything they've paid in.

Wallet hub: balance split into withdrawable and Click Credit, free tickets, discounts

a · The wallet hub

One balance that tells players exactly what's real.

The headline balance splits into Withdrawable cash and Click Credit, promotional funds that can't be cashed out. Separating them up front is the difference between a wallet players trust and one they feel tricked by.

Add Funds and Cash out sit at the top, the two actions players come for.
Free tickets are itemised by competition, with a direct route to basket.
Stackable discounts (VIP, registration, welcome) apply or remove in a tap, each with its expiry.

Withdrawal: £5 with transparent 2% fee and net you receive

b · Cash out

Getting your money out is proof the game is fair.

In a competition product, a visible, self-serve withdrawal is the strongest trust signal there is. The fee is never hidden: players see the 2% deduction and the exact net they'll receive before they commit.

Net amount ("You receive £4.90") shown against the withdrawable balance, no surprises.
Plain-language safety warning about correct payment details, framed as care not friction.
Secure Bank Transfer with bank-grade security cues to settle nerves at the riskiest moment.

Deposits: filterable history with status, method and amount

c · Deposit history

A paper trail that answers "where did my money go?"

Every deposit is logged and filterable, so the question that used to generate support tickets now answers itself. Accountability is a feature, not an afterthought.

Filter by status and date range to find any transaction fast.
Each entry shows date, payment method, amount and a clear status.
View Details on every record, full transparency, zero support contact.

06

Deep-dive 03 · prize claim + Net-new capability

From a manual staff job to an instant, self-serve choice.

Resolving a win used to happen entirely by hand: staff emailing winners, chasing whether they wanted the physical prize or the cash, processing each one manually. I designed a self-serve flow that hands that decision straight to the winner, and quietly gives the business a reason to keep the money in-platform.

a · My Wins

Every win in one place, with a clock on it.

Wins land in a dedicated list, split into Draw Wins and Instant Wins. Each card carries the prize, the winning ticket and a draw date, plus an expiry date, so claiming has a clear, motivating deadline instead of drifting.

Unclaimed wins show a prominent Claim button; claimed ones flip to "Claimed · 16 Jan 2026".
Winning ticket number shown on every card for total transparency.
Expiry date creates gentle urgency without a dark pattern.

Choose your reward: prize, cash alternative or Click Credit

b · Choose your reward

Three ways to take a win, and a reason to stay.

Winners pick from the physical prize, a cash alternative, or Click Credit, and the credit is deliberately worth more (£45,000 vs £40,000 cash on a Ford Ranger win). It's an honest, visible trade that nudges value back into the platform and lifts retention.

Prize, cash alternative and Click Credit shown side by side with real values.
"Best Value" flag on Click Credit makes the better-for-both option the obvious one.
"Your selection is final" stated up front, clarity before commitment, not after.

Address required: confirm for physical prize

c · Confirm & fulfil

Collect what's needed, nothing more.

Only physical prizes need an address, so the form only appears for those. Details are pre-filled from the account and confirmed in a tap, while cash and credit pay straight into the wallet, closing the loop without a single email.

Address requested only when fulfilment actually needs it.
Pre-filled from the account: confirm in one tap, or change if needed.
Cash & Click Credit settle instantly to the wallet, no staff handling.

07

The design system

A library far bigger than this one project.

A rebuild this fast only stays consistent if it's built on shared parts. So before the flows, I built the system underneath them, and it grew far beyond a colour palette and a button. What follows is a fraction of it; the point isn't the inventory, it's that every screen in this case study is assembled from the same governed library.

Tokens feed components, components carry their own variants and states, and patterns compose them into the flows you've just seen. That layering is why checkout, wallet and prize claim could be built in parallel by different hands and still feel like one product, and why the next feature starts at 80%, not zero.

It's deliberately more than this case needs. A platform with 220,000 live users and a roadmap can't be held together by screenshots and good intentions; it needs a source of truth.

480+

Variables & tokens

Colour, type, spacing, radius, elevation, motion

140+

Colour styles

8 families across tints & shades

28

Type styles

Display → mono, one ramp

720+

Icons

One set, multiple weights & sizes

1,600+

Button variants

Type · size · state · icon, one component

1,100+

Input & field states

Label, focus, error, disabled, password

640+

Card & line-item states

Cart, competition, win, claim

540+

Dropdowns, selects & filters

Account, sort, status, payment

420+

Tags, status & badges

One semantic colour system

380+

Modals, sheets & toasts

Confirm, reveal, error, info

360+

Navigation states

Bars, tabs & menus

60+

Standardised patterns

Reused across every flow

A representative slice A few shelves from a 6,000-piece library, shown for flavour, not as the catalogue.

Colour · 1 of 6 families

50

200

500

700

900

+ ink, paper, win, warn, info families →

Type · the ramp

Aa Display

Aa accent

Aa Body · Figtree

Aa MONO · DATA

+ 8 more steps with line-height tokens →

Status & tags

Completed

Pending

Canceled

Void

Error

Expired

Daily Deals Ending Soon

+ 420+ tag, status & badge variants →

Components · live specimens

Buttons · pill + flag Enter now View basket Claim prize Sold out

Inputs · label, focus, error

Email[email protected]Show

Helper text

Card number4242 4242 …

Check this field

+ 1,600+ button variants and 1,100+ field states alone →

Patterns standardised across every flow

Sticky action bar Persistent order summary One-tap quantity stepper Unified competition template Wallet balance row Status states · requested / processing / paid Reveal & celebration moments Mobile-first touch targets

08

Impact

A platform that converts better, and didn't lose a soul doing it.

220k+

active users carried through a full platform migration with zero drop-off. Migrations this size almost always shed people at the seams. This one didn't lose a single user.

The headline shift

↑Checkout completion 64% → 85% (+33% relative)
↓Cart abandonment 36% → 15%
↑Mobile conversion +41%, the worst surface before
⚡Whole platform reworked & shipped in 2 months

85%

Checkout completion rate, up from 64%

conversion

15%

Cart abandonment, down from 36%

conversion

+28%

Average revenue per session

revenue

+1

Deliberate upsell step added at basket, lifts value, not friction

USP

~100%

Prize claims now self-serve, from 0%

efficiency

−80%

Fulfilment & admin handling time on claims

efficiency

~45%

Active users who added a wallet balance in 3 months

adoption

+41%

Mobile conversion uplift

growth

Checkout completion & abandonment

64%

Before

85%

After

Completion

36%

Before

15%

After

Abandonment

Checkout steps · five to six, on purpose

Before · 5 steps

Comp pageAddBasketCheckoutPay

After · 6 steps

Comp entryAdd · bundlesBasket+ UpsellCheckout · walletPay · success

We added a step, not removed one. The extra beat is a bundle upsell that lifts basket value, and completion still climbed to 85%. More steps, less friction.

09

Reflection & what's next

What the sprint taught me, and where it goes.

What I learned

On a live platform, restraint is a design skill. I reworked the whole platform, but the case study only shows the three flows that moved the numbers most, and the same restraint applied in the product itself: change the flows that leaked money, and deliberately leave the muscle-memory parts of entering alone, so 220k people upgraded without feeling moved.

A system bought the speed. Two months only worked because tokens and components let the whole rework (checkout, wallet, prize claim and everything around them) progress in parallel. The design system wasn't overhead, it was the schedule.

What's next · the roadmap

01Wallet-funded auto-entries for habitual players, removing the last tap from repeat play.
02Instant Win reveal experiments, tuning the delight beat to lift repeat-purchase without over-stimulating.
03Post-migration A/B program, now the platform is stable enough to optimise continuously.
04Responsible-play guardrails, spend awareness built into the flows that convert hardest.

Next case 01 / Case BOTB Pass: one-off entries into recurring revenue

Designing the flow where the stakes are highest.

See all work →