Rank Interactive · Case Study
A Trophies System,
built to scale.
A configurable rewards framework that lifted engagement across 120+ branded sites — gamification with editorial restraint.
- Role
- Senior UX/UI Designer
- Scope
- Design System, Gamification
- Reach
- 120+ sites
Intro
Rewards that feel earned, not handed out.
Trophies were meant to celebrate progress — but across 120+ branded sites, they had drifted into noise. We rebuilt the system from the ground up: a single, themable framework that gives every brand its own personality without losing the moment of delight.
Challenges
What stood in the way.
Fragmented brands
120+ sites with their own visual languages — and no shared reward layer between them.
Reward fatigue
Players were earning trophies they didn't notice or care about. Delight had become decoration.
No room to scale
Each new campaign meant rebuilding from scratch. Product teams needed a self-serve path.
Roadblock
One system,
every brand.
The biggest blocker wasn't visual — it was structural. Trophy logic, states, and animations lived inside each brand's codebase, so any small change rippled into 120 separate releases. We needed a shared spine before we could touch the skin.
Workaround
A skin
over a spine.
We split the system in two: a stable behavioral core (states, progress, motion timing) and a token-driven skin per brand. One variable change re-themed an entire trophy line — no engineering ticket required.
User Flow
From play to payoff.
01
Trigger
Player completes a qualifying action.
02
Progress
Trophy reveals itself, quietly tracking each step.
03
Unlock
A short, branded moment celebrates the win.
04
Reward
Players spin the wheel or claim their bonus.
Design System
A kit, not a template.
Tokens
Color, surface, motion and elevation — driven by a single source per brand.
States
Locked, in-progress, unlocked and claimed — consistent across every vertical.
Motion
Restrained micro-animations that punctuate, never overwhelm.
Information Architecture
Built to plug in anywhere.
The IA separates the trophy entity from where it appears. A trophy can live in a profile, a campaign drawer, a notification or a celebration overlay — but always carries the same structure and metadata.
- · Entity layer: state, progress, reward, brand token
- · Surface layer: profile, drawer, toast, overlay
- · Brand layer: tokens, motion presets, copy tone
Results
What changed after launch.
120+
Sites rolled out
+38%
Avg. session length
+24%
Repeat play
1 day
New campaign launch
Some Data
The numbers, made tangible.
Appreciation Rate
How players felt about the trophies they earned. Hover or tap a segment to focus.
- Loved it58%
- Liked it27%
- Neutral11%
- Didn't notice4%
Wheel Unlock Success Rate
Share of qualifying sessions that converted into a wheel unlock, by vertical.
Recognition
What it meant for the team.
Internal design award
Recognized as the most reusable system shipped that year — adopted across every vertical.
Cross-brand adoption
Adopted by 120+ brand teams without a single bespoke handoff after the initial rollout.
A new design ritual
Sparked a quarterly “gamification review” that still shapes the company's player experience.
