Team
PointBreak Labs
Mrakovic Method
Time
50+ hours
Roles
UI/UX Lead, Research, Prototype + Testing
Tools
Figma, Adobe Suite, Zoom
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.
Content Scope and Planning
Although we had a solid starting point with Mario’s physical card deck of drills, translating that into a mobile experience came with its own set of challenges. We needed to design an interface that stayed true to the card-based concept, while keeping it clean, intuitive for athletes, and manageable for the client to maintain. To achieve this, we started planning early, focusing on how to streamline content entry and interaction design without compromising the user experience.
Designing for Future Scalability Without Overcomplicating the MVP
A key challenge was designing a system that was minimal enough for an MVP launch, but flexible enough to grow with the app over time. We needed to consider future features—like additional training programs, advanced athlete tracking, or community engagement—without overwhelming the initial experience. This required careful planning around navigation, component reusability, and UI scalability, so that future additions could be implemented without a full redesign.
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.
After researching the app’s audience and goals, I began wireframing the initial screens. These included designs for the Home (Training), Explore (Follow-alongs and other content), Technique Library (Exercises), and Account/Profile sections.
For the Home screen and workout structure, we leaned heavily on the existing training card system developed by Mario. He had created a deck of cards with drills to help athletes engage more easily and retain information. We integrated this card-based format into the app’s training system, aligning it with the brand’s identity by incorporating their signature red, white, and blue color scheme.
Home, Training Program, View Training, and Home (In Progress)
Initially, we explored the idea of offering three distinct levels for athletes to choose from—Level 1 (Beginner), Level 2 (Intermediate), and Level 3 (Pro). This concept worked well with the design and could be integrated into the onboarding experience to recommend a starting point based on the user's skill level. However, after further evaluation with our teams, we decided to simplify the approach by creating a single, fully comprehensive training system suitable for all ages and skill levels.
This decision significantly reduced the client’s workload, eliminating the need to develop and input three separate programs before launch. Instead, the client created one foundational program, with room for expansion using a slider-based UI. This flexible system allows for additional programs to be added over time as the app evolves.
To ensure development aligned closely with the design, I created a detailed prototype for handoff. This included all key components, motion design, and user interactions. The prototype not only provided clarity for the development team but also helped the client fully understand the app’s flow. It gave us an opportunity to identify and address any issues before finalizing the designs.
As mentioned during the layout phase, this stage also made it clear to the client just how much content would be needed. Recognizing this early allowed us to adjust the design and structure before any major development began.
Here is a snippet of the prototype for version 1!
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!
So… what now?
Work With Me
