Introduction
Fitny is a fitness and stretching app designed to elevate your workout experience. Acting as a personal digital coach, it offers tailored exercises, expert-led programs, and engaging video tutorials, making it suitable for both home and gym use. The app combines variety, personalization, and convenience to help users achieve their fitness goals.
The Fitny team built the app on their own and approached us to work on branding, graphic design, and creating icon options for the App Store to test and identify the one that drives the best conversion. They also asked us to work on styling the app’s interface.
My role as a product designer was focused on product-related tasks. While the initial request was primarily for external styling, I was also asked to conduct a design audit of the current app. The main task was to identify problem areas, conversion drop-offs, and propose improvements that could be implemented in the new UI to enhance the user journey and overall performance.
Product Designer
Industry
Health & Fitness
Contributions
UX Audit, App Visual Redesign; Product Design; Implementation of New Features; Motion & Graphic Assets.
Timeline
May, 2024 – December, 2024
Business challenge and project goal
The primary goal of the project was to update the app's interface by implementing an effective reskin that solves important product issues and prepares the app for future functional expansion.
To achieve this goal, the following tasks were outlined:
Redesign the onboarding flow to reduce churn rates and increase conversion from installations to trial and subscription;
Rethink workout section to enhance user engagement and reduce drop-offs during exercise sessions.
Prepare the app for new features, including the addition of fitness functionality and gym-based workouts.
Conduct a design review and audit of the current app build to identify issues in the user journey, analyze key metrics (conversion funnel), and propose solutions to address identified pain points.
Design review, audit and metrics assessment
We started the project by conducting a design review and audit. The plan was as follows: first, we analyze the current design, identify problem areas, and determine what needs to be fixed. Then, we create a funnel to test conversion on these identified problem areas. If we detect a drop in metrics at this stage, we propose the necessary changes and then implement them in our design iteration.
App UX audit
I thoroughly analyzed the application screen by screen. For the review, I used a card-based system that I developed during the process. To structure the identified issues, I applied the following prioritization framework:
UX Barriers – Critical problem areas and obvious flaws that may lead to user drop-offs. These issues must be addressed without exception.
UX Issue – Noticeable and objective issues, which could be design-related or purely technical (e.g., missing button states, etc.).
It’s ok, but better fix it – Purely UI-related matters or design perfectionism. These issues are unlikely to significantly affect conversion but can be fixed out of respect for the user experience.
Good – It's not just about finding problems. We also highlight effective solutions and consider how to improve or retain them where everything already works well.
Thoughts – Cards where I jotted down ideas to reflect on and discuss with the team during meetings.
Hypotheses – Cards that emerged from our brainstorming and reflections.
User flow
We mapped out all the app screens into a sequential user flow—from the first login to completing a workout.
I went through each screen in detail and used cards to mark problem areas where necessary. On the Figma board, it looked something like this:
Conversion review and hypothesis
During the audit, we identified numerous problems and shortcomings. Overall, they were related to three key aspects: UI, user behavior logic, and technical issues. On a broader scale, the app left a fairly good impression, particularly due to its well-thought-out structure — a major advantage and a strong foundation for the redesign.
Nevertheless, during team discussions, we formulated two hypotheses based on our findings and the recorded cards.
Improving first entry, onboarding, and personalization
The onboarding process includes more than 20 steps, during which we collect user data to personalize the main screen with exercises tailored to their specific parameters. Since the app operates on a subscription model, improving the onboarding UX could significantly boost trial conversions. Our focus is on enhancing personalization and increasing user engagement throughout the questionnaire process.
The sexy custom icons were created by
Kirill Koniukh
Personalization
We decided to move away from just collecting data and focus on personalization. Our approach emphasizes that we're not simply gathering your information, but doing it specifically and custom-tailored for you, with your best interests in mind. We analyze your data to create a unique plan, made just for you and with care.
It's worth noting that the conversion rate from installs to trial was initially quite good. But why not try to improve it even further?
After completing the entire questionnaire, the user receives a personalized plan generated based on their data. Ideally, they then move on to the trial.
After several months of feature implementation and initial real-world testing, we saw the first results. Thanks to navigation fixes, we were able to reduce the user drop-off rate, and most importantly, increase the conversion from installs to trial.
Workout Process
Another important aspect impacted by the redesign was the workout process. We identified several UI inconsistencies and a few serious UX issues. The development team reported that user behavior during this stage was unstable: there were drop-offs, and some users didn’t complete the workout.
Most of the key problems were related to navigation and the lack of certain UI states. For example, the workout started instantly, without a readiness screen, countdown, or any other intermediate steps. As a user, I might not be ready and not expect the workout to begin. At the very least, I need somewhere to place my phone.
In reality, we just needed an intro screen with a guide, a countdown, or a kind of button to confirm the start of the workout.
Navigation and Workout Control Panel
We completely redesigned the navigation for exercises and created a unique, flexible workout template. To track progress, we adapted the story mechanics and enhanced them slightly. A workout consists of sets, and each set can contain a different number of exercises. This principle forms the basis of our progress bar. To monitor workout duration, we added an interactive timer that combines numbers with graphics.
Thinking Ahead and Laying the Foundation – Gym Exercises
Over the course of several iterations, a fitness feature will be added to the app. Therefore, we've proactively designed the current layout to accommodate this functionality, ensuring we won’t need to make significant changes later.
How is this different from stretching? During gym sessions, users don't need to constantly look at their phones to follow along with the trainer, and they aren’t constrained by time. The focus is on completing the assigned exercise and tracking progress: the working weight and the number of repetitions. In this case, we remove the timer and replace it with input fields that already have default values, which the user can adjust if they don't meet the plan.
Other features and UI enhancements
Home screen and personalized recommendations
On the main screen, we placed a CTA for personalized workout recommendations, leading to the filters. The button is positioned under the thumb as a floating button, ensuring it’s always visible and in an easy-to-reach spot. While the workout catalog is great, instead of having users search through it for a workout that suits them, it’s better to guide them to a customized selection. This is similar to searching for accommodations on Airbnb.
Implementation of New Features → My Plan
As mentioned earlier, we focused on personalization mechanics during the onboarding process. This was necessary not only to enhance the user experience but also to enable the addition of a long-term personal plan in version 2.1. This plan goes beyond simply recommending workouts based on your interests and parameters; it offers a complete workout schedule, with exercises planned out by day.
Custom Calendars
The team developed the app using Flutter, giving us almost unlimited creative freedom. Typically, developers prefer to use pre-built calendar components, but here we were given the green light to create a custom solution. While that was exciting, we didn’t want to reinvent the wheel. The calendar had to be simple and intuitive.
Conditions:
Users can complete only one workout per day according to the plan.
They can also do additional workouts outside the plan via the main screen.
The plan can include 2 to 6 workouts per week.
Users can track streaks and earn rewards for them in the future.
Based on these conditions, we designed several unique states for displaying days in the calendar:
Bright filled circle – today's/current day.
Faint circle – a system state indicating the current day when the user switches to another day.
Dotted circle – a day with a planned workout.
Dots under the circle represent completed workouts:
Pink for stretching
Purple for fitness
Gray for a missed workout.
Fire symbol – a completed day (for streaks in the future).
Additionally, a full calendar view is available for month-to-month navigation.
Project results
We gave the app a fresh new look and laid the groundwork for adding new features. As the product designer, my main goal was to make the app more user-friendly and engaging. After several months of work and testing, we saw some great results. The personalized onboarding significantly boosted the conversion from installs to trials by making the process more fun and tailored to each user. The new workout flow, with easy tracking and progress bars, also helped improve user retention. We identified and fixed problematic areas in the UI, making the overall experience smoother and more enjoyable.
Explore next case
CodeWP
, Web App
Designed and developed the web platform, enhancing its multi-layer functionality to improve user navigation and integrating an AI assistant to streamline interactions.
WIP 🚧