Skip links

Sport Class Booking Mobile App:
A UI/UX Design Case Study

In this case study, we will explore the design thinking process behind the creation of a Sport Class Booking Mobile App. This app aims to simplify the process of booking sport classes at various locations and times, facilitating a seamless user experience.

Industry

Sportech

Platform

Mobile app & Web

Duration

6 months

Challenge

Iceberg was approached by Yofitt, a fitness company based in Casablanca, to design an app that would allow users to book classes at over 30 partner gyms in the city. The challenge was to create an app that would address the pain points of gym-goers in Casablanca and provide them with a seamless and convenient booking experience

The process

To ensure that we met our client's objectives, Iceberg adopted a user-centered design approach. We followed a structured process that enabled us to understand the needs and pain points of our target users, ideate solutions, and prototype and test our designs. By prioritizing user experience, we were able to develop an app that is intuitive, visually appealing, and meets the requirements of both the client and end-users.

Empathize‚Äč

  • Stakeholders interview
  • User interview
  • User personas

Define

  • Business Model Canvas
  • Pain points
  • User journey map
  • Brainstorming session

Ideate

  • User flow
  • Sketches
  • Feature ideas list

Prototype

  • Low-fidelity wireframes
  • High-fidelity mockups

Test

  • Clickable prototype
  • Usability testing

Empathize

To understand the pain points of gym-goers in Casablanca, Iceberg conducted extensive market research and user interviews. The goal was to gain a deep understanding of users' needs and empathize with their experiences.

Empathize

Question

What do you like most about using Yofitt?

Answers

Convenience and ability to book classes at multiple gyms.

Question

What do you like most about using Yofitt?

Answers

Convenience and ability to book classes at multiple gyms.

Question

What do you like most about using Yofitt?

Answers

Convenience and ability to book classes at multiple gyms.

Question

What do you like most about using Yofitt?

Answers

Convenience and ability to book classes at multiple gyms.

User Personas

Amin El Aroui

Gym-Goer Gold is committed to a healthy lifestyle, attending gym classes like strength training and cardio to challenge himself and improve his fitness.

Age

35 years

Gener

Male

Occupation

Business Man

Gener

Casablanca

Behaviors

Gym-Goer Gold is committed to a healthy lifestyle, attending gym classes like strength training and cardio to challenge himself and improve his fitness.

Thoughts

Gym-Goer Gold seeks a user-friendly app for convenient and efficient gym class bookings, allowing him to quickly find and book preferred classes hassle-free.

Feelings

Gym-Goer Gold seeks an app for seamless gym class bookings, helping him stay organized and motivated without disruptions.

Motivations

Motivated to improve fitness and track progress, Gym-Goer Gold seeks an app for challenges and goal achievement.

Amin El Aroui

Gym-Goer Gold is committed to a healthy lifestyle, attending gym classes like strength training and cardio to challenge himself and improve his fitness.

Age

35 years

Gener

Male

Occupation

Business Man

Gener

Casablanca

Behaviors

Gym-Goer Gold is committed to a healthy lifestyle, attending gym classes like strength training and cardio to challenge himself and improve his fitness.

Thoughts

Gym-Goer Gold seeks a user-friendly app for convenient and efficient gym class bookings, allowing him to quickly find and book preferred classes hassle-free.

Feelings

Gym-Goer Gold seeks an app for seamless gym class bookings, helping him stay organized and motivated without disruptions.

Motivations

Motivated to improve fitness and track progress, Gym-Goer Gold seeks an app for challenges and goal achievement.

Empathize

Define

We analyzed the gathered insights to pinpoint the problem areas and identify opportunities for improvement.

Pain Points

User Journey Map

Ideate

To generate ideas for the app's features and functionality, Iceberg brainstormed and collaborated with stakeholders and gym partners. Ideation was based on insights from the previous phases.

User Flow

Sketches

Feature Ideas List

Prototype

Iceberg created low- and high-fidelity prototypes of the app's user interface and experience to test and refine the design. Prototyping allowed for user feedback and improvements before moving on to development.

Medium-Fidelity Mockups

Design System

High-Fidelity Mockups

Based on the users' pain points, we have come up with the fetures listed below

Discover

The User Profile page contains of the following elements:

  • Card Layout: Use a clean and modern card layout with thumbnail images, tags, time, gyms, and classes for each item.
  • Grid View: Arrange items in a visually appealing grid view with dynamic tags displayed above thumbnail images.
  • Time-Based Filtering: Allow users to filter items based on time, using icons or labels.
  • Map View: Incorporate a map view with pins representing items based on location.

Schedule

The User Profile page contains of the following elements:

  • "Your Next Class" Box: Prominently display the user's next scheduled class.
  • Filter Options: Include filters for "All," "Pending," "Refused," and "Available" classes.
  • Scheduled Classes List: Display a clean list of scheduled classes, sorted based on the selected filter option.
  • Class Details: Allow users to click/tap for more details.
  • Time-Based Sorting: Optionally, include time-based sorting within each filter option.

User Profile

The User Profile page contains of the following elements:

  • Personal Info Card: Display user's personal information and subscription status.
  • Gym Partners: Highlight affiliated gyms or fitness centers.
  • Share the App: Encourage users to share the app.
  • Navigation: Include user-friendly menu or tabs for easy navigation.

Test

To gather feedback and improve the app's features and user experience, Iceberg conducted user testing and incorporated user feedback into the app's development. Testing was an essential part of the iterative design process.

Clickable Prototype

Conclusion

Through the design thinking process, we successfully developed a user-centric Yofitt Sport Class Booking Mobile App that simplifies the process of finding and booking classes, offers personalized recommendations, and enables users to track their progress and achievements. This case study highlights the importance of empathizing with users, defining clear problems, ideating creative solutions, prototyping iteratively, and testing rigorously to create an engaging and effective user experience.

Explore
Drag