A User-Focused Strategy to Deliver a Knockout Web Experience

In this context, we devised a streamlined sitemap to enhance navigation, integrated brand-aligned elements to reinforce BXNG Club’s identity, and introduced a user-friendly membership checkout flow that allowed users to purchase memberships via the BXNG Club website (a feature that was previously abscent).

The BXNG Club is a local gym franchise in San Diego, specializing in muay thai and boxing classes for intermediate and advanced-level individuals seeking challenging workout sessions. The gym prides itself on offering a unique blend of clean facilities akin to Equinox and the intense community spirit found in a UFC Gym. However, the primary challenge lies in modernizing their lead-generation experience to match the quality of their in-person services, especially after the COVID-19 pandemic.

Throughout the project, I maintained open lines of communication with key stakeholders, including the project managers overseeing the BXNG Club website redesign and our developers. Feedback loops were primarily established through weekly, and eventually bi-weekly, meetings with the project managers, who collected insights from various internal teams consulting with external developers. This feedback was then categorized based on its potential impact and resource allocation required, ensuring efficient prioritization and alignment with the project’s success criteria. Additionally, I collaborated closely with the co-UX Designer, the SEO Strategist, and various BXNG Club team members, including owners and administrators, to ensure business and end-user goals coincided with one another.

⚡The Challenge: What strategies can we employ to create a modern, community-oriented lead-generation experience for BXNG Club’s online presence that rivals the quality and connection of its in-person offerings?

1: A fixed timeline of 5 months (designs to be finalized at the end of month 2).

2: Website built on WordPress and integration with ABC Fitness platform for scheduling and membership purchases.

3: Older and less defined brand guidelines.

To minimize assumptions, we conducted in-person observations and interviews with BXNG Club employees. This approach allowed us to gain valuable insights into their existing mobile application, which facilitated event notifications, class schedules, and workout guides. However, the application did not support the reservation of classes or new customer sign-ups. The in-person sign-up process was cumbersome and time-consuming, resulting in missed conversion opportunities due to long wait times at the gym.

1: Difficult to see at a glance what classes were taking place on particular days, locations and times.

2: Users could not sign up for memberships and classes via the website, they would have to drive to a physical location.

3: BXNG Club team members also sought an easier way to create additional pages for the website that consisted of pre-fabricated sections/components that abided by SEO best practices.

🎯Target Audience: Includes younger adults (approximately 27 to 46), primarily men, earning salaries upwards of $85,000. These individuals have previous gym experience and seek to join a closely connected fitness community (they are NOT first-time gym-goers).

Creating personas was a crucial step in our project because it allowed us to synthesize the insights gathered from in-person observations and interviews. These personas represented the diverse characteristics and motivations of our target audience, helping us empathize with their needs and pain points. By having a clear understanding of our users, we were able to design solutions that resonated with them and addressed their specific challenges. Personas served as guiding references throughout the design process, ensuring that our decisions were aligned with the preferences and goals of our intended users.

Designing user flows was a logical next step as it enabled us to translate the insights from our personas into a tangible journey. By mapping out the sequence of actions a user would take to sign up for memberships and access class schedules, we could identify potential friction points and optimize the process. User flows allowed us to visualize the end-to-end experience for all stakeholders and team members, ensuring that the redesign addressed user needs (that were identified in the personas and previous interviews) seamlessly from start to finish.

Creating the wireframes was essential for structuring the layout and content of the website but also for getting buy-in from the client regarding webpage strategies and feedback from our developers to see if particular functionality was feasible within the timeframe. The wireframes also allowed early usability testing of the gym membership sign-up flow and resulted in minimizing the number of steps and consolidating information to related steps in the process.

Building prototypes allowed us to create interactive versions of the user interface for testing the usability of our designs with real users and the client, to collect valuable feedback before moving forward with high-fidelity designs.

Establishing a design system was critical to maintaining consistency and accessibility throughout the website. As the designs evolved, a design system provided guidelines for typography, colors, spacing, and other design elements that acted as a rulebook not only for us but for our client in the future as the site and business expands. The client would spend less time and resources trying to build something from the ground up by having the building blocks already set in place.

With the core objective of aligning the website with the tangible BXNG Club experience and community, our website relaunch centered on refined video content and meticulous visual organization. Addressing a significant concern of the BXNG Club team, we aimed to transcend the previous website’s shortcomings in portraying the premium and pristine ambiance of the physical locations. Through a balanced fusion of elements evoking a tech startup ambiance and the energy of a UFC gym, we managed to deliver an aesthetic that harmonized seamlessly with the brand’s bold color palette and accessibility guidelines. This approach ensured a sophisticated, clean, and engaging interface that authentically represented the club’s identity and resonated with users seeking a contemporary and upscale fitness environment.

👉 Visit BXNG Club

We used the knowledge gained from creating personas and user flows to ensure that the new sign-up process aligned with the logical progression users would expect. Ultimately, this feature offered a secure and efficient way for users to become members, meeting their expectations of a typical sign-up process and checkout.

The implementation of an easy-to-use location-specific class schedule was critical to the success of the relaunch as analytics revealed individuals would frequent class schedules to plan out their weeks. This scheduling feature enhanced engagement and convenience for users by providing them with relevant information about class types, times, and instructor schedules based on their locations, meeting their expectations as gym patrons.

As an addition to this feature, we planned to add the ability to both reserve a spot in the class and grant users the ability to add the class to their calendars. After the initial rollout of the schedule, feedback was relayed back to us from the client, and after discussing with our developers, the update to the schedule wouldn’t be too big of a lift.

The success of the BXNG Club website redesign underscores the power of in-person observation and data collection in understanding user pain points. By starting this project with this approach, we were able to create an impactful solution that addressed key customer concerns, streamlined the sign-up process, and enhanced the overall online experience of the BXNG Club.