A leading health club industry pioneer, 24 Hour Fitness serves around 4 million members in over 500 clubs across the world. With an unwavering dedication to help its club members achieve their fitness goals, 24 Hour Fitness offers fitness solutions for everyone interested in leading a healthy lifestyle by providing umpteen options like dedicated personal trainers and specialty group exercises.

The fitness club collaborated with [x]cubeLABS to build an app to give members access to exclusive club information and fitness tools at the palm of their hand. The result was My24 which enables members to search for nearby 24 Hour Fitness centers, browse through class schedules, and learn more about a personal trainer.

Their main requirement from [x]cube was an app which could help them retain and engage their members to upgrade/renew the membership. They also wanted an analytics system integrated into the app to determine reasons for high attrition rate and other issues.

What Did We Do?

24 Hour Fitness had a 1.0 version of the app and wanted it revamped completely. To elevate the look and feel of the new version, and make it more attractive and user-friendly - especially in terms of the UI - our Design team worked closely with them, had brainstorming sessions, and came up with revisions for the new app version.

We've completely revamped the app, building most of it from the scratch using iOS Objective C and Android SDK. And to successfully integrate it with their backend server, we've used the documentation on APIs provided by them.

When users navigate through a club, they get the details of that club, schedules, etc. As the layouts for tablet and mobile are different, we built both separately while making best use of the tablet landscape.

What's Unique About My24?

The app adds value by enabling members to search for 24 Hour Fitness centers throughout the U.S., especially when traveling. A few web pages have also been integrated into the app so users can log in and check their account details. Essentially, if the users register with one center anywhere in the U.S., the app helps them to locate a center in other cities and use it, thus giving members more flexibility and engaging them better.

Find A Club:
Continue your workout session even while traveling. Search for a club anywhere in the U.S.

Class Schedules:
Check the class schedules from anywhere, anytime.

Know Your Club:
Provides club information, schedules; check pictures to know amenities available and equipment provided.

GPS:
Uses device's GPS to find a location near you.

Membership Management:
Allows users to signup, create a favorite 'My Clubs' list, review and upgrade memberships.

Social Media:
Integrated with Facebook, Twitter and Foursquare.

Integrated Calculators:
Use various calculators to check out your BMI, calorie intake, etc.

Watch Videos:
Make use of the tutorials and fitness videos available on the app.

DESIGN SPEAK
From a monotonous web page look to a dynamic app feel, My24 had come a long way as we revamped the design and the UI completely. The modifications were done after careful thought and consideration on what should go where, and features that need quick access were put on the home screen.

Our designers followed a tile-based approach on the home screen to incorporate around 12 icons which are part of the app. In keeping with the 24 Hour brand colors and logo, we've used blues (and red in a few places) to ensure the app reflects the brand well.

An unappealing UI/UX coupled with random crashes and bugs along with an ineffective support team were some critical issues with the existing app. The other major concern was the low turnout rate at classes despite advance bookings made.

In terms of UI, the implementation of animations were a bit complex. A few design elements were incorporated by the designer wherein when you tap on one icon, the rest of the icons disappear one by one. So we needed to randomly animate them while making sure that the animation plays out completely besides taking care of the time-delay. Blocking the UI and navigating was a bit of a challenge.

We had issues with 'time' when APIs related to Class Schedules were called. Schedules normally would show classes for a week, next few days, etc. But while creating a key based on the timestamp, we noticed that if the timestamp is deviated then the server wasn't showing any schedules due to the key error.

The original code of version 1.0 and the API documentation weren't useful and so we had to build it from the scratch. At some places, we had to go through the old code & existing APIs and utilize them as per our requirement - a challenge that we managed to overcome successfully.

After thorough brainstorming we came up with a solution to tackle the delay issue for animations. It was a simple tweak of disabling the user interface while the animation was played out. Since it wasn't a critical app like a healthcare app, the delay was okay and the animation looks amazing.

Our solution of integrating a 3rd-party time service, which gets the time from a time server when the app gets to the foreground, to take care of time difference proved to be quite beneficial. By doing this, we calculated the difference between the time on the device and on the server, considering the time zone as well. That difference was added before calling the API and schedule is fetched accordingly.

The main USP of the app is the UI which our designer team built successfully. It's a fantastic design which won the app the W3 Silver Award and the Davey Award.

24 Hour Fitness promoted the app to its members and since then, they have reported a 10% increase in memberships. As the users were happy, the customer churn came down by a significant 12% after using the app. It also received some positive feedback. The app's rating in the store increased from 3.3 to a significant 4.6 placing it in the top 10 apps in its category.