The Ring

Role: UX Researcher, UX Designer, UI Designer

The Ring is a fictional kickboxing studio with one location in Portland, OR. As a fitness boutique studio it is focused on both fitness fanatics and first time kickboxers. The Ring is looking to grow their client base and depends upon a responsive website design to market themselves to new and old customers alike. I was tasked with branding the studio (name, logo, color scheme) and building a responsive website that would work for new and existing customers alike. 

The challenge? Creating a brand from scratch while maintaining a familiar structure for a fitness boutique/gym website.

Research: Discovery

What do I need to know?

While kickboxing is a niche fitness genre, I knew that research I gathered about people's gym experiences and preferences would translate to the same wants, fears and opportunities for a kickboxing studio. I wanted to know what was the most important aspect about choosing a gym, what information they need when selecting a gym and finally, why would somebody choose a fitness boutique over a large chain gym.

In order to answer these research questions, I decided upon three rounds of research. I would do a competitive analysis to determine how gyms typically branded themselves, and additionally to understand the fitness boutique industry. I would then administer a survey that would help me get a general sense of what the answers were to the above questions, and then I would conduct one on one interviews to understand the motivations and to get context to some of the answers I was getting from the survey. Here are my key takeaways:

Research: Strategy

Who would use this?

After synthesizing my research, I needed a way to humanize the data I had sitting on my computer. While parsing through it, certain patterns and ways of thinking started becoming apparent. Some people were motivated by a challenge, some were looking for fitness education and some people were intimidated by failing at the physical activity or not being fit enough. Therefore, based on those patterns, I came up with 4 personas: Izzy, Jack, Karen and Sandra.

Planning: Organization

How would I organize this?

Now that I had an idea of who my target audiences were and their motivations for going to the studio, it was time to start planning out what features my website would include. The first step into doing so was to do a second round of competitive research. I chose to look at both the most popular fitness boutique studios in Portland and large chain gyms like 24 hour fitness. As one of the challenges of this design project is to build a familiar website (to reduce user friction), my focus now was on how to make sure that industry standards and organization patterns were present within my design.

Additionally, I put together some quickly drawn user flows, so that I could brainstorm how somebody might move through my site. With those and my research I formalized the organization into a site map.  

Design: Low Fidelity Wireframes

What will it look like?

After putting together a site map, it was time to start building the pages that would make it up. I began designing the outlines for the how the site and pages would be laid out without having the style and design from the branding. My focus for these wireframes was to be on visual or video content, consistency and a unique spin on a gym website.

See All Low Fidelity Wireframes

Design: Usability Testing

Does it work?

Once the wireframes were completed, it was important to test the usability of the design. I wanted to test these wireframes, without the distractions of the branding, so that I could understand where people would navigate to find information, and how easy the site was to find what they were looking for.

Design: UI Kit

How should I style it?

After I made iterations to the wireframes, it was time to start breathing some life into them. I began coming up with the branding for The Ring.

I started off by decided upon the adjectives I wanted to describe The Ring. These were: Approachable, Empowering, Passionate, Committed and Intense. I took inspiration from other Athletic brands such as Nike, Adidas, and other fitness boutique studios like Burn Cycle. However, the one thing I always noticed was that fitness brands seemed to look very similar. It was always a black or greyish color contrasted with neon bright colors to create a sense of intensity. I wanted The Ring to stand out more. Therefore, I started thinking about my own background with kickboxing. I took inspiration for the color palette from a pair of boxing gloves that I owned. For the layout elements, I had always admired the design of old boxing posters (and just older posters in general). The look of a newspaper cutout appealed to me, so I tried to create a modern version of an old boxing poster.

PDF of UI Kit

Design: High Fidelity Wireframes

Putting it all together

With my brand firmly in mind, I began designing the high fidelity versions of the wireframes. I wanted the website to look both intense but also approachable while serving the functionality I had built in from the low fidelity versions of the wireframes. I looked for images that spoke to both intensity, but also approachability. I also changed some of the way that the elements were designed in order for them to “pop” out from the page, again, trying to mimic old poster designs.

Info people needed

When conducting my research, most participants wanted to know several things prior when researching gyms - they wanted to know the price, the classes and finally, have an idea of what the gym's atmosphere was like. In order to make this convenient for people, I included all of this information on the home screen.

When can I go?

When considering what information would be needed for members, my research showed that people wanted to know the class schedules and the instructors who taught it and the types of classes. Therefore, I created the below schedule, with the ability to book classes and filter by both class types and instructors.

Approachable

Part of recruiting new members, involves making the website seem both intense but also approachable to new members. Therefore, I wanted to heavily feature a First Timers section. This gives people all of the info they need to know to be able to judge if kickboxing is for them!

Prototype

See it in Action!

I ran a second round of usability testing, and flushed out the high fidelity wireframes. After that it was time to revisit the prototype. Now while the prototype below is somewhat limited, in that not all pages are built out, and several sets of animations are not available for some items (i.e. ideally nav bar would have a clickable and hover state) - I was able to make changes to the overall ease of use of the prototype - take a look!

See Prototype

Reflection

What did I learn?

Learnings
I learned a lot about website organization on this project. I had some assumptions about how a gym website should be organized, and I found out that a lot of those assumptions were incorrect. People have very different ways of organizing information in their mind, and it reinforced how important usability testing was. I especially found this for low fidelity wireframes, therefore avoiding getting too far into the process with an unusable product.

Next Steps
If I were to continue this project, I would want to build responsive prototypes and test my final iterations on the design, along with the responsive counterparts. I would also like to flush out the other pages on my site map that I did not design for.