Designing a responsive website for a local gym.

The Challenge:
To create a responsive website for Seatte Boxing Gym while maintaining their values and offerings to their community. 

Goals & Objectives
Research and re-design a responsive website for Seattle Boxing Gym that is tailored to both first-time customers and recurring members while keeping the gym’s current branding.

Seattle Boxing Gym

Seattle Boxing Gym (SBG) was founded back in 1990. It’s a single local gym that is built around boxing that mixes cardio circuits and strength training to create a tough yet fun experience for all. Even though it has gone through different management groups in the last 30 years, SBG has been able to adjust accordingly while creating a very strong community in the heart of Seattle.

Role

User Research, Strategy, Interaction Design, UI Design, Prototyping, Usability Testing

Tools

Sketch, Figma, Adobe Illustrator, Maze, InVision

Timeline

2 Weeks | 80 Hours

1. Empathize

To be able to understand how one might create a website that works for possible new customers and recurring members, I had to first understand and identify the goals, needs, motivations, and frustrations those customers feel towards gym memberships in general and specifically towards boxing.

Research Plan

I began by creating a research plan that would help keep me organized and on track for such a quick research phase. My goals were to conduct one-on- one interviews and surveys, as well as contextual inquiries of the current site with current members and possible first time customers. By doing contextual inquiry of the current website, I could find insights and patterns on users’ digital experience with SBG’s current website. I also wanted to study SBG’s local competitor’s website and offerings in order to discover if there could be any advantage that could help SBG stand out.

• Research Types: 1–1 Interviews, Survey, Contextual Inquiry
Total Participants: 11 Total ( 7 Men, 4 Women)
Age Groups: 18–40 year olds (All Millennials)
Boxing Experience: 5 participants

Through the research, I was able to identify some needs, pain points, and motivations of these shoppers that were really helpful.

Interviews & Survey

  • 8/11 participants joined their gym after a free pass was offered.
  • 7/11 participants visited the gym’s website before deciding to contact or visit.
  • 6/11 participants found their gyms through word of mouth or friends.
  • Participants cared about joining a gym that has a good culture and sense of community as well as a variety of exercises.

Contextual Inquiry (For Website)

  • Confusing how group class schedules is being displayed currently. “Too much text. No hierarchy. Hard to tell what time.”
  • All participants agree that it’s not obvious that the first class is free. “It’s currently buried in the FAQ section.”
  • The main homepage has too much content and requires lots of scrolling.
  • No clear call to action for participants to want to join if they visit for the first time.
  • Users have to scroll all the way back up to the top in order to see the main navigation.

Persona Development

Based on what I uncovered during research, I synthesized the findings and created a realistic representation of the 3 key audiences in the form of personas. The personas range from customers who have no boxing experience to those who are more advanced in their training.

Journey Map

It was important to gain insights into common customer pain points when it comes to joining or visiting the gym for the first time. A customer journey map would help SBG step into the customer’s shoes and help them see their gym’s offerings from the customer’s perspective. Doing this could help improve the customer experience for those that visit the gym for the first time who are looking for more information before signing up.


2. Define

Project Strategy

Before moving into the ideate phase, I wanted to make sure that SBG stood out next to the local competition in Seattle when it came to their website. By identifying what the competitors did well and what they lacked, we could help place SBG in a stronger position in the local market. It was important to learn a little bit about what the industry standards were for features in this space before moving forward as well. I performed an in-depth competitive analysis of features, products and services provided for all the direct competitors as well as the indirect ones.

I wanted to still deliver everything in the project goals on time, I created an in-depth product feature roadmap, with features presented in order of priority in terms of development, investment, and importance to business and user goals.

3. Ideate

Site Map

Thanks to the findings from the contextual inquiry during the research phase, I was able to discover ways to improve the current information architecture used on current website.

Interaction Design & Testing

Even though it was important to design a website that was tailored to potential new customers, it was still important to keep the recurring members in mind as they also visit the website regularly to sign up for private and group classes. I identified the main user flows that each persona typically follows when visiting the current website. The flows range from signing up for a group class or private session to finding out more information before deciding to join.


Mid Fidelity Wireframes

Once user flows and information architecture had been established, I began to build out the key pages that would be needed to create the new website. Since this project was to create a responsive website, I was mindful to design the mid fidelity wireframes with sections that easily scaled from different screen resolutions.


4. Prototype & Testing

Once the mid fidelity wireframes for multiple pages were created, I wanted to test the usability of the design before moving forward and creating the responsive pages. The goal was to assess the usability of the web interface design, user flow, and information architecture. In the same fashion as with the user interviews, I started by creating a usability testing plan. This time I recruited people that weren’t part of the gym but that fit the characteristics of the target audience. I created a prototype using InVision and then used Maze to conduct a self-administered usability test that could be done remotely.

Mid Fidelity Prototype

Tasks Assigned

1. Find the cost of a monthly Open Gym plan.

2. Sign up for a Free Class.

3. Find out what you need to bring to your first class or private training session.

4. Find the times offered for private training.

5. Learn more about a coach at the gym.

A total of 14 participants were used for this round of testing. 4 of the participants agreed to jump on a virtual Zoom call and screen share while testing the prototype. Remote participants spoke out their actions and thinking while I observed while making sure I could assist at any point if needed. Participants were timed on how quickly they completed those tasks. At the end of the tests, participants rated each task on a scale of 1(very difficult)– 10(very easy).

Usability test findings can be seen here.

Key Findings

49%

of users accomplished the tasks via unexpected paths.

86%

of users found the website pretty easy to navigate.

Free First Class

CTA on “Homepage” stands out and all users clicked on it.

2 users

pointed out that they don’t like to enter personal information for a free trial.

Key Changes To Make

  • Navigation bar and “Schedule & Rates” page needs to be revisited.
  • Lots of crossovers through pages that confuse the users when looking for information.
  • Users showed that they knew they could find the contact information in the footer.

Having all this feedback before branding is introduced was great! It was important to understand how users navigated the site to find information without having the influence of imagery and colors.

Incorporating UI Design

Since I had already created sections that easily scaled for different screen resolutions, I started to build out the responsive pages with branding and imagery. I then decided to update and redo the prototype on InVision from scratch to showcase the site better for future testing. This was probably the most time-consuming part of the process since I really wanted to have a robust prototype to test.

Next Steps

With more time, I’d like to test and compare the most updated prototype to the one used for the first round of usability and see how it compares. Overall, I tried to create a site that users could easily navigate and find the information they were looking for without having to scroll so much. Below you can see that on the current site (left side) used by SBG, users scroll too much in order to find what they are looking for. On the proposed design, users can easily navigate the site thanks to well-placed buttons and anchor links that redirect the users to other parts of the site. I would also then discuss the final redesign with the main stakeholder of the gyms to make sure it follows brand standards before moving on to development.

Let's make something great!

Contact Me