A Mobile-Centric Gym Website Design

A user-centred gym website design that applies UX and UI design principles, focusing on a mobile-first approach with responsive adaptations for tablets and desktops.

User Research

A survey and interview were conducted with an audience aged between 18 and 35 years. 60% of the participants are female, and 40% are male. 50% of them use the gym website to gather information before registering. The most important information they want to see on a gym website includes membership packages and prices, class schedules, facility photos, testimonials, and trainers’ qualifications. They also desire features such as online class booking, progress tracking, and workout and nutrition tips. 100% of users access websites via mobile phones.

For this project, I will be redesigning an existing gym website. Based on the survey results and user interviews, the e-commerce section will be removed, as most users prefer to purchase products in person during their visit to the gym, rather than online. The redesign will focus on three pages only: the Home, Timetable, and Members pages, optimized for mobile, tablet, and desktop views.

UX and Wireframes

Mobile Layout for LTR and RTL

Tablet Layout

Large Screens Layout

Refined UX

Major changes after testing:

On the homepage (for mobile and tablet), workouts are now fully listed, so users no longer need to drag the screen to view more workouts without knowing how many are available.
On the homepage (for mobile and tablet), testimonials now appear in a carousel, and a Read More/Less button has been added.
Timetable page: The color code for classes has been moved to the top, before the class listings.
Timetable page: Filters (for class type, intensity, and coach) are now hidden in an expandable filter button.
Timetable page: The week of the schedule is now displayed for clarity, with the option to move between weeks.
Avoided stretching elements on larger screens.
Right-to-left (Arabic) screens: The hierarchy of content has been improved.