CrossFit Petworth

Boutique Fitness Studio Website

 

ROLE: Sole Designer
DURATION: Ongoing for over 3 years
TOOLS: Pen & paper, Google Drawings, Sketch, Adobe Photoshop, brute strength
DELIVERABLES: Task analysis, user flows, sketched layouts, wireframes, high fidelity mockups, clickable prototype

NOTE: This website was for my business that I owned and operated. I was the owner, director, and head coach as well as being the sole designer for this project.

 

Summary

ABOUT: Petworth Fitness is a privately owned strength and fitness studio in Washington, DC. I was the owner of the gym and sold it when moving to Seattle.

CHALLENGES: 

  • Our website was the first brand touchpoint of the gym for the majority of prospective clients. It was crucial information about who we were, how to join, and purchasing a membership was easy to find and navigate as our livelihoods depended upon it.

  • I had the extra challenge of designing under heavy technical and financial constraints while also integrating the third party membership management software Zen Planner.

OUTCOME: The first iterations of the site were instrumental in building our membership from zero to over 200 hundred members in two years. Of the 60 members that joined in the first two months, 75% did so because of the website.

LESSONS LEARNED: 

  • I would have demanded a line item in the budget for development from the start. Having the flexibility to include custom coding would have made the checkout flow seamless from the beginning.

  • I learned a great deal about speaking with developers and stakeholders and how to communicate with them.

PROCESS

 
 

DISCOVERY

RESEARCH

Having worked in the fitness industry for several years, I had a good idea of who our users were and what they needed from the site. Based on my expert knowledge, I developed two basic proto-personas with the understanding I may discover more personas as more people joined the gym.

 

PROTO-PERSONAS

Initially, we were serving two different types of prospective members: those who were new to our style of training and wanted to learn more and those who were experienced with it and were looking for a new gym. I had two proto-personas to guide the site layout.

Sean

  • Experienced with CrossFit

  • New to neighborhood, looking for new gym

  • Willing to pay membership for coaching, programming, and community

  • Looking to make new neighborhood friends

Patti

  • Lives in the gym's neighborhood,

  • Looking for group fitness classes for motivation

  • Schedule and price are important

  • Willing to pay more for quality services

  • Supports small business

 

USER JOURNEY

I anticipated that most of our members would be brand new to the style of our fitness training and know that the cost can be shocking. I created the following user journey for Patti so my business partner and stakeholders could have a better idea of what the joining process is like for a prospective member new to CrossFit.

 

USER FLOWS

The site's two main functions included:

  • Educating prospective members about the gym and how to join

  • Providing workout and membership information and profile access to current members

I developed user flows for each of the main tasks. 

 

PROSPECTIVE MEMBERS

One of the key flows for prospective members was registering for a free trial.

 

CURRENT MEMBERS

One of the key flows for current members was accessing their profile to edit membership payment information. 

 

DESIGN

NAVIGATION

To help with the wireframe design, I sketched out the primary navigation of the site. I had to work within the developer's template constraints. 

The organization reflects the important of each section for helping users meet their goals of learning about the gym, joining, and managing their memberships.

 

KEY SCREEN SKETCHES

Quick paper sketches helped me visual the overall layout of the site. They also helped me show the developer how I expected the template to look. We collaborated remotely on this, as the developer was in Oklahoma and my gym was in Washington, DC.

 

WIREFRAMES

I created wireframes of key screens to better show the developer how we wanted to site to look. While there was some flexibility, there were considerable constraints.

 

LAYOUT CHALLENGES:

  • Only certain layout options were available

  • Certain logos were required to be on the site by our affiliate company

  • Budget and template constraints require dictated the number of pages the site could have

The first iteration of basic wireframe flows: 

The navigation is straightforward, allowing users to access the pages of the site through different methods. The purpose was to allow easy exploration of the information offered.

 

MAJOR CHALLENGE

Despite communication and approval from the developer, my layouts were not possible without a massive amount of custom coding.

This was absolutely not in the budget, so I adapted my approach to this layout:

 

Deliver

FIRST ITERATION

The first iteration of the site went live! 

Because I did not have the resources to usability test it before it shipped, I informally collected feedback from members as they joined to improve the functionality as we went.

This was a responsive website.

 

 

 

PAIN POINTS

Zen Planner

Any flow requiring the third party Zen Planner software was redirected to the Zen Planner site including completing registration, making purchases, and updating profiles.

Users reported frustration as once on the Zen Planner site there was no easy way to return to the gym's site to take care of other tasks.

Correcting these pain points required custom coding from our developer and we were not able to correct the issue until our second year of business. While this did not hurt our membership growth, it did impact our retail sales and we had to come up with a work around involving paper order forms.

 

SECOND ITERATION: HIGH FIDELITY MOCKUPS

Over the course of the next few years, I developed mockups of what I would like the site to look like when it was time for a refresh.

Many of my changes were based on user feedback. 

The updated site focused more on the members, including pictures of them in action as well as better integrated social media channels, specifically Instagram.

The goal of the site remained the same: providing prospective and current members easy access to information pertinent to their experience. 

 

REFRESH GOALS:

  • To make information more scannable for users

  • To use the CrossFit Petworth purple as a call-to-action color as well to help establish a more clear visual hierarchy

  • To provide a better idea of the members that make up the gym community

 

OUTCOME

I was in the process of the website refresh when the decision was made to rebrand entirely and took the site in a completely different direction. While I was disappointed, I understood the business needed to make the change in order to stay competitive in the boutique fitness space. 

 

Lessons Learned

COMMUNICATING WITH STAKEHOLDERS

In my experience, it was a large part of my job to educate stakeholders on why certain design decisions were important and worth investing in. Having measurable outcomes from the decisions were key to expanding the budget when the site required customization.

WORKING WITH A REMOTE DEVELOPER

When working with a remote developer, communication needs to be 100% clear about what is feasible and what is not in order to use resources most efficiently. Knowing the exact technical constraints from the outset would have saved much time and effort.

 

REtrospective

If I had to do it again, I would have picked a completely different platform for this site. I chose the company I did because they specialized in building websites for boutique fitness studios like CrossFit Petworth. Being new to owning my own business, what they offered in terms of management and hosting appeared to take much of website maintenance tasks off my plate. It ended up being much more work than anticipated.

I also would have made the development budget more of a priority, giving us space for customization when required. 

Finally, I would have done usability testing before the launch to help me refine trickier flows before trying to acquire new members. While I did gather feedback from member's experiences and iterated as needed, nothing was formally tested and it put us at a disadvantage.