BETTERLORE: COIN PUSHER
How I redesigned Coin Pusher’s win feedback to make big wins feel big — and small wins feel just right.
Project Details
✶ Role: UI Design, Animation, State Logic Definition, Sound Design, Dev Handoff
✶ Type: New Game Mode Feature
✶ Duration: November 2024 → February 2025
✶ Platforms: Mobile & Desktop
✶ Tools: Rive, Figma, Adobe Illustrator, Adobe Photoshop
Disclaimer: Some visuals shown here have been modified or recreated to comply with confidentiality agreements. The design process and decisions reflect the original work.
Before this redesign, CoinPusher’s win feedback looked the same for every reward, no matter the size.
PROBLEMS IDENTIFIED:
Flat emotional impact:
Jackpots felt no more exciting than small bonuses.
No visual hierarchy:
Players couldn’t instantly gauge the value of a win.
Performance issues:
Heavy PNG animations slowed down gameplay.
BUSINESS RISK:
Low engagement in high-value moments could reduce session length, replay rates, and perceived game quality.
Design Goal:
Create a feedback system that feels rewarding, scales with value tiers, and performs smoothly across devices.
Old Win System:
Comparing the old and the new feedback system:
Research & Insights
Player observation:
Watched live sessions; players sometimes missed jackpot events entirely.
Competitive Scan:
Leading iGaming titles use tiered feedback to sustain excitement.
Technical Review:
PNG-based assets were large, slow, and resource-heavy.
Key Insights → Design Opportunities
Ideation & Exploration
Through trial and error, I explored different win frameworks, titles, and animation formats, refining them into a scalable system that balanced impact, speed, and global accessibility.
EXPLORING TIER COMPLEXITY
We started with a space-inspired idea where each tier was linked to a planet and given a dramatic win title (e.g., Mercury → Big Win, Uranus → Colossal Win, Sun → Ultra Win). The size of the planet matched the size of the win tier: the smallest planets represented the lowest tiers, while the Sun symbolized the mega jackpot as the largest and most impactful element.
While fun and thematic, this approach had two challenges:
⟡
It required 9 separate illustrations and animations, which was not feasible since I was the only designer building the system end-to-end (sketches → illustrations → animations → Rive logic).
⟡
Development and management needed the feature quickly, and producing 9 assets would have delayed delivery.
At the time of presenting, I had already completed 3 planet illustrations. During review, leadership and the Head of Development suggested a stronger approach: make the illustration size directly proportional to the win tier’s importance. In practice: XS Wins remained small and subtle and XL Wins expanded dramatically, covering most of the screen.
This feedback aligned with our goal of creating a clear visual hierarchy so players could instantly sense the magnitude of a win without reading numbers. In the same discussion, leadership also refined the framework from 9 tiers → 5 tiers. My role was to adapt the existing illustrations and animations into this structure while ensuring each tier felt distinct in size, pacing, and emotional impact.
EXPLORING WIN TITLES
Our first naming convention used dramatic phrases like “Mega Huge Win” or “Hyper Win.” While fun, they posed two problems:
⟡
Internationalization risk: Text baked into Rive can’t be dynamically translated.
⟡
Clarity risk: Exaggerated wording doesn’t carry the same meaning across cultures.
To solve this, we switched to short, universal exclamations baked directly into the animation:
1️⃣ XS Win (Good!) – Small bonus moments
2️⃣ S Win (Wow!) – Noticeable wins that break the rhythm
3️⃣ M Win (Great!) – Moments of moderate excitement
4️⃣ L Win (Massive!) – High-value, high visibility wins
5️⃣ XL Win (Epic!) – Rare, explosive jackpot moments
These are expressive, globally recognizable, and don’t require translation, aligning with our long-term internationalization goals.
EXPLORING ANIMATION FORMATS
From earlier projects, we had learned that PNG-based animations were problematic: they were large in file size, caused lag, and performed poorly on mid- to low-end devices. These issues broke immersion at critical gameplay moments.
⟡
Over 70% reduction in asset size compared to PNG workflows.
⟡
Smooth, responsive motion across devices.
⟡
A scalable system that developers could easily maintain and expand through state logic.
This decision not only solved the performance bottlenecks but also future-proofed the system for new features and other game modes.
EXPLORING SOUND DESIGN
Visuals alone weren’t enough to deliver the right emotional payoff, so I also curated the sound design for each win tier. While there wasn’t a formal process, I carefully selected audio that matched the scale of the tier and the space theme of the system.
⟡
For XS & S Wins, I chose short, sharp sound effects that are powerful but subtle enough not to interrupt gameplay.
⟡
For M Wins, I added a hovering spaceship effect to complement the spaceship illustration.
⟡
For L Wins, I Included laser gun effects to match the spaceship firing animation.
⟡
For XL Wins, I combined joyful, looping background music with layered celebratory effects for maximum impact.
This ensured that each tier felt distinct not only through visuals and motion, but also through audio cues that reinforced theme and scale.
Rough illustrations I sketched on Photoshop.
Design Direction
From the very beginning, we aligned that the win system should feel colorful and loud. I leaned into bright, cheerful elements layered over deep backgrounds, creating playful energy while ensuring clarity during fast-paced gameplay.
Alongside this, the proportional size of illustrations reinforced hierarchy: smaller tiers felt light and subtle, while jackpot tiers expanded dramatically, ensuring both clarity and emotional impact.
Initial designs presented (1920x1080)
Final Designs
Tiered Win System
⟡
XS / S: Short, subtle bursts for small bonuses.
⟡
M: Mid-range effects breaking gameplay rhythm.
⟡
L: Large, more dynamic visuals.
⟡
XL: Full-screen, multi-second celebration with optional dismiss.
Global Accessibility
⟡
Short, one-word tier names for easy localization
Performance Gain
⟡
Rive reduced animation asset size by over 70% compared to PNG workflows.
Implementation & Collaboration
⟡
Prototyped all animations in Rive with reusable states
⟡
Collaborated closely with frontend to ensure smooth portrait/landscape integration and
⟡
Built state machine logic for real-time triggering
Impact
Even without hard metrics, results were clear:
⟡
Stronger emotional payoff for high-value wins
⟡
Smooth performance across devices
⟡
Reusable system for other game modes
⟡
Global-ready design adaptable to new themes
What I'd Improve Next
This project laid the foundation for a scalable and expressive win system, but there are areas I would expand on to take it even further:
⟡
Test animations across a broader range of devices
While performance improved overall, a formal QA test across low-end, mid-range, and high-end devices could help us fine-tune animation complexity and frame timing to ensure a consistently smooth experience.
⟡
Add haptic feedback (for mobile)
Subtle vibrations paired with visual tiers (e.g., a light tap for XS vs. a longer rumble for XL) could further differentiate win levels and increase immersion.
⟡
Explore reuse of the animation system in other mechanics
The framework we built could be extended to future systems, bonus rounds, milestones, or even daily rewards, enabling consistency without rebuilding from scratch.
