Time
50 hours
Roles
UI/UX Lead, Research, Prototype + Testing
Tools
Figma, Adobe Suite, Zoom
Overview
Mario Mrakovic’s mobile training system was built with one goal in mind: to make elite-level training accessible anywhere, whether you’re on the field, at the park, or training solo. Designed for both young athletes and their parents the app needed to reflect Mario’s proven coaching system in a modern, scalable way.
We began by immersing ourselves in Mario’s training method. After several meetings and deep dives into how he coaches in real life, it was clear that his signature card deck was central to how he communicated drills and techniques. The bold, comic inspired designs, with blue, red, and white colors, halftone textures, and bold fonts formed the visual foundation for the app’s aesthetic early on.
Research & Ideation Phase
Initially, we explored a tiered Level 1, 2, 3 onboarding system to match users to the right programming. But through collaborative discussions, we agreed Mario’s training wasn’t age restrictive. Progression was less about age and more about skill and repetition. We pivoted away from this approach, and focused on his card deck training system format.
Each digital card contained video demonstrations, instructions, focus areas, with an intuitive layout that echoed the real deck.
We wanted athlete's to feel motivated and come back to the app, so we focused on a gamification aspect in addition to daily training and activities. The app would reward consistency, each completed exercise earns points, which unlock new trophies and help athletes level up. Users can equip these badges on their profiles. Below, you can check out the fully customized notification chart for the leveling up system I created:
Points System Trophies
To extend that experience, we also designed Coach’s Corner, where users can follow along with Mario in guided sessions. We integrated gamification thoughtfully: point tracking, badges, and streaks all have visual feedback and built-in notifications. I also created specs for a streak UI and badge unlock system that motivates users without distracting from training.
One major consideration was the environment in which this app would be used. Since most athletes will train outdoors or in motion, we ensured the platform included an offline save option and designed the interface to be clear and usable in active settings.
Prototype & Testing
To make sure development aligned with design, I created a detailed prototype to hand over. This included components, motion design, and interactions. The prototype helped the client also understand the complete flow of the app and allowed us the chance to fix anything before we finalized designs for handoff.
Here is a snippet of the prototype for version 1!
Launch
The Mrakovic Method Training System app is set to launch in 2025. I'm super excited to see how launch goes and hopefully add some more details and success stories to this case study soon after. Stay tuned and thank you for reading!
