Binance Pay/Card — Growth UX

Binance — Campaigns

Four major campaign products designed across the engagement. Each one a distinct creative and UX challenge. Each one measured by DAU and new-user acquisition data.

Campaigns at Binance are not marketing banners — they are product surfaces with their own UI, their own flows, their own engagement mechanics, and their own data dashboards. Designing a campaign here means owning it end-to-end: concept, flow, high-fidelity UI, and handoff to a team shipping to 100M+ users.

01 — Crypto Box — Social Gifting

Problem: First-time crypto payment adoption has a cold-start problem. Users understand wallets but don’t understand why they’d pay someone in crypto when they could use a bank transfer. There’s no social context that makes it feel natural.

Solution: Crypto Box is a social gifting mechanic — users send crypto as a surprise gift. The recipient opens the “box” to reveal a random amount. The flow: Binance Pay home → Create Crypto Box → set amount → share link → recipient opens → funds credited.

The mechanic reframes a transaction as a social act. The surprise element creates emotional engagement. The resulting transaction is functionally identical to a normal crypto transfer — but users don’t experience it as financial.

Key design decisions:

• UI is intentionally playful — gift box animations, celebration states, bright Binance-yellow palette
• Three taps from Pay home to confirmed box: minimum viable friction
• The send flow and the receive experience are two distinct design problems — designed separately, connected by the shared delight of the reveal

Outcome: Crypto Box became the highest-converting campaign on the Pay/Card platform — 20–30% of new user growth attributed to it. Daily user count: 31,927 (April 2023). New users per day: 5,539–6,436.

02 — Win 1 BTC — Campaign Redesign

Problem: Win 1 BTC (formerly the 1 Dollar Game) was a gashapon mechanic — deposit 1 USDT for a chance to win up to 1 BTC in prizes. The previous designer’s implementation was generic. It looked like a settings page, not an event. Engagement metrics reflected this.

Solution: Full campaign redesign from scratch. The core mechanic stayed the same; the entire UX wrapper was rebuilt. Campaign pages received their own visual language — higher information density, more elaborate visual treatment, event-native UI that signals “something special is happening” rather than “this is another Binance feature.”

The Binance Card was integrated directly into the campaign — card application and campaign participation collapsed into a single progressive flow, so card adoption and campaign entry became the same action rather than two separate funnels.

Key design decisions:

• Campaign UI deliberately departs from the standard Binance DS in visual treatment — campaigns should feel limited-edition, not standard-issue
• Previous designer’s UI kept as reference and documented in the case study for before/after comparison
• Card onboarding embedded mid-campaign as a natural progression step, not an interstitial

Outcome: Win 1 BTC daily users: 18,301 (April 2023). New users per day: 4,727–6,006.

03 — Fruit Fusion — Game Design

Problem: Crypto Box drove first transactions. Win 1 BTC drove second transactions via prize incentive. But neither mechanism created a reason to return repeatedly. Repeat engagement — the driver of genuine product stickiness — required something different.

Solution: Fruit Fusion is a game. Conceptualised from scratch — characters, world, mechanics, art direction. Users play mini-quests to win 100 USDT. Binance Pay is the progression mechanic: completing Pay transactions earns game plays. The link between financial behaviour and game reward is direct and immediate.

Design process:

• Started with pencil sketches of fruit characters and game world references
• Characters developed from sketch into Binance-brand-compliant illustrative assets (avocado, orange, strawberry, pineapple, mango + cross-characters)
• High-fidelity game UI designed across 6 screens: game home, current round, leaderboard, mini-quest list, quest detail, Pay integration prompt
• Binance Pay modal embedded directly in the game flow (not as an external redirect)
• On-brand colour palette: Binance yellow + fruit-world warmth, deliberately more playful than the standard product

Key design decisions:

• The game feels like a game, not a financial product — this required developing a visual sub-identity that coexists with the Binance brand without feeling corporate
• Mini-quests calibrated to make Pay transactions the path of least resistance to earn game plays
• Physical sketches of the game world included in handoff as concept reference

Outcome: Fruit Fusion extended campaign engagement lifecycle — users who completed a first Pay transaction via Crypto Box returned to transact again via game progression.

04 — Binance Card — Campaign Showcase

Problem: A campaign showreel was needed to communicate the full scope of campaign design work — the range of formats, visual styles, and mechanics across the Pay/Card ecosystem — as a single cohesive story.

Solution: An 8-slide campaign showreel documenting the full campaign design output: Pay/Card homepage, campaign widgets, Crypto Box, Win 1 BTC, Fruit Fusion, 1 Dollar Game, Binance Card integration, and metrics. Designed as both an internal stakeholder document and a portfolio case study asset.

State coverage across all campaigns:

• Homepage widget variants (campaign A, B, C)
• Campaign landing states: pre-participation, active, reward claimed
• Payment completion states: transaction pending, confirmed, reward triggered
• Error states: insufficient balance, campaign ended, region restricted
• Empty states: first-time user with no history

Binance — Motion & Animation

The Share Campaign was not a static design problem. It required a full motion design production — a multi-layer After Effects composition broken into individually animated assets, composited into a final campaign film, and then re-exported as Lottie JSON for in-app use.

This track of work demonstrates a capability that pure UX designers rarely have: end-to-end ownership of an animated campaign asset from concept through production-ready export, across both video and web formats.

01 — Share Campaign — Space Shuttle Launch

Concept: The Share Campaign visual metaphor is a space shuttle launch — representing the acceleration of Binance Pay adoption, the network effect of sharing, and the aspirational energy of the campaign. The shuttle launches from Earth, carrying a Crypto Box into orbit.

Asset breakdown — individually animated layers:

• Shuttle: The Binance-branded space shuttle (yellow and dark, Binance logo on body). Animated: pre-launch idle, ignition, lift-off, orbital cruise.
• Booster: Rocket booster separation sequence. Animated: attached, separation event, fall-away trajectory.
• Globe: Earth rotating slowly beneath the launch. Animated: slow rotation, cloud movement.
• Cryptobox: The Crypto Box product asset, appearing in orbit as the payload. Animated: deploy from shuttle, float, gift-reveal.
• Stars: Background star field. Animated: subtle parallax drift.
• Smoke: Launch pad exhaust cloud. Animated: plume expansion, dissipation.

Production:

• Composed in Adobe After Effects as a multi-layer project (Space Shuttle Launch Final Draft.aep)
• Each asset animated on its own layer with independent timing
• Exported as two video cuts (Part 1, Part 2) for different use contexts
• Final export via Adobe Media Encoder: full composition and GIF variants
• Auto-save versions maintained across the production timeline

Poster: A static poster version of the shuttle launch scene for social media and print use — the orbital moment with shuttle, globe, and Crypto Box at peak composition.

02 — Lottie Animation for In-App Use

Problem: Video files are too heavy for in-app animations. The shuttle launch animation needed to work inside the Binance app — on both iOS and Android, at a range of screen sizes, with minimal battery and data impact.

Solution: Key animation sequences were exported as Lottie JSON via the Bodymovin After Effects plugin. Lottie renders After Effects animations as lightweight, scalable vector animations in the browser or native app. Two Lottie exports produced:

• data.json / data.html: First animation sequence (shuttle approach)
• data2.json / data2.html: Second animation sequence (payload deploy / Crypto Box reveal)

HTML preview files generated alongside each JSON file for QA review before handoff to mobile engineering.

Technical specs: Vector-based (scales without pixel loss), JSON format (readable and editable), compatible with Lottie libraries for iOS (lottie-ios), Android (lottie-android), and React Native (lottie-react-native).

03 — Campaign Process Card — UI Revision

Problem: The campaign’s primary in-app entry point — the process card shown to users explaining how the Share Campaign works — needed a UI revision during production. The original card design wasn’t communicating the steps clearly enough: users understood there was a campaign but not what they needed to do to participate.

Solution: Revised the Process Card UI to use a numbered step layout (Step 1, Step 2, Step 3) with explicit action labels and a clear CTA at the bottom. Each step includes an icon, a headline action, and a one-line explanation. The card fits within a modal overlay that appears when users tap the campaign entry point from the Pay homepage.

04 — Sound Design Reference

The Share Campaign sound design was referenced during production. Sound assets in the project folder (WAV format) covered:

• Launch ignition SFX
• Booster separation SFX
• Orbital ambience
• Crypto Box reveal chime

Sound assets were produced by the audio team using the motion design as a timing reference. The After Effects composition includes sound sync markers aligned to the key animation events.