CrossFit

An in-depth retrospective on the website redesign

 Working closely with CrossFit Inc., my team and I at Ironpaper worked on the first website redesign for CrossFit in over 12 years.  We aimed to improve the web and mobile experience for CrossFitters worldwide, while remaining true to the organization’s mission: to deliver a fitness that is, by design, broad, general, and inclusive.

My role: UX, UI

 
 
CrossFit_responsive.png
 

The Brief

For phase 1, the project scope entailed designing a more accessible, supportive, and engaging site starting with the homepage and navigation; in that quest, we sought to achieve the following goals: 

 Provide access to information and resources available to CrossFitters

 Articulate the value of community in CrossFit

 Support each branch within CrossFit Inc.

The previous CrossFit website


Strategy

Research and planning

To initiate the discovery phase, my team collected analytics and performed a heuristic analysis of the main site and the subdomains under which the branches of CrossFit Inc. operate.  We also conducted a comparative analysis, observing the site structure and layout of other content-heavy sites.

Additionally, we interviewed CrossFit staff and local affiliate gym owners to better understand business and user needs.  This allowed us to identify the following user personas and their primary goals:

— All personas: access the Workout of the Day (WOD) and media content

— Beginners: sign up for a CrossFit class

— Members: continue on their path to fitness 

— Coaches: acquire Level 1-2 training and certifications

— Affiliates: feel supported by CrossFit Inc. policies and principles

A common misconception is that CrossFit is reserved for professional athletes, when in reality:

 
 

"While CrossFit challenges the world’s fittest, the program is designed for universal scalability, making it the perfect application for any committed individual, regardless of experience. We scale load and intensity; we don’t change the program. The needs of Olympic athletes and our grandparents differ by degree, not kind."

Source: What is CrossFit

 
 

With this understanding, it was crucial that our team addressed these possible objections of beginner athletes.

 

Information Architecture and Wireframes

Since CrossFit.com would essentially serve as a central hub for the different subdomains, our team needed to develop a universal navigation across all subdomains.  l aided in the the creation of the information architecture and mapping out of user flows.

As lead designer on this project, I produced wireframes in the form of sketches and wireframes with mock content.  Rapid iteration and internal user testing allowed us to make quick, informed decisions on how to best address the goals of all key personas.

 
 
 
 

Visual Design

Moving from wireframes, I was able to flush out visual design working within the existing CrossFit style guide.

The corporate typeface is big and bold, styled dynamically so it appears to interact with the graphics. Complimenting the neutral base color palette, the brand color red elicits passion and energy throughout the site. The photography is in line with the official graphic language: show emotion, be authentic, be epic.

 
 
 
 

A closer look at the panels


Community and utility – all above the fold

Rather than using an image from the CrossFit Games, I used this image to provide a cinematic representation of the scalability of the program and inclusiveness of the community.

Since it’s one of the most important aspects of CrosssFit, the WOD is prominently accessible above the fold. After much iteration, we decided to use a card-based UI for the WOD and editorials, allowing users to quickly digest media content while also experiencing the branded content.

 

Accessing the affiliates

Since course registration was one of the primary user goals, we decided a form would help users get started by allowing them to locate a gym right from the homepage.

To demonstrate the scale of CrossFit, I designed a dynamic counter with a button to continue the process on the Affiliates subdomain. Behind the form, a background image of a user-submitted photo represents a window into a gym location.

 

Getting started with training

To showcase the range of courses available, I proposed the course badges would enlarge on hover in a dynamic carousel. Clicking on a badge would generate a short description and a button to continue the process on the Training subdomain.

Much like the counter in the previous panel, this small interactive element offers a delightful moment to an otherwise content-heavy section.

 

Defining the fitness program

Designed to demonstrate the mission and values of CrossFit, this panel is an opportune area for a quote, video, and other value proposition statements. The full-width background image momentarily breaks the alternating panel structure, allowing users to pause and digest the utility-based content preceding it.

 

Drawing from the community

Speaking to the value of community, this Pinterest-style area showcases social impact. Users are invited to submit their photos and showcase CrossFit in their lives.

 

Celebrating diversity

This area was designed to demonstrate and provide access to the diverse programs that CrossFit offers. These categories, including beginner, adaptive athletes, and kids, serve as a powerful visual representation of CrossFit’s value to a fitness that is truly broad, general, and inclusive.

 
 

Thanks for reading!


Previous: #PutTheNailInIt / Next: Nach der Arbeit