UX Revamp
Gym user flow & UI Optimization
Project Overview
After spending a couple of months improving my UI design skills, I was looking for a relatable project to test my skills. Having just designed a mobile app, I decided to tackle a desktop application this time.
The user experience of my gym's app and website isn’t exactly a smooth one, with basic information hard to find and a buggy mobile app which was actually the responsive desktop site accessed via mobile rather than a dedicated native app. Many other gym members shared my frustration.
Recognizing that a small local gym might not afford a dedicated native app, I challenged myself to redesign their desktop site for better accessibility and create a sleek, user-friendly mobile app. My focus was on two key user flows: class booking and gym access.
Problem
Both the desktop site and mobile solution were cluttered with information. They had inconsistent visual identities and colour schemes, creating a fragmented experience. This inconsistency caused friction in the user flow for the two most important use cases: booking a class and accessing the gym onsite.
Solution
My solution was a complete redesign of both the website and mobile app, prioritising clear navigation, properly linked buttons, and well-organized information. I aimed for consistency in the UI design of both desktop and mobile elements, focusing on branding and aesthetics such as colour scheme, imagery, and typography. This approach ensured a smoother user experience.
Research
User interviews
User feedback
Competitive benchmarking
Analysis
Research analysis
Current user journey analysis
Design
Flow diagram
Wireframing
UI & visual identity design
Figma prototype
Tools
Miro
Figma
Research
Interviews & benchmarking
I hypothesized the issues myself and interviewed other users to see if they shared my concerns about the website. These were casual, informal chats with fellow gym members between classes. I asked general questions about the website and two user flows in question without mentioning my own issues to avoid influencing their responses.
After confirming my suspicions through their feedback, I conducted a competitive benchmarking exercise. This helped me gain inspiration and see how other gyms and apps addressed similar problems. I kept an eye out for conventions and UI systems that would fit my solution, aiming to create an intuitive and user-friendly experience that matched user mental models.
Define
User journey analysis
I wanted to analyse my user feedback and competitive benchmarking results to ensure I was on the right track with regards to user expectations and conventions of a gym website/app.
In this stage I firmed up the ideas in my head of how I wanted the solution to look and feel. I used it as a first draft before giving it an even deeper look in the design stage. I knew that some of my ideas would likely change down the line.
I wanted to solidify my overall understanding and analyse everything to get a clearer "state of the nation" perspective. This would help me refine my trajectory and plan before proceeding.
I analysed the current user journey of the site and cross checked it against my research findings to understand pain points and where improvements or changes could be made.
The following issues were found:
Desktop UI
An overall confusing and busy UI, complicating the user journey on desktop
App UI
The apps colour scheme and UI did not match the desktop site. Both had inconsistent typographic and visual design elements. Not only a branding issue, but also a mismatch causing confusion and friction in the user flow
Too many menu options in the app and unnecessary info distracting users from their actual goals
Class booking system
A confusing class booking system with poor tap targets
When trying to book a class, users would tap what they assumed was the correct area on screen to input their desired classes but another class or incorrect information would be inputted instead
Booking system was not optimised for desktop
Onsite gym access flow
Too short of a count down in the QR code access system, not giving users enough time to scan the code on site before it expired
Design
User flow diagram
After identifying the issues and areas for improvement, the first design step was creating a User Flow Diagram in Miro. This diagram helped map out how I wanted users to navigate the site, clarify the information architecture, and outline the necessary sections and content for my design.
With this initial structure in place, I had a solid reference point to follow throughout the wireframing and screen design phases. This step is crucial for maintaining focus and providing a visual reference for later stages of the process.
Wireframing
Using Figma, I created wireframes for every screen in both my website and mobile app solutions to enhance clarity before diving into UI design. Since this was my first time designing a desktop website, I explored Figma Community and Dribbble for inspiration, incorporating what I found effective. Some screens underwent multiple iterations before settling on the final version, as I experimented with different elements and components.
During this stage, I used placeholders for imagery and text to prioritise functionality before integrating brand elements and content. I also used this opportunity to improve my skills by replicating and refining new elements discovered in design inspirations, leveraging Figma's auto layout and other features. This allowed me to expand my toolkit for future projects and collaborations. Immersing myself in diverse sources of inspiration was crucial to this process.
UI Design
Once I had decided on my wireframes, I proceeded on to designing the final screens in Figma for both the desktop website and mobile app flows following Material 3 guidelines.
I really enjoyed creating a sleek, modern, and energetic brand identity and look & feel fitting for a martial arts gym. To begin, I chose a colour palette featuring shades of black and grey with a bold red accent. I also established a typographic system that ensured clear visual contrast between heading and body text, capturing the user's attention and enhancing overall visual hierarchy.
Drawing from my passion for Thai culture and Muay Thai, I integrated elements into the design, reflected in the brand name "KHAOTEEP Martial Arts." In the Thai language, "khao" means "knee" and "teep" means "push kick," highlighting two essential techniques in Thai boxing. Additionally, I used darker or black-and-white imagery of fighters and the sport itself to convey the brand's message and evoke the desired tone and emotion
Breakdown of elements designed:
Desktop UI
Full UI & Visual Identity Redesign: designed following Material 3 guidelines, ensuring consistency in colour scheme, typography, imagery, and other elements
Functional Navigation: correctly linked elements with fully functional navigation
Desktop dashboard
Improved Desktop Class Booking Flow
Simplified Interface: Reduced unnecessary information and menu options, prioritising the class booking flow
Prioritised Administrative Tasks: Direct users to the "My Info" section upon sign-in, focusing on administrative tasks for desktop users
Clear Navigation: Easy navigation to the "Book a class" flow from the left dashboard tab
Affordances: Use of element colour changes and clear icons to guide users through the booking flow
Disabled "Book a Class" Button: Disabled until all necessary inputs are completed
Confirmation Message: Display a confirmation message upon successful class booking.
Mobile UI
Mobile UI Redesign: Ensures consistency with the desktop UI
Tap Targets and Buttons: Redesigned following Material 3 guidelines
Prioritise Functional Use Cases: Direct users to the "book a class" section upon sign-in focusing on functional tasks for mobile users
Common Use Case Navigation: clear navigation to booking and gym access flows from the main bottom nav bar
Other Sections Navigation: clear navigation to other sections from the top tab navigation bar
Mobile class booking flow
Simplified Interface: Reduced unnecessary information and menu options, prioritizing the class booking flow
Prioritise Functional Use Cases: Direct users to the "book a class" section upon sign-in focusing on functional tasks for mobile users
Affordances: Element colour changes and clear icons guide users through the class booking process.
Disabled "Book a Class" Button: Disabled until all necessary inputs are completed
Confirmation Message: Display a confirmation message upon successful class booking.
Mobile onsite gym access flow
Simplified Interface: Removed timer, allowing users enough time to scan the QR access code onsite
Quick QR Access: Users tap to generate a QR access code and scan it at reception
Prototype
Prototype
The final stage of the design process involved creating a working prototype of both platforms in Figma to bring my designs to life.
The desktop flow includes comprehensive information for new members and publicity purposes along with a class booking system, should users need to book a class at work etc.
The mobile flow is centred around a user dashboard displaying personal information, a class booking system, and gym access. This approach prioritises essential functionalities for members on the go, focusing exclusively on information and use cases relevant to them. For detailed sport introductions or general gym information, users can refer to the website. Based on personal experience and user feedback, the mobile platform is streamlined to cater specifically to booking classes and accessing the gym.
Tap for Figma prototype flow 1 (desktop)
Tap for Figma prototype flow 2 (mobile)
Next steps
If the project was to progress further, and budget depending of course, I'd like to look into the following next steps:
User Testing & Feedback Iteration: the first thing would be usability testing the final design iteration to ensure the solution is appropriate and aligned with user needs & goals, with hard data and feedback to back it up. This would allow me to flag any issues for improvement or redesign as needed going forward.
Accessibility Improvements: Ensure that the design meets accessibility standards and guidelines and make any necessary adjustments to improve accessibility for all users.
Monitor Analytic Data: after launch it would be a good idea to keep a close eye on user analytics data such as user engagement with different elements and conversion rates of sign-ups etc. to see how users actually use the solution and ensure that any future updates are in-line with both user and business needs.
SEO: Optimize content for search engines to improve visibility and attract new potential gym members.
Learnings
As in my previous project, some design elements underwent multiple iterations as I progressed from wireframes to final medium-fidelity designs. I view this iterative process as a natural part of design, offering opportunities for overall improvement in both UX and UI design skills.
Specifically, to call out the class booking system which I designed, it took some tweaking to ensure I could make the element overall visually appealing, while still displaying all key info clearly and in a user-friendly manner. It was a lot of information to cram into a small enough element.
Having limited experience in this before, taking inspiration from other designers on Dribbble etc. and how they had solved similar issues before was invaluable and allowed me to design a solution with my own personal touch in the final design.
YouTube, Figma Community and a few UX influencers again proved invaluable if I needed more insight into any design theory or best practice, allowing me to upskill relatively quickly and easily. As design is quite a broad, yet personalized discipline in that each designer develops their own unique style, having resources like these readily available is a god send in helping new designers like myself go from theory to practice while developing their own design style.
Figma skills improved: auto layout, components & variants, effects, spacing, layout & baseline grids for mobile & desktop, creating styles & asset libraries.
Thanks for reading
Let's connect!
© Conor Walls 2025
UX Revamp: Multiplatform
Gym user flow & UI optimization
Project Overview
After spending a couple of months improving my UI design skills, I was looking for a relatable project to test my skills. Having just designed a mobile app, I decided to tackle a desktop application this time.
The user experience of my gym's app and website isn’t exactly a smooth one, with basic information hard to find and a buggy mobile app which was actually the responsive desktop site accessed via mobile rather than a dedicated native app. Many other gym members shared my frustration.
Recognizing that a small local gym might not afford a dedicated native app, I challenged myself to redesign their desktop site for better accessibility and create a sleek, user-friendly mobile app. My focus was on two key user flows: class booking and gym access.
Problem
Both the desktop site and mobile solution were cluttered with information. They had inconsistent visual identities and colour schemes, creating a fragmented experience. This inconsistency caused friction in the user flow for the two most important use cases: booking a class and accessing the gym onsite.
Solution
My solution was a complete redesign of both the website and mobile app, prioritising clear navigation, properly linked buttons, and well-organized information. I aimed for consistency in the UI design of both desktop and mobile elements, focusing on branding and aesthetics such as colour scheme, imagery, and typography. This approach ensured a smoother user experience.
Research
User interviews
User feedback
Competitive benchmarking
Analysis
Research analysis
Current user journey analysis
Design
Flow diagram (Miro)
Wireframing
UI & visual identity design
Prototype in Figma
Tools
Miro
Figma
Research
Interviews & benchmarking
I hypothesized the issues myself and interviewed other users to see if they shared my concerns about the website. These were casual, informal chats with fellow gym members between classes. I asked general questions about the website and two user flows in question without mentioning my own issues to avoid influencing their responses.
After confirming my suspicions through their feedback, I conducted a competitive benchmarking exercise. This helped me gain inspiration and see how other gyms and apps addressed similar problems. I kept an eye out for conventions and UI systems that would fit my solution, aiming to create an intuitive and user-friendly experience that matched user mental models.
Define
User journey analysis
I wanted to analyse my user feedback and competitive benchmarking results to ensure I was on the right track with regards to user expectations and conventions of a gym website/app.
In this stage I firmed up the ideas in my head of how I wanted the solution to look and feel. I used it as a first draft before giving it an even deeper look in the design stage. I knew that some of my ideas would likely change down the line.
I wanted to solidify my overall understanding and analyse everything to get a clearer "state of the nation" perspective. This would help me refine my trajectory and plan before proceeding.
I analysed the current user journey of the site and cross checked it against my research findings to understand pain points and where improvements or changes could be made.
The following issues were found:
Desktop UI
An overall confusing and busy UI, complicating the user journey on desktop
App UI
The apps colour scheme and UI did not match the desktop site. Both had inconsistent typographic and visual design elements. Not only a branding issue, but also a mismatch causing confusion and friction in the user flow
Too many menu options in the app and unnecessary info distracting users from their actual goals
Class booking system
A confusing class booking system with poor tap targets
When trying to book a class, users would tap what they assumed was the correct area on screen to input their desired classes but another class or incorrect information would be inputted instead
Booking system was not optimised for desktop
Onsite gym access flow
Too short of a count down in the QR code access system, not giving users enough time to scan the code on site before it expired
Having confirmed my suspicions, I was now happy to move into the design stage.
Design
User flow diagram
After identifying the issues and areas for improvement, the first design step was creating a User Flow Diagram in Miro. This diagram helped map out how I wanted users to navigate the site, clarify the information architecture, and outline the necessary sections and content for my design.
With this initial structure in place, I had a solid reference point to follow throughout the wireframing and screen design phases. This step is crucial for maintaining focus and providing a visual reference for later stages of the process.
Wireframing
Using Figma, I created wireframes for every screen in both my website and mobile app solutions to enhance clarity before diving into UI design. Since this was my first time designing a desktop website, I explored Figma Community and Dribbble for inspiration, incorporating what I found effective. Some screens underwent multiple iterations before settling on the final version, as I experimented with different elements and components.
During this stage, I used placeholders for imagery and text to prioritise functionality before integrating brand elements and content. I also used this opportunity to improve my skills by replicating and refining new elements discovered in design inspirations, leveraging Figma's auto layout and other features. This allowed me to expand my toolkit for future projects and collaborations. Immersing myself in diverse sources of inspiration was crucial to this process.
UI Design
Once I had decided on my wireframes, I proceeded on to designing the final screens in Figma for both the desktop website and mobile app flows following Material 3 guidelines.
I really enjoyed creating a sleek, modern, and energetic brand identity and look & feel fitting for a martial arts gym. To begin, I chose a colour palette featuring shades of black and grey with a bold red accent. I also established a typographic system that ensured clear visual contrast between heading and body text, capturing the user's attention and enhancing overall visual hierarchy.
Drawing from my passion for Thai culture and Muay Thai, I integrated elements into the design, reflected in the brand name "KHAOTEEP Martial Arts." In the Thai language, "khao" means "knee" and "teep" means "push kick," highlighting two essential techniques in Thai boxing. Additionally, I used darker or black-and-white imagery of fighters and the sport itself to convey the brand's message and evoke the desired tone and emotion
Breakdown of elements designed:
Desktop UI
Full UI & Visual Identity Redesign: designed following Material 3 guidelines, ensuring consistency in colour scheme, typography, imagery, and other elements
Functional Navigation: correctly linked elements with fully functional navigation
Desktop class booking flow
Improved Desktop Class Booking Flow
Simplified Interface: Reduced unnecessary information and menu options, prioritising the class booking flow
Prioritised Administrative Tasks: Direct users to the "My Info" section upon sign-in, focusing on administrative tasks for desktop users
Clear Navigation: Easy navigation to the "Book a class" flow from the left dashboard tab
Affordances: Use of element colour changes and clear icons to guide users through the booking flow
Disabled "Book a Class" Button: Disabled until all necessary inputs are completed
Confirmation Message: Display a confirmation message upon successful class booking.
Mobile UI
Mobile UI Redesign: Ensures consistency with the desktop UI
Tap Targets and Buttons: Redesigned following Material 3 guidelines
Common Use Case Navigation: clear navigation to booking and gym access flows from the main bottom nav bar
Other Sections Navigation: clear navigation to other sections from the top tab navigation bar
Mobile class booking flow
Simplified Interface: Reduced unnecessary information and menu options, prioritizing the class booking flow
Prioritise Functional Use Cases: Direct users to the "book a class" section upon sign-in focusing on functional tasks for mobile users
Affordances: Element colour changes and clear icons guide users through the class booking process.
Disabled "Book a Class" Button: Disabled until all necessary inputs are completed
Confirmation Message: Display a confirmation message upon successful class booking.
Mobile onsite gym access flow
Simplified Interface: Removed timer, allowing users enough time to scan the QR access code onsite
Quick QR Access: Users tap to generate a QR access code and scan it at reception
Prototype
Prototype
The final stage of the design process involved creating a working prototype of both platforms in Figma to bring my designs to life.
The desktop flow includes comprehensive information for new members and publicity purposes along with a class booking system, should users need to book a class at work etc.
The mobile flow is centred around a user dashboard displaying personal information, a class booking system, and gym access. This approach prioritises essential functionalities for members on the go, focusing exclusively on information and use cases relevant to them. For detailed sport introductions or general gym information, users can refer to the website. Based on personal experience and user feedback, the mobile platform is streamlined to cater specifically to booking classes and accessing the gym.
Click here for Figma prototype flow 1 (desktop)
Next steps
If the project was to progress further, and budget depending of course, I'd like to look into the following next steps:
User Testing & Feedback Iteration: the first thing would be usability testing the final design iteration to ensure the solution is appropriate and aligned with user needs & goals, with hard data and feedback to back it up. This would allow me to flag any issues for improvement or redesign as needed going forward.
Accessibility Improvements: Ensure that the design meets accessibility standards and guidelines and make any necessary adjustments to improve accessibility for all users.
Monitor Analytic Data: after launch it would be a good idea to keep a close eye on user analytics data such as user engagement with different elements and conversion rates of sign-ups etc. to see how users actually use the solution and ensure that any future updates are in-line with both user and business needs.
SEO: Optimize content for search engines to improve visibility and attract new potential gym members.
Learnings
As in my previous project, some design elements underwent multiple iterations as I progressed from wireframes to final medium-fidelity designs. I view this iterative process as a natural part of design, offering opportunities for overall improvement in both UX and UI design skills.
Specifically, to call out the class booking system which I designed, it took some tweaking to ensure I could make the element overall visually appealing, while still displaying all key info clearly and in a user-friendly manner. It was a lot of information to cram into a small enough element.
Having limited experience in this before, taking inspiration from other designers on Dribbble etc. and how they had solved similar issues before was invaluable and allowed me to design a solution with my own personal touch in the final design.
YouTube, Figma Community and a few UX influencers again proved invaluable if I needed more insight into any design theory or best practice, allowing me to upskill relatively quickly and easily. As design is quite a broad, yet personalized discipline in that each designer develops their own unique style, having resources like these readily available is a god send in helping new designers like myself go from theory to practice while developing their own design style.
Figma skills improved: auto layout, components & variants, effects, spacing, layout & baseline grids for mobile & desktop, creating styles & asset libraries.
© Conor Walls 2025