A Seamless Experience Engaging +70K Health and Fitness Enthusiasts!

A peak digital performance matching an outstanding physical performance for Fitness First.

Image
Fitness First Middle East

Fitness First (FFME) is the largest chain of fitness and lifestyle clubs in the Middle East with over 60 clubs across 51 locations and a community of over 70,000 members.

FFME has established itself as an innovative brand that continues to attract and appeal to a diverse audience of healthy lifestyle enthusiasts - and they realized that their digital experience must match their brand’s perception.

Undergoing a digital transformation, FFME needed to revamp their digital presence and make sure all their digital assets are integrated into one online brand network that can be efficiently and easily updated when required.

1

Centralized CMS for 7 Sites

300+

Migrations Safely Implemented

99%

Reduced Error Rate

Time and Energy Being Wasted

Fitness First had a dedicated digital presence in each location. 

These websites operated as silo websites with no interconnection with each other - which made website updates for the content, marketing, and technical teams a cumbersome process that took a longer time than it should.

The effort took to make a single update across those websites had to be duplicated numerous times. Fitness First continued to grow and thus the maintenance of each website is increasingly becoming inefficient and costly.

Static UX and Outdated Tech

The design of the legacy websites for Fitness First was static and limited the marketing and content team to publish updates and pages in a restricted and outdated manner.

Content creation for such a dynamic brand was essential and the more rich media formats became available to them the more they realized that they needed to invest in a CMS for the future.

The gap between the actual experience and the digital experience was apparent to all of their community members who always expected Fitness First to be at the forefront of innovative solutions.

Mobile-First Optimization

72% of traffic to the legacy website was from mobile devices. However, there were factors that didn’t enable FFME to have a mobile-first experience for those users.

Through our analysis of traffic data and user intent; we were able to identify the key points in the Fitness First legacy website that impacted user journeys in a negative way. To enhance the user journey, we usually address this issue in 2 different ways: Either we eliminate the negative factors or we transform it into an opportunity to enhance the UX.

We shortened the JOIN NOW process by eliminating unnecessary steps and combining relevant steps with each other to further enhance the user experience. Much of the information was visualized to make browsing and navigation more convenient for mobile users. The outdated information structure of the website also didn’t help them convert much of the mobile audience due to lack of thought out user journeys.

Image
Design User Journeys and Customer Journeys

Project Discovery and Analysis

To develop and design the optimal Fitness First user experience, our team gathered all key insights into users' behavior through primary research methods such as interviews, competitor analysis, empathy maps, in addition to relevant data from Google Analytics.

Digital Strategy

Image
Empathy Maps

Empathy Maps

Empathy maps were designed for each main target audience member to help tailor their UX based on the right mix of influences, feelings, and motivations.

UI/UX Design

Competitor Analysis

We studied all the relevant local, regional, and global players in the fitness and lifestyle market to compare and contrast best practices and performance to inform our design and development efforts.

Amongst the criteria we considered was the following:

First Impression

Sitemap

Navigation

Design

Content

Identity

After we identified all the relevant strengths and weaknesses of our competition research we realized we didn't need to reinvent the wheel. In short, we just had to transform the Fitness First website into a smarter, faster, and more secure digital experience.

New Technologies Introduced

Engineering: Progressively Decoupled React App

The process of navigating the Fitness First timetable was a cumbersome task for users, especially those who are already members. Best practices for an ideal user experience were obviously required and undeniable - but the legacy website outdated technical features restricted Fitness First to provide a smoother navigation process.

This is where we implemented React.

E-Commerce

A carefully planned user journey for both members and non-members was implemented to ensure that deliberate and relevant CTAs were strategically placed around the website to ensure higher conversion rates and more logical navigation paths for website visitors.

Fitness First members can easily navigate, reserve, and pay for their classes online. Their members can securely make online payments thanks to the integration between their new website and CCAvenue.

New Website Features

Multisite Functionality

Seven websites personalized and managed by one centralized CMS. All websites will share branding and design systems but will retain personalization capabilities for each website audience.

Streamlined Efficiency

Drupal allows multiple teams to upload, personalize, and manage content faster and better than before thanks to the built-in streamlined publishing process.

Continuous Upgrades

Reliable hosting and superior infrastructure allow auto-scaling and continuous upgrades, faster content delivery, and implementation of best practices.

Image
Seamless Integration

Seamless Integrations

Drupal allows for seamless integration with business-critical custom solutions that Fitness First Middle East required. Solutions and tools such as Fisikial, MemberFirst, and Eloqua.

Need CD and CI?

Image
Layout Builder

Unlimited Personalization Flexibility

We reorganized the website layout for a more complex grid system for better utilization of spaces The new Fitness First Drupal 8 website features the all-new and powerful layout builder. 

Layout Builder is a visual design tool. It can be used to create custom layouts for content types, individual entities, and more.

Drupal 8's Layout Builder allows content editors and site builders to easily and quickly create visual layouts for displaying content. 

Ask Our Team About Layout Builder

Image
Jose Bajawi Profile Picture

"All Fitness First - Middle East websites will be upgraded to Drupal 9 in a matter of hours instead of months... the process is much simpler with D9 as it used to require an entire rebuild when upgrading from D7 to D8."

Jose Bajawi - FFME Project Team Lead

Learn More About D9 Migration