Turning solo workouts into competitive experiences for runners, cyclists and swimmers
Sportification is a gamified fitness platform that connects runners, cyclists, swimmers, triathletes and weightlifters through challenges, rankings and competitions.
Over 3 months, I worked as a Junior Product Designer, building a complete solution for mobile and desktop.
O desafio
To create a platform that turned physical exercise into competitive and social experiences, motivating people who struggle with the barrier of staying inactive, to maintain an active routine through gamification.
Is/Is Not, Does/Does Not
Before building any interface, I worked with the team and the client to define the product boundaries using the Is/Is Not, Does/Does Not framework. A key step to align expectations and establish what the app should and should not be.
We defined, for example, that the app is not a medical monitoring substitute, does not guarantee specific results, and is not restricted to a single level of athlete. But it is a platform that encourages physical activity through gamification and recognizes user performance.
Flow Mapping
After that, I structured two types of flowcharts to map both the user experience and the system behavior.
User Flowcharts: I mapped the complete navigation journeys, from onboarding to event participation. These flows helped identify decision points, alternative paths and possible friction points in the experience.
Exemplo de Fluxograma de Usuário
System Flowcharts: I documented the logic the system should follow in response to user actions. For example, when to send push notifications, like notifications after user inactivity, motivations to keep training and ranking updates.
Exemplo de Fluxograma de Sistema
Wireframes
Before moving to high fidelity, I created wireframes to validate the structure and information hierarchy of the main screens. This step allowed me to test flows quickly and make adjustments to the project direction with the client, without causing delays in planning.
Gamification
I designed the entire gamification system for the platform, with the goal of keeping users active and engaged in their physical activities.
Exemplos Criados
Score by Sport: Specific score calculations for each sport, considering distance, time and intensity to balance different types of physical activity.
Engagement Mechanics: Real-time ranking of the most active users at events, unlockable achievements with total mileage. I created specific calculations for each sport, considering distance, time and intensity.
Anti-Cheat Validations: I established automatic limits per sport, such as maximum allowed speed, to maintain competition credibility without the need for manual moderation.
Components
I organized the project components by type and complexity: from simple elements like buttons and inputs, to complex ones like event cards and workout dashboards.
Documentation
I documented all features and flows, to make sure developers understood not just the interfaces, but all the validation rules and calculations needed.
Solution
Light Mode
After finalizing the mobile version in dark mode, I adapted the entire interface to light mode, thinking about the different contexts in which users would use the app. Both versions were created so the user could choose according to the moment of the day: light mode for brighter environments or daytime use, and dark mode for lower light environments or nighttime use.
Vera helped me with the visual adaptation of some screens. I established color tokens that would maintain consistency between the modes, carefully adjusting contrasts to ensure legibility and visual comfort in both versions, following accessibility principles.
Desktop Version
With the mobile version finalized, the client requested a desktop adaptation. This expansion involved strategic UX decisions, such as removing features that did not make sense outside the mobile context (like "start workout") and expanding data visualizations to take advantage of the larger screen space.
Learnings
This experience was fundamental for my professional growth. It was my second project as a designer, and the first time I took responsibility as lead designer on a project and worked directly with a client.
Creating extensive but necessary documentation taught me a lot about how to communicate design decisions and system behavior in a way that developers could actually understand.
This project also taught me a lot about componentization. Structuring reusable elements, thinking in variants and states, and organizing components in a scalable way are learnings I have applied to every project since.
However, the project was not developed by the client due to cost, and the lack of validation with real users showed me the importance of testing and research in the design process, especially to evaluate the performance of my decisions, like the gamification, in the real context of users.
Feedback do Cliente
Feedback do Workana