Anytime Fitness: App Redesign
Overview
App Redesign
Tools
Figma, Miro, Adobe Illustrator, Adobe Photoshop
Role
UX Design, UI Design (Research, Visual Design, Interaction Design, Usability Testing)
Team
Self Directed, with feedback from mentor and peers
Duration
2 months - ongoing (updated 4/4/23)
Objective
As a gym regular of 3 years, I wanted to explore the current Anytime Fitness app and look for any opportunities to redesign the gym goer experience. The app has recently gone through a visual design upgrade but surprisingly the app’s user flow and content direction is not well thought out or mindful of how the user would integrate into their gym routine experience.
The Problem
The original Anytime Fitness app had a confusing architecture that would lead the user to different links and pages outside of the app.
The Coaching page dedicates a display message board for users to be told to ‘Visit Nearest Location’ in person. There is nothing interactive on this page for the user to be able to connect for enquiry so this page is not of use for the user.
The Home page consists of two buttons - ‘Make a booking’ and ‘Reserve Gym Time.’ Both buttons lead to two different pages, switching the user out of the app, opening them to a link to reach the desired location which is disruptive to the user experience. Unfortunately, the content of both buttons are poorly designed as well.
Clearly, the content of the app is out of place and is prioritized incorrectly. An example of this would be the Gym Reservation feature - the gym is known to be 24/7 so there is never a need to reserve a time slot to enter the gym.
Site Map + User Flows
The Current Flow
The overall navigation serves as a disconnect from the user and the app as a majority of its sections led to external download and links that aren’t integrated within the app. It’s important that the user feels a sense of control and a seamless user experience from start to the end of their gym routine.
Disconnect
On the Home section, there is a Book Training button but when clicked on, it open up on your local browser to a new website
To Do List is not connected to anything else and the section is disabled for personalisation
The Coaching Section is a display page to let users know to come into the gym in person to discuss/book sessions. There is nothing else on the page that is interactive or helpful in assisting users about Anytime Fitness.
There is an external app required to download to be able to create a workout in the Workouts section. Even when routine is made on external app, all data is not integrated onto the main AF app.
Goals is in the More… section which is a hidden section. The Goals tab should be a higher priority.
There are overwhemingly many disconnects so I created a site map for both the current and redesign to see what can be cut out and switched around as main features of the app.
The Redesign Flow
The Redesign creates transparency and a clear pathway to be able to create workouts and book classes accordingly.
User Flows
Working on the user flow was initially confusing, there were many features that could be added to each section and that’s where I got carried away, wanting to create an app with high functuality. This is where a prioritisation map would be helpful in eliminating less important features in and focusing on the much needed tools that will users on building a routine and tracking their progress.
Lo-fi Prototype
Lo-fi Prototype
Hi-fi Prototype V1
Feedback
Feels like there’s too many steps to make a workout routine. I prefer somthing like ‘Strong.’ Strong is a gym tracker app.
The top bar seems a bit too big. Probably best to minimize as the bottom bar is more important for the user.
When booking for a class, a calendar would be better and easier to select a date. The sessions can appear below it. But this way is fine too.
Routine Bar on Workout page - I reckon you should make use of this more? Or make it bigger?
Not a big fan of the search section. Should have something like a drop down bar instead.
Hi-fi Prototype V2
Feedback
Feels like there’s too many steps to make a workout routine. I prefer somthing like ‘Strong.’ Strong is a gym tracker app.
The top seems a bit too big. I prefer the
When booking for a class, a calendar would be better and easier to select a date. The sessions can appear below it. But this way is fine too.
Routine Bar on Workout page - I reckon you should make use of this more? Or make it bigger?
Not a big fan of the search section. Should have something like a drop down bar instead.
Key Learning and Takeaways
This personal project has been a challenge to take on, assuming that the problems are so clearly present in the initial design, the answers seemed clear from the start but as I delve into several user testings throughout the proto-typing stages, I’ve encountered many more problems and situations that has led me to constantly taking a step back and looking at it face value.
This project has helped me learn about the importance of establishing a clear map to determine what was the most effecient and seamless to user interface design.