Sector(s)
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.
About the project
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.
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.
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.
Back to topNew Website Features
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.
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.
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.
Multisite Architecture Solution Comparison Guide
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.
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.
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.
A Dynamic UX For A Globally Diverse Audience
Fitness First needs to communicate with various user personas from diverse backgrounds and cultures in a meaningful way. A huge step towards more effective communication is to build a multilingual website with enterprise-level on-site SEO best practices to ensure that your content is optimized in each language you offer your website visitors. That is exactly what we provided Fitness First with… in addition to a built-in and integrated on-site SEO best practices checklist.
Back to topAll 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
Why Drupal was chosen
Fitness First faced challenges that required complex digital solutions and carefully evaluated all available options. Drupal was chosen as the ideal CMS to support both short- and long-term digital strategy objectives, with Vardot providing the expertise to deliver a secure, scalable, and future-ready platform.
Technical Specifications
Drupal version:
Key modules/theme/distribution used:
Varbase
Varbase is a website builder base distribution that combines powerful editorial features, mobile, lead-generation, SEO, social media integration, and beautiful bespoke designs. Varbase is packed with adaptive functionalities and essential modules.
Varbase was built to reduce the amount of time it takes any Drupal developer to build a high-quality website, it includes over 160 checklists item to implement best practices SEO, performance tuning, security considerations, and best practices in Drupal development.
Varbase is also built utilizing Bootstrap theme, and takes advantage of several Bootstrap-ready modules, all packaged with the base distribution.
Bootstrap
The Bootstrap theme is HTML & CSS, JavaScript framework that is used to create responsive website themes and outlooks. Bootstrap aims to make mobile-first web interfaces.
Data
Data module helps you model, manage and query related sets of tables. It offers an administration interface and a low level API for manipulating tables and accessing their contents. Data module provides Views integration for displaying table data and Drupal search integration for searching table content.
Feeds
Feeds is a pluggable system for importing or aggregating content into Drupal. We used the module to import data from across 20 sources needed to display information on charts and graphs.
