Case Study: How We Created a Mobile App for a Fitness Center

Background

Our client is a large company that has a chain of gyms and fitness clubs across Indonesia. As most people in Indonesia use mobile devices, our client wanted to create a mobile app for their customers.

This mobile app would seamlessly integrate into our client’s existing infrastructure, namely a website and internal management system.

At the beginning of the project, our client’s team consisted of one product owner, a backend developer, and a designer. Later, the team expanded to several product owners and two quality assurance managers.

Our client had never created a mobile app before, and they had no specification at the start of the project

We created a technical specification and provided mobile development and quality assurance. As our client needed a big app in the course of just a couple of months, we needed to distill the main features and create an MVP first.

Our goals

As there were no specifications at the beginning of the project, our goals were to:

• Create a technical specification
• Develop an MVP to a tight deadline
• Expand the MVP later into a full-fledged product
• Integrate the application into an existing management system

We created the technical specification and defined these features for the application:

• Personal profiles
• Activities (booked classes, membership cards, statuses)
• QR code scanner
• Listing of all classes with descriptions
• Information about trainers
• Dynamic scheduling
• Class bookings and cancellations
• Wait lists for group classes
• Maps and routes
• Payment system for classes
• Memberships of different levels and durations
• Internal currency

To make sure we delivered the MVP on time, we chose React Native as our core technology. This cross-platform framework allowed us to deliver apps for both iOS and Android almost simultaneously and nearly halved the development time.

The challenges

1. No specification

Our client had never created a mobile app before, and they had no specification at the start of the project. However, as they already had a website with most of the features we needed to implement, creating the technical specification wasn’t that hard.

2. Tight deadline

This was our first challenge, as we had only two months to develop a mobile app that would work for all of our client’s fitness centers.

3. Complex functionality

Our client wanted to provide an experience in a mobile app similar to that of the website, but some elements of the interface appeared to be too complex.

For example, the suggested personal profile feature was far too complex. It featured:

• Memberships
• Links to other pages in the app
• Internal currency balance
• Invite code for sharing with friends
• Activities, including all purchases, points, and order statuses
• Personal information
• Addresses of gym locations
• Maps with routes, pins, and other features

4. Integration with gyms and fitness clubs

To really be useful for gym-goers, we needed to add mobile-specific features that wouldn’t merely copy the website but would make users’ lives easier and provide them with additional value.

Our solutions

1. We created a technical specification

To be able to plan the development process and provide our client with a detailed estimate, we needed to create a technical specification. As a full-cycle development company, we provided a business analyst who:

• Extracted knowledge and business expectations from the client during an interview
• Created wireframes to show how the user experience would look
• Developed a technical specification with a description of the main features, technologies, and the people responsible for delivery, testing, and acceptance

2. We created an MVP

As we created the technical specification with the client, we determined the features for the app. To meet the deadline, we created a plan for an MVP and added the remaining features to our backlog. The MVP consisted of:

• Personal profiles
• Class bookings and cancellations
• Membership card management and purchases
• Activities

Determining the main features allowed us to focus and plan our time so we could meet the deadline. Also, these features were enough to meet the business goals.

After creating the technical specification, we started the development process. To meet the strict deadline, we expanded our team and sometimes worked overtime.

3. Our UI/UX designer improved the interface

To avoid adding to many features, we involved a UI/UX designer, who redesigned the personal profiles and simplified them. We got rid of the pop-up, which contained too much functionality, and optimized the UX so that a user has instant access to the most important features. We placed the membership card and QR code scanner in the bottom bar according to UX best practices.

We implemented internal currency, and it not only did make payments easier, but it also saved our client money on transaction fees

For easier transactions, we implemented an internal currency. This allowed us to manage payments for memberships and classes much easier without having to access the payment gateway each time a user paid for something. Not only did this make payments easier, it also saved our client money on transaction fees.

4. We optimized the check-in process

We wanted to bring users additional value with the app by letting them use it right in the fitness center. Our client implemented a system where each fitness center has a QR code on the wall. All a customer needs to do to check in is scan that code with the mobile app.

Our team implemented and tested the QR code scanner and integrated it with the CRM so the system can immediately check customers in and charge one training session to their membership accounts. This allows customers to automate the check-in process and frees administrators from this task.

The results

We managed to create an MVP in just two and a half months. Then we spent another two months implementing the remaining functionality and changing the application according to feedback from users that we got from reviews on the app stores and from analytics reports.

Here’s the time our team members spent on the MVP:

These are the technologies we used in the project:

• React Native
• Redux architecture
• Expo
• Axios (for API requests)
• Firebase
• Crashlytics
• Google Maps

We continue to work on this product, integrating new features and supporting the application. We plan to add even more value for users – for example, by providing recommendations on exercise and nutrition.