Client

PlayFitt is a fitness tracker game that gets you addicted to healthy exercise habits. Together with Justin Evans, Rico Rica, and Alexander, I contributed to the design of hundreds of screens & components; created and maintained the design system ensuring its orderliness, consistency, and automation.

Solution

To keep up with the fast pace of the startup and deliver world-class designs that would ultimately be featured in the App Store, we spent nearly two years working on PlayFitt, constantly learning something new every day. We immersed ourselves in Apple lectures, read countless articles, and gained valuable insights through daily practice. As a result, we had created a scalable design system that significantly improved the development process.

Challenge

"Hi, we are building an IOS game in the health and wellness space and need someone who is super killer at figma to help us. We are trying to create a new market and to change our users life for the better. The means we need to be rigourous and adventurous in our approach to design.

We care like crazy and need you to as well."

Comprehensive design system

The design system was completely reimagined and developed from the ground up as a modern, modular, and automated collection of components. It helps designers and developers to create interfaces with greater efficiency, consistency, and speed, significantly reducing development time. The system comprises thousands of individual components and detailed guidelines, providing a robust framework that ensures effective collaboration.

Modular components

We implemented a modular design approach by breaking down the interface into smaller, reusable components, which can be easily combined and customized to build more complex layouts. Using the atomic design system, we organized these components hierarchically—starting with basic elements like buttons and input fields (atoms) that combine into larger components (molecules, organisms, etc). 

Vivid & accessible game UI

The fitness app's vivid UI brings a dynamic and engaging experience to users by incorporating gamified elements that make tracking workouts and progress fun and motivating. With bold colors, playful animations, and interactive features, the interface feels cool and energetic, inspiring users to stay active. Progress bars, achievements, and rewards enhance the sense of accomplishment, while the intuitive layout supports additional accessibility for all users.

Gamified experience and visual system

The product was designed as a fitness-first experience wrapped in a game-like environment, where progress, rewards, and social feedback play a central role in user motivation. The interface combines functional fitness tracking with playful visual elements: avatars, collectible items, leagues, bonuses, and animated feedback states.

Progress, rewards, and motivation

User progress is communicated through multiple layers: stats dashboards, weekly goals, streak indicators, and milestone screens. Leagues and leaderboards introduce a light competitive layer without overwhelming the experience. Rankings, badges, and trophies are visually distinct and easy to scan, ensuring that competition feels motivating rather than stressful.

Inventory, collectibles, and rewards

The inventory screens showcase unlocked items, outfits, and collectibles earned through activity. Bonus states, reward cards, and milestone screens use distinct shapes, gradients, and motion-ready layouts to clearly differentiate achievements from regular content.

Leagues, competition, and social feedback

League and leaderboard screens introduce structured competition. Rankings, user positions, and progress toward the next tier are visually emphasized using contrast, spacing, and clear hierarchy. Social screens integrate playful visual elements such as reactions, icons, and lightweight animations.

Active session

While doing an exercise, the user is accompanied by visual and audio instructions and active, playful endorsement. In addition to that, the screens show progress and technical hints to help users navigate through the flow. The “Swipe to finish” interaction is there to prevent accidental clicks and provide a satisfying UX full of responsive animations.

Rewards

A little casino-like screen was developed in which users can win trophies and coins. Special celebratory screens, jackpots, cards, and scratch animations were designed with the team to make the experience exciting and rewarding.

Gift cards

Playfitt rewards users with real gift cards, redeemable for apparel, food, or charitable giving. The platform partners with a broad selection of trusted brands such as Bombas, Aesop, Allbirds, Cotopaxi, and Starbucks, offering exciting rewards that fit any lifestyle.

Audio packs

Beyond gift cards, we developed a diverse set of audio packs that elevate workouts with voiceovers performed by famous actors and iconic characters. By pairing physical activity with recognizable voices and playful delivery, these packs make each exercise feel more personalised.

Exercises

Playfitt exercises include a wide range of easy-to-follow activities designed to support overall health and well-being. Suitable for any mood and fitness level, even simple movements such as dancing count toward staying active and earning rewards.

Boosters

The boosters were designed as dynamically evolving cards that enhance the rewards users receive with each exercise. As users level up, their progress is visually reflected within the cards, which feature exciting animations and a distinct final max level state.

Premium upsell

To increase adoption of the Premium subscription, we designed multiple UX flows and UI screens that encourage users to upgrade their experience at key moments. Through ongoing research and iterative testing, these efforts helped Playfitt achieve a significant lift in conversion while establishing Premium as a feature set with a clear and distinctive visual identity.

A/B tests

We regularly conducted A/B testing to validate that the most effective layouts and interaction patterns were deployed. This ongoing optimization helped reduce friction throughout the user experience, ensuring a smooth and intuitive journey from initial onboarding through long-term engagement.

Canadian Cancer Society

Playfitt partnered with the Canadian Cancer Society, the largest national cancer charity in Canada. The familiar Playfitt experience was adapted into a fundraising event, allowing users to contribute through their active lifestyle by taking part in a micro-workout challenge.

Rainforest Alliance

The collaboration with the Rainforest Alliance enabled users to support and protect 50 square feet of rainforest for every minute they danced. We designed event-specific exercise cards and introduced unique rewards to reinforce participation.

Organised Figma file

We prepared a meticulously organised Figma file that supports styles, links, typography, documentation, and branches.

Well-organised library

Components, styles, effects, colors, font specifications, all prepared in a carefully organised file. All layers were named consistently, and all components can be reconfigured to fit into different app contexts.

Accessibility and dynamic type

Accessibility was treated as a first-class design constraint, not a secondary enhancement. All typography decisions were built in accordance with Apple Human Interface Guidelines and Dynamic Type best practices, ensuring the interface remains usable and visually consistent across different accessibility settings.

Typography scaling strategy

All text elements were mapped to a custom typography table derived from Apple’s Human Interface Guidelines. While most elements scale linearly with Dynamic Type, certain components require constraints to avoid breaking layout logic. For example, body text was allowed to scale naturally up to a defined accessibility size threshold, after which further scaling was intentionally capped.

Design

Throughout the project, we rebuilt the design system from the ground up, establishing a scalable foundation for the product. Thousands of modular components were created to support consistency, flexibility, and rapid iteration across the app. In parallel, we designed a wide range of screens and user flows that unified the experience and gave the product a cohesive and recognizable visual language.

Contribution

In close collaboration with the team, we helped drive significant improvements across several key business metrics. These results are documented in the data presented below and reflect the impact of our design and product decisions. If you would like to explore the details in greater depth, please reach out to request access to the full report.