Betterlore / Coin Pusher
Designing a Scalable Feedback System for Real-Time Wins
[Some visuals shown here have been modified or recreated to comply with confidentiality agreements. The design process and decisions reflect the original work.]
✶ Type: New Game Mode Feature
✶ Platforms: Mobile & Desktop
✶ Role: UI Design, Animation Strategy, State Logic Definition, Dev Handoff & Support
✶ Tools: Rive, Figma, Adobe Illustrator, Adobe Photoshop
The Why
Before this project, the previous game modes lacked impactful visual feedback when players won, regardless of the amount. A small win looked the same as a large one, leading to a flat emotional experience.
There was also no structured visual hierarchy, which made it harder for players to gauge the value of their rewards. The feedback system didn’t scale with the win tiers, and as a result, important moments felt underwhelming.
In earlier projects, we had also faced performance issues with PNG-based animations. I proposed using Rive, which we adopted after seeing major improvements in both file size and playback speed. That success directly influenced how motion was handled in this project.
The challenge was clear:
Make wins feel rewarding, scalable, and smooth.
Defining the Win System
To create a clear framework for player feedback, I collaborated with the Head of Development and Product Owner to define a tiered win structure based on reward value.
We initially explored a system with 9 distinct win tiers, each named after celestial bodies to match the game’s planned space theme. However, to streamline development and reduce animation production time, we refined this down to 5 tiers: XS, S, M, L, and XL.
➡️ XS Win - Small bonus moments
➡️ S Win - Noticable wins that break the rhythm
➡️ M Win - Moments of moderate excitement
➡️ L Win - High-value, high visibility wins
➡️ XL Win - Rare, explosive jackpot moments
Each tier was assigned a specific value range based on in-game currency and economy logic. I crafted distinct animation tone, pacing, and scale for each, ensuring that the emotional weight of the win matched its actual value, from short, subtle effects for smaller wins to full-screen, multi-second celebrations for jackpot moments.
This structured approach introduced a clear and consistent reward language, helping players instantly recognize the scale of their win without needing to read numbers or rely on UI clutter.
Designing the Buffers
Alongside win animations, the new game mode also required a design for progression buffers, visual meters that fill up as coins or chips fall. Once filled, these trigger the corresponding win animation.
➡️ Communicate real-time progress clearly without clutter
➡️ Align visually with the game’s coin physics
➡️ Reinforce anticipation through motion and pacing
The buffers became a core part of the game’s feedback loop, encouraging players to engage more deeply with the mechanics.
Visual Language & Theme
As part of our ongoing effort to improve the overall UI/UX of the game, we began shaping a new theming direction, starting with a space-inspired look for Coin Pusher.
The win feedback system was designed to reflect this theme. Each win tier was visually tied to a celestial object: from small planets for lower wins to the sun for the top tier. The visuals not only grew in size with each tier, but also in animation scale and impact, reinforcing the feeling of escalating rewards.
To enhance this further:
➡️ Animation duration varied by tier, from 2 seconds for lower wins to up to 30 seconds for jackpots. For the largest tier, we added a dismiss (X) button, giving players control over how long they wanted to savor the win.
➡️ While space often implies dark colors, upper management wanted to avoid overly muted tones. I designed with bright, cheerful elements, layered over rich, dark (but not black) backgrounds, creating contrast without dullness.
➡️ The final result is a visually balanced system that captures the energy of space without sacrificing clarity or playfulness.
To ensure the experience works globally, we also chose short, one-word win titles that are easy to understand across languages. This decision helps avoid localization complexity in future animation syncs, while keeping messaging clear and impactful.
Implementing Motion with Rive
For this project, we used Rive, a real-time animation tool that allowed for more dynamic and responsive motion design.
My responsibilities included:
➡️ Prototyping all win-tier animations in Rive
➡️ Creating clean, reusable animation states for each tier
➡️ Collaborating with frontend developers to design the State Machine controlling when and how animations play during live gameplay
This approach enabled:
➡️ Seamless transitions between gameplay and win feedback
➡️ A flexible, scalable system that developers could easily maintain
➡️ Lightweight animations without compromising visual quality and performance
Using Rive’s state machine gave us precise control over motion logic, making the feedback feel smooth, timely, and tightly integrated with the game’s mechanics.
Outcomes and Implementation
While we didn’t collect quantitative metrics, the results of this work were clearly felt across the team and player experience:
➡️ The win animations were visually stronger and more meaningful, enhancing emotional payoff
➡️ Performance significantly improved, especially in comparison to previous PNG-based workflows
➡️ Frontend developers successfully implemented the animations, with collaboration helping resolve integration issues
➡️ The system was implemented in both landscape and portrait modes; initial layout issues in portrait were solved through responsive design adjustments
✍🏻 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.