Our client, an innovative Saudi company that builds smart indoor positioning systems for shopping centers, airports, hospitals, universities, and other establishments, took on a challenging project to build an indoor navigation system based on iBeacon technology for a fitness center in Qatar. To complete this project, they needed a reliable technology partner.
Our client was entrusted with building a complex, multi-tier fitness center platform (consisting of a visitor app, a staff app, and a web-based admin panel) to support all of the fitness center’s services.
The visitor app — probably the trickiest part of the platform — would be an iOS app that would let users navigate the fitness center, book appointments with fitness instructors, order food within the fitness center, and more.
The client’s team wanted their app to be functional, beautiful, and provide an optimized user experience. They came to Yalantis because of our strong UI/UX design.
Our client’s request was to create a stunning and attractive UI design that would comply with the company’s branding. We also needed to optimize the UX of this complex, multi-tier app to fully demonstrate its potential.
While our customer’s responsibility was to build and deliver the technical part of the Katara app (frontend, backend, and the indoor system), our task was to сreate the UI/UX for the iOS version of the app; at some point, however, guys decided they needed our help with building the frontend part of the application as well. So in the end, our team designed and delivered both the frontend and the design of the customer application.
Starting with UX
This project is a platform designed specifically for staff and visitors of a fitness center. But it was hard to get access to competing apps because of their private nature, which made competitor research virtually impossible.
Luckily for us, our client had a clear understanding of what the app should do and what results it should deliver. But they had some problems defining how all of their ideas could be implemented in one app. They knew exactly how their part — the indoor system and navigation — could be implemented, but the rest of the app’s functionality had some gaps in its logic. This is where our client asked for the help of our UX design experts.
Information architecture and user flows
First, we needed to define the information architecture of the project. Put simply, we needed to create an app structure (or design) that balanced both the end users’ desires and our client’s business needs.
Since we were working on a big and complex project involving numerous user actions, the next logical step was to create smooth and consistent user task flows so the app would feel natural and intuitive and deliver a great user experience.
After the UX stage was over, it was time to focus on visual aesthetics. We had to create an appealing and vibrant look to complement the usability of the iOS app. It was time to think about how colors go together and which fonts would fit the interface best.
We had a brand style guide, provided by our client, with a set of rules we had to comply with to deliver a product consistent with the brand. So we had a logo and a predefined color palette to work from.
Customer app functionality.
Registration and check-in
The app is only available to visitors of the fitness center. To enter the fitness center, members have to show their eCard to a receptionist, who scans it using their version of the application which then automatically checks in the fitness club member. This approach allows the fitness center to keep count of a user’s visits. Moreover, thanks to instant synchronization with a billing system, users can automatically be charged for services and simply enjoy their stay.
Users can also book different classes — yoga, spa, and crossfit — by simply picking an exact category and seeing a list of available classes. They can also see details for each class: the trainer’s name, the date and time the class is usually held, and how many members are signed up. If a user doesn’t have an exact class in mind, they can filter classes by time and date and pick one that suits them.
Users can pay for their yoga, spa, and crossfit sessions right in the application by credit card, debit card, or loyalty points.
The application is designed so that users themselves can decide on their workload and fitness experience for a particular visit. This means that users can even work out without the help of a fitness trainer, choosing from a variety of preset exercises and training programs that are uploaded to the system via the admin panel.
The application also helps users track their workout progress over time. It builds so-called activity diagrams showing how many calories were burned and how many exercises were done during the last workout; it also displays how closely a user is sticking to the current program by showing the percentage of completed exercises and sets.
What if you want to fill up on something during your workout or right after? The app lets you order food right to… your workout machine. Users can order a modest breakfast, an energy drink, or an energy bar if they suddenly get hungry.
After you pay for the order with either a card or loyalty points, the order is handed to a waiter who uses their own version of the app to see order details and notify you about the status of the order. The app also helps waiters navigate the fitness center to find customers.