VBET is a global digital entertainment brand within the SoftConstruct Group, recognized for delivering large-scale online experiences across web and mobile platforms. The product ecosystem serves users in multiple countries and requires highly engaging, performance-driven interfaces to support user retention and interaction.

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.

The project started with a UX Discovery and benchmark phase, analyzing navigation patterns, user behavior and references from the same segment.

Based on this research, insights, hypotheses and opportunities were identified to create a faster, more intuitive and consistent experience, exploring navigation, visual feedback, UX Motion and behavioral consistency between interface states.

This stage of the project focused on building a more consistent, accessible and scalable experience through Design System and Product Design principles.

The process involved everything from wireframes and early interface structure to component definition, visual guidelines, WCAG accessibility and reusable design patterns across the product.

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 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.

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.

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.

Animated components were designed following UX Motion best practices and WCAG accessibility guidelines, creating a more comfortable, clear and inclusive experience.

The animations were built to avoid excessive motion, improve feedback perception and maintain safe visual sensitivity levels throughout the navigation experience

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.

Animations were also designed with accessibility and “Reduce Motion” device settings in mind. When enabled, the experience prioritizes more static and subtle states, reducing excessive motion without compromising navigation and visual feedback.