Work

MyFitness App Redesign

UI Design
Visual Design
Prototyping

A visual interaction design project focusing on improving the visual consistency and hierarchy of the MyFitness gym app while preserving its strong functionality.

Project overview

This project was completed as part of the Visual Interaction Design course at the Estonian Academy of Arts. The course aims to help master’s-level design students develop an understanding of visual languages for interaction design, while equipping them with the skills needed to create impactful, high-quality visual solutions.

My Role

Primary UI designer, independently carrying out all stages of the project.

Duration

6 weeks during the Fall semester of 2025.

Tools Used

Figma

Project

Direction

For this project, students were given the freedom to select an application to audit, recreate, and redesign. I chose to analyze the mobile app of MyFitness, a well-known Estonian gym chain used daily by thousands of members. Given its high frequency of use, a well-considered mobile experience is essential to supporting the needs of its user base.

Goal

My personal goal for this project was to identify at least one significant issue within the existing app and mitigate its impact through a thoughtfully designed alternative solution.

Process

This project was built up as a series of smaller challenges. Therefore, I had an opportunity to tackle this redesign step-by-step.

The project consisted of the following 5 stages:


  1. Deconstructing the existing app
  2. Recreating the original design
  3. The design audit
  4. Creating the redesign of a selected screen
  5. Prototyping a selected user flow

Each stage of the process allowed me to dive even deeper into the app’s design, its nuances and the hidden meaning behind original decisions.

Original MyFitness app designOriginal app design

Visual issues

During the first three stages of the project, I identified the app’s primary challenge to be visual consistency. Being a long-time user of the application myself I have never, however, noticed any issues with its everyday functionality. This led me to the hypothesis that these visual inconsistencies may have gone largely unnoticed due to the app’s strong functional performance. Users can manage their gym-related activities without friction, yet from a design perspective, even highly functional applications should follow a well-constructed visual system.

During the recreation and design audit phases I specifically targeted the problem areas of visual hierarchy and layout consistency. Inconsistent typographic sizing made text elements difficult to distinguish, while minor misalignments and off-grid spacing further reduced visual coherence. Although individually subtle, these issues collectively undermined overall visual consistency.

Solution

In my solution i primarily took to an aesthetic lens to really focus on the occurring visual inconsistency issues. A few exeptions of functional changes did also surface through a couple repositioned elements.

My solution targeted these visual issues by starting with a more hierarchical typography system. Due to MyFitness using a a generally commercial typeface of Aktiv Grotesk, I decided to recreate and redesign using the relatively similar Roboto typeface with a 2% letter spacing to imitate the original design at a maximum.

After recreating and learning the original design with the Roboto typeface, I created a mini typography system to follow in my redesign. This system features two styles for headings, two styles for subheadings, one style for body text and three styles for buttons. Some of these styles, like the ones for buttons, were kept from the original design, and others like headings and subheadings were modified to increase visual hierarchy.

Typography systemTypography system

Additionally I decided to follow a more coherent spacing system. All content sections are now 32px apart from each other and all list, card and other elements are 16px apart from both each other and also from their respective section headings.

Low fidelity prototype

Before developing a more detailed prototype of the new layout, I began with a low fidelity prototype to work through the fundamentals. This prototype showcases the updated typographic system and the improved layout.

Additionally the in my opinion redundant CTA before the button for booking a group training was removed for reducing visual clutter. As a final change, the previously icon-only button for viewing club capacity was moved to the top of the screen, where it is thematically grouped with the related information about club visitation and aligned visually more consistently with other buttons of similar importance.

High fidelity prototype

When going into high fidelity prototyping, the brand color scheme was kept the same to respect the original design choices, that do seem to be highly effective.

The high-fidelity prototype was built using modified versions of existing components from the recreation stage, applying the same layout decisions as described earlier. As part of the process, and in line with the encouragement to test the new solution, I conducted some casual usability testing to identify potential gaps in the design.

The testing revealed an unnoticed issue: after relocating the club capacity button to the top of the screen, two narrow buttons were positioned too closely together, which could cause usability issues. This brought up a reassesment of each button’s necessity and placement. In the final solution, the button for adding a voucher, along with the explanatory text next to it, was moved to the bottom of the screen into a modified Gift Cards and Vouchers section (previously Gift Cards). This change improved thematic grouping while resolving the button positioning issue as well. Based on additional feedback, the previously removed call-to-action was reintroduced by clarifying the button label. The booking button text was updated from “Broneeri” (Book) to “Broneeri treening” (Book a class), making the action more explicit and easier to understand.

Low fidelity wireframeLow fidelity wireframe
Color schemeBrand color scheme

Impact

This redesign demonstrates how strengthening visual structure, without altering core functionality, can significantly elevate the overall look and feel of an interface.

A clearer typographic hierarchy and a consistent spacing system improve visual clarity and scannability, making content easier to read at a glance. Grid alignment and more intentional grouping result in a cleaner, more cohesive layout that feels structured and intentional.

While the original app was already highly functional, this project highlights how a well-defined visual system can refine an existing product, enhancing its visual coherence and overall polish.

Original designOriginal Design
Redesigned interfaceRedesigned Interface