The HUB is a platform that intelligently centralizes the main tools and data used by PlayPIX and Dupoc affiliates, such as the Insights Center and the Signals App.

As a UX Motion Designer, I collaborated with the product team to enhance the user experience by creating animations that guide navigation, highlight key features, improve time perception, and humanize the interface.

Here, I present some of the animations I developed throughout this project. These solutions contributed to increasing new user adoption, improving affiliate retention, and boosting conversions within the platform.

Welcome animations visually introduce the HUB, aligning with the preference for videos over text identified in UX research. This led to increased initial attention, greater platform promotion, and higher engagement with the platform tour.

To mitigate the perception of slowness caused by initial data loading, we implemented skeleton loaders during the transition to the interface. This choice reduced visual anxiety and maintained navigation fluidity while data loaded in the background.

Many users were abandoning the onboarding questionnaire, a crucial step for personalizing the affiliate's profile data. Animations were applied to spark curiosity and increase task completion, resulting in an increase of over 33% in completion rates for this phase.

The focus was on improving accessibility and reducing the user's cognitive load by providing a light and intuitive visual moment. The entire process followed design best practices: from a storyboard with a clear concept to the implementation of a responsive, lightweight, and high-performance animation on the platform.

During the question-filling process, we introduced a custom microloader between steps. Even in brief intervals, we aimed to maintain navigation fluidity and personality. The lightness of the transitions helped reduce the sense of effort and kept the interaction pace consistent.

At the end, during longer calculation and loading moments, we used a macroloader with an hourglass aesthetic and percentage progress. This animation was designed to provide clear feedback to the user, reducing their perception of time and reinforcing the idea that their wait was being well-utilized.

To make the HUB interface more dynamic and credible, we implemented microanimations on Home icons that react to user touch. This immediate response enhances the user's sense of control, strengthening the platform's perceived quality.

In addition to making the experience more intuitive, these animations help guide the user's attention, reinforce the product's visual identity, and increase engagement without overloading the interface. A detail that improves usability and conveys care at every point of the journey.

The Insights Center is where affiliates monitor their performance with data, analyses, and tips for continuous improvement. To facilitate the initial contact with this area and ensure that affiliates understand its value from the start, we created a guided tour with educational animations for each of the three main sections.

In the "Get to Know the Insights Center " stage, the animation was designed to make a good first impression with an inspiring tone. The sense of discovery enhances access to the new exclusive space, sparking curiosity and encouraging affiliates to explore the full content to achieve success.

In "Understand How You're Doing" the focus is on conveying clarity and control. The animation reinforces that the affiliate has strategic support and tools to interpret their results with confidence and practicality.

"Track Your Progress" aims to reinforce the idea of continuous improvement. The animation helps illustrate that each effort can yield returns, creating a visual reinforcement that strengthens motivation and encourages recurring use of the platform.

The Signals App is a tool that allows affiliates to customize their own application with a name, colors, and visual identity. It enables offering free or paid plans and sending signals to their audience, facilitating promotion and engagement with new players. I was responsible for mapping, creating, and implementing responsive, high-performance animations optimized for different screens and devices.

The orientation animation for the initial activation of the Signals App was essential to highlight a mandatory and strategic action on the platform. The movement helps focus attention, facilitate understanding, and make the process clearer and more objective. The result was an immediate gain in process comprehension right from the first steps of the journey.

To enhance the experience in the Signals App, a rating system was created where players can give scores from 1 to 5 stars and leave comments. To support this interaction, I developed microinteraction feedback animations that make the process more intuitive, reinforcing the user's sense of active participation.

These scores feed a visible satisfaction thermometer for the affiliate, with colors that facilitate reading: red (poor), yellow (fair), green (great), and blue (excellent). I also created animations for these modals, highlighting the current satisfaction state, which was periodically updated. This quick visualization aids in decision-making and monitoring user perception.

Beyond the visual average on the thermometer, the affiliate can access all comments left by users, filtering by star count. This allows for a deeper understanding of opinions, facilitating adjustments, improvements, and strengthening the relationship with their player base.

I developed a series of content aimed at guiding affiliates on how to use the platform in a practical and didactic manner. I was responsible for defining and implementing the visual standard of the tutorials, ensuring consistency and quality throughout the audiovisual communication.

I created a standardized 3D animation opening to give identity and reinforce the professional tone of the series, in addition to directly working on video editing, audio processing, and the inclusion of subtitles, promoting accessibility and expanding the content's reach. My work was essential in transforming complex information into a clear, engaging, and accessible experience for all user profiles.