BookFitness Responsive Mobile Web App
BookFitness is a mobile application that helps people find and book the nearest fitness clubs and trainers.
My role
UX/UI designer
Tools used
Figma, Adobe Illustrator, Adobe Photoshop
Scope
Aug. 2022 – proceed
What I did
Competitive Analysis, User Research, Information Architecture, Mobile design, User Journeys & Flow, Card Sort, Sitemap, Usability Study, Product Design
The Problem: How do we help people find and book their nearest fitness clubs and trainers?
The challenge
I set out to develop a mobile application that would help people quickly find the nearest fitness clubs and trainers to keep fit. All in one hand!
The Background
Over the last couple of years, people all over the world have become more self-aware of the importance associated with living a healthy lifestyle. Because of this, fitness has become a trend for millions of people, leading to a rapid increase in the size and popularity of the global fitness industry.
The Industry
The market size, measured by revenue, of the Gym, Health & Fitness Clubs industry is $32.0bn in 2022. What is the growth rate of the Gym, Health & Fitness Clubs industry in the US and Europe in 2022? The market size of the Gym, Health & Fitness Clubs industry is expected to increase 4.2% in 2022.
The Iterative Process of Designing BookFitness
When working on BookFitness, I have adopted the Double Diamond Strategy which breaks the design process into four stages: Discover, Define, Deliver & Develop. I found this process particularly powerful in validating design decisions, allowing enough space for creative exploration while giving a focus point to come back to.
DISCOVER
What's there: Fitness apps and BookFitness
I conducted a competitive analysis of Fitness apps with a focus on UX analysis: to evaluate their navigation, layout and overall usability. This helped me understand what BookFitness had to deliver to differentiate itself from the competition.
Here’s a list of competitors:
BookFit, Orangetheory Fitness Booking, Sport Solution Booking and Transform Fitness Booking.
I also did a detailed SWOT analysis of the competition and found their strengths and weaknesses, which greatly helped build BookFitness’s competitive advantages.
User Research: Can you walk me through your process?
It was time to see what Fitness enthusiasts thought about the competitors. Equipped with the preliminary research discoveries, I conducted 3 user interviews with people who have different levels of experience with Fitness apps. My research goals were:
1. To understand the general attitudes and processes.
2. To uncover what (common) difficulties people might face.
3. To discover if they use any apps or websites to help them achieve their goals.
DEFINE
The Research Analysis: Moving Forward
After the Research phase, I reexamined my assumptions based on the insights from the User Interviews. It was clear that:
• People are looking for an app that will give them the information they need.
• They require an application with good feedback.
• They require the application to be easy and accessible to users.
• They want to find a fitness club that is closest to their location.
• They want to see a Fitness club’s rating and feedback before making their choice.
Revision of Problem Statement
I revised my hypothesis problem statement to align better with the users’ needs and goals.
Fitness apps’ users need to find the right app for their needs. They expect to receive quality service, flexible app, user-friendly navigation, security for their personal data, and this to help achieve their goal.
User Journeys: What would James’s experience with BookFitness be?
Informed by each persona’s experience, attitudes & goals, I have created User Journey Maps to outline the processes needed to achieve their individual goals within BookFitness app. This allowed me to focus on possible critical pain points and plan how to address them in the following design decisions.
User Flows: How would James go about finding a Fitness club and trainer on BookFitness?
I set out to map out their User flows. This step helped me keep the design user-centered, by showing me what pages or screens of the app will be needed from the perspective of my user personas.
Sitemap after Open Card Sort.
Before starting to work on initial sketches of each feature, I visualized the Information Architecture of the app into a sitemap, based on the user flows. The first version of the sitemap was tested through an Open Card Sort.
DEVELOP
Wireframing: From sketches to first clickable prototype.
Ones the Sitemap information architecture was decided, I began sketching paper wireframes progressing them.
Mobile Low-Fidelity Wireframes
Mobile High-Fidelity Wireframes
Usability Study:
Focusing on navigation and main features, I designed clickable prototypes for Mobile versions of the responsive web app. It was tested in a usability study, conducted remotely with 2 users. The issues, discovered in the usability test were addressed and fixed.
Problem
“It doesn’t make sense. I cannot imagine how I will write “Cars” & get Fitness clubs or trainers out of it.” – Nadia
Solution
Problem
“I need additional booking options, such as a chat or training session.” – Nikolina
Solution
Designing the Look & Feel of BookFitness: Style Guide
BookFitness app has a stylish and practical design that aims to help people use it easily and affordably.
I used the Style Guide as a starting point and developed a more detailed Design Language document. It’s purpose is to ensure consistency and communicate the language of BookFitness app to designers and developers.
DELIVER
Final Showcase.
When I started working on this project, my goal was to create an app that would help people looking for a fitness club and trainer to find the right fit for them. One of the goals was the app to search by location as close as possible to save people time. I believe BookFitness app has achieved the goals as it has its own distinctive style and branding but also offers an easy user journey for customers and their health.
