SoftConstruct - VBET by Yuri TavaresSoftConstruct - VBET by Yuri Tavares
Built with LottieFiles

SoftConstruct - VBET

Yuri Tavares

Yuri Tavares

SoftConstruct is a global technology provider in the iGaming sector, known for its innovative solutions in sports betting, casino games, and online gaming platforms. Among its brands is VBET, an international sports betting and gaming operator that offers a wide range of solutions for gaming enthusiasts around the world.

VIP Landing Page

To highlight the exclusivity of VBET's VIP program, we developed a dedicated landing page targeting high-value clients. I collaborated with the design team to create responsive animations and microinteractions focused on UX Motion. The goal was to elevate the visual experience and convey sophistication through subtle movements, refined transitions, and clear interactions, crafting an atmosphere that aligns with the brand’s premium audience.
VIP Landing Page
One of the platform’s highlights is Last Battle, SoftConstruct’s gamification system. In it, VIP users accumulate experience points (V-Points), level up and progress through categories, unlocking exclusive benefits such as personalized bonuses, live events and access to private communities. Gamification was used as a strategy for continuous engagement, encouraging user retention and deeper interaction within the VBET ecosystem.
VIP Landing Page

Category Change Animations

Category changes were key milestones in the VIP user journey. Each transition between categories featured unique badge animations, visually marking the user’s advancement and reinforcing their sense of status. These animations were designed to be lightweight and responsive, ensuring smooth performance across the platform. By strategically integrating gamified elements, the animations helped turn simple actions into memorable experiences, deepening the emotional connection between user and product.

Gamification Panel

I developed the level and category progression system with animations and microinteractions for the gamification panel, accessible to logged-in users. The focus was to provide an intuitive and engaging navigation experience while maintaining visual clarity. Progress bars were animated to indicate XP accumulation, offering a simple and dynamic visual. When users filled the bar, a level-up animation was triggered for instant visual feedback. If the new level unlocked a category upgrade, an additional transition highlighted the evolution, reinforcing a strong sense of achievement.

Home Mobile

This sequence presents the platform’s entry flow — from splash and loading states to onboarding and Home. Motion is used as a functional layer to guide attention, structure the experience, and create a clear, intuitive navigation from the first interaction.
This user journey flow was designed to create a faster, smoother and more predictable experience, from login and registration to the user’s first interaction within the product.
The focus of this exploration was not only the visual interface itself, but also the behavior between states — including validations, loading, error handling, terms acceptance and transition continuity throughout the journey.
The mobile app experience after login, organizing navigation, interface components and interaction behaviors.
The focus was to create a clearer, more consistent and intuitive experience while documenting how each section works within the product.
Visual feedback, navigation states and content organization were also explored to improve the user experience and support communication between design and development.

Components & Micro-interactions (Motion System)

Components and micro-interactions are part of the Design System and are enhanced by a motion system. Animation is not decorative, but defines behavior, states, and feedback across the interface.
Animação responsiva .json
The goal was not to use motion only as a visual element, but as part of the user experience — helping communicate states, feedback, actions, and component behavior in a clearer and more natural way.For the interactive stories, I designed a mobile-first, responsive animation system with a loader that reacts to user touch. The stories were structured into two types: regular stories, used for banners and general announcements, and special stories, available only to selected audiences such as VIP users and participants of the Last Battle campaign, reinforcing exclusivity and personalization in the experience.
In the Boosted Odds section, I implemented an animated "On Fire" flame icon to highlight bets with high user interest, helping to create a sense of time and perceived value.
Animação responsiva .json
Complementing this solution, for the multiple bets, I designed an animated countdown bar inspired by health bars in games. It visually starts at 70% even when at full capacity, using colors like yellow and red to indicate limited availability. This bar automatically appears when there are 4 hours left before the game starts, signaling that the opportunity is approaching its end.
110% ~ 70%
69% ~ 30%
29% ~ 1%

Empty states animations

Empty states were designed to transform inactive moments into guided experiences.
Instead of leaving users without direction, motion and visual cues were used to communicate context, suggest next actions, and keep the interface feeling active and responsive.
These animations help reduce friction, maintain engagement, and reinforce the product’s personality even in the absence of content.

Thanks for watching!

Like this project

Posted May 8, 2025

Created interface animations for the Last Battle gamification system at Softconstruct, targeting VIP users of global iGaming brand VBET.

Likes

3

Views

122

Timeline

Jan 8, 2025 - Apr 15, 2025

Clients

SoftConstruct