Android Development: UX/UI Design & Frontend Development
A cat-themed gym app that turns every workout into a game — complete a session, earn XP, and watch your virtual cat companion level up alongside you. Scored 100%.
Client
IIE Varsity College
Industry
Health and Wellness
Service
Design and Development
Team
1 Designer + 6 Developers (incl. 1 designer)
Timeline
Ongoing, 3+ Months
Project Context
For our Android development module we had free rein on the final project, and my team combined two of our favourite things, the gym and cats, into a fitness app that plays like a video game. Every completed workout earns the user XP; as they level up, so does their virtual cat companion, turning a routine gym habit into something with a visible, personal payoff. My role covered project management, UX/UI design and frontend development.
Goal
Our goal was to create a gym tracking app that seamlessly blends fun and functionality. By incorporating gamified elements, we aimed to motivate users to improve their overall health in a playful and light-hearted manner — engaging users in a way that feels less like a chore and more like an enjoyable game.
Challenge
Tapping into a playful, game-like register was both thrilling and demanding. This process required thinking outside the typical business logic framework: finding innovative ways to engage users, incorporating gamification elements that are not only fun but also intuitive and seamlessly integrated into the app's functionality.
How I Started
From mood board to shipped app
Research on Pinterest, Dribbble and Behance
I went in with a clear vision already forming from scrolling Pinterest, Dribbble and Behance, noticing that rounded corners, pops of colour and themed visual elements were everywhere in mobile games, but almost absent from gym-tracking apps. That gap became the design brief.
Designing screen-by-screen, then iterating
Once the first few screens landed, the rest of the design came quickly. I'd loop back to earlier frames to tweak them as the system took shape, gathering feedback from the team in regular design reviews before finalising each screen.
Mapping the full user flow
The team was asked to demonstrate the complete user flow using the actual app screens, tracing every step from opening the app to navigating each feature — a screen-by-screen exercise that forced real clarity on how the gamified layer connects to the core workout-tracking logic.
A playful frontend on a serious backend
Vibrant colours and animated cat avatars sit on top of a backend structured for performance and scalability. Well-structured APIs handle workout tracking, progress monitoring and personalised suggestions, with the frontend built responsive and animation-forward so the game-like feel never comes at the cost of smooth interaction.
The Work
Screens & process
Takeaway
The result is a refreshing, playful take on the gym app: vibrant colour, rounded corners and engaging patterns create an inviting, energetic experience, backed by a carefully developed backend that keeps performance smooth and reliable. The project scored a perfect 100%, and it also taught me a lot about Figma's component and plugin ecosystem and about building custom graphics in Photoshop — it remains one of the most enjoyable builds in my portfolio, combining fun, creativity and real functionality.