Why Redesign?
Reflect the surrounding student demographic
Many members don't have keys because they're students and don't have a car. They use their student ID card to unlock their dorms, so keeping track of a physical barcode is difficult. When they lose it, it takes time for the employees to create a new one. There needs to be a digital solution to reflect the college-age population.
Increase member satisfaction and reduce customer service calls
Many tasks are not editable in the member portal resulting in higher customer service calls. For example, editing a profile picture and changing payment information. Giving members autonomy to manage their information will increase satisfaction with Colaw Fitness possibly increasing retention and reducing customer service calls which frees up time for other business needs
Relieve cognitive burden on users
The app is not responsive and lacks visual hierarchy which places a mental load on users who are just trying to get to the gym and view their check-ins for the month. A redesign will allow users to quickly find what they're looking for and have a seamless check-in experience.
Barcode
Members are given a keychain barcode to check in at the gym, but some members are college students who don’t own cars or keys. They have to keep track of a loose key tag which takes more time to replace if lost.
The solution is a digital barcode, so members don’t have to worry about losing it or owning a keychain.
Edit Profile
Context
1. When a member wants to change their payment method, the only option is to call customer service which closes at 5 pm. The busiest time at the gym is between 6 pm and 8 pm after members get off work or class meaning calling customer service before they close at 5 pm is difficult.
2. Profile pictures are taken the day members sign up and are not editable. As members' physical appearance changes throughout their fitness journey, they won’t resemble the picture taken on sign-up day. Currently, there is no option for a member to change their own profile picture.
Solutions
1. Give members autonomy to update their payment information at any time of day in the app.
2. Add an edit option in the app where the user can upload or take a new picture.
These solutions will reduce customer service calls, freeing up time for other tasks. This could also lead to a higher member retention rate.
View Check-ins
Context
Members are required to check in at least 12 times a month to keep their subscription at $7 instead of $27, so they frequently log in to view their total.
Problem
The current design is not responsive on mobile despite most members being Gen Z and Millennials who use mobile devices. Members must zoom in on a spreadsheet and search for a small number at the bottom to see their check-in total. This is frustrating especially when there are multiple check-ins to scroll through.
Solution
The solution is to display the total on the home screen, so members can quickly find what they need and view details in calendar view if needed.
Navigation
Context
Currently, there are 2 hamburger menus and no visual hierarchy. There are multiple categories for the same thing and some pages are even blank.
Problem
Members are frustrated with how long it takes to find what they need and confused by the multiple pages that are empty or have an unclear purpose.
Solution
Establish information architecture that makes sense and visually represents it in one menu with a clear hierarchy.
Mobile First Responsive Design
This mobile-first responsive design is optimized for each breakpoint to meet the needs of college-age members who prefer mobile and also older members who prefer desktop.
Navigation changes from Hamburger to a navigation bar. The Logo changes from the image to the full word form. The desktop also has the full check-in view on the home screen.
Setting the Theme
I created 2 mood boards based on the dress guidelines for the gym as well as the gym equipment color and design inside the building. There's a large white wall with inspirational words at the gym which is where the first mood board came from. However, I went with the second mood board because all the equipment and the flooring are black, so this reflected the brand more authentically.
Style Guide
Once I finished the redesign, I created a style guide so that in future iterations I can remember the design specs I need to follow.
