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 advancing the organization’s mission: to deliver a fitness that is, by design, broad, general, and inclusive.

My role: UX, UI, Branding

 
 
CrossFit_responsive.png
 

The Challenge

The goal was to design a more accessible, engaging homepage, as well as improve the navigation to invite further exploration into the site. Through an improved user experience, we aimed to:

— Provide seamless access to a host of resources available to users including CrossFitters, affiliates, and coaches

— Support the objectives of each CrossFit department including Affiliates, Training, and CrossFit Games

— Articulate the value of community in CrossFit culture

The previous CrossFit website


Strategy

Data Analysis, Interviews, and Observations

As lead designer, I collaborated with marketers, UX researchers, and developers throughout the product life-cycle. Kicking off the inspiration phase, I helped conduct a heuristic analysis to evaluate the performance of CrossFit.com and the various subdomains operated by different departments. To gain a better understanding of the competitive landscape, I also researched other content-rich sites, comparing site-wide organization and function.

Complimenting this analogous research, I interviewed CrossFit staff and local gym owners to specify business goals needed to produce a successful product. During this time, I also delved into the impressive online CrossFitter community, noting what people were saying about the fitness regimen, and brand as a whole, on official social media outlets and message boards.

 

Personas and Scenario Planning

As insights emerged during this research phase, I identified the following user personas and their primary goals:

— All Personas: To access the Workout of the Day (WOD) and CrossFit media content

— Beginners: To sign up for a CrossFit class

— Members: To continue advancing on their path to fitness

— Coaches: To acquire Level 1-2 training and certification

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

To create a great experience for all, it was crucial to understand the defining characteristics and goals of each user group. For instance, the context in which a Beginner visits the site vastly differs from that of a long-practicing Member. We imagined a user scenario in which a Beginner does not have a successful interaction with the site; he is intimidated by the misconception that CrossFit is only intended for professional athletes, when in reality, it celebrates diversity and strives for universal scalability. 

 
 

"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

 
 

As this example shows, rounded personas and scenario planning helped us embody a specific perspective needed to challenge assumptions and to consider thoughtfully in the design.

 

Ideation

Information Architecture and Wireframes

One of our goals was to create a universal navigation to seamlessly connect all CrossFit subdomains. Using insights from marketing analytics and stakeholder interviews, I helped restructure the navigation to connect the disparate entities. From wireframes to HTML prototypes, the reconstructed navigation was rigorously tested to ensure a seamless experience from one domain to another.

In creating the homepage wireframes, I produced low-fidelity and high-fidelity wireframes with mock content to help contextualize the experience. Rapid iteration and user testing allowed me to make quick, informed decisions on how to best address user goals, while meeting business needs. Below, I provide an in-depth look at the decision making from wireframes to visual design.

 
 
 
 

 

Visual Design

CrossFit.com was the last major touchpoint with legacy styling, so it was a big, but heavily rewarding challenge to capture the essence of the official brand messaging: show emotion, be authentic, be epic

In line with the new style guide, the typeface is big and bold, styled dynamically so it appears to move within the hero graphic. Complimenting the dark color palette, the brand color red elicits passion and energy that is felt throughout the site. Unlike the branded content on CrossFit Games,  photos on CrossFit.com are largely user-generated, striking a balance between power—in pushing the limits of individual fitness—and vulnerability—in sharing this path to fitness with others.

 
 
 
 

A closer look at the panels

Designing for engagement
The hero depicts the scalability of the program and inclusiveness of the community. In contrast to the official Games site, I used an image of a woman deadlifting at an affiliate gym, cheered on by fellow CrossFitters. By scaling this intimate experience to a cinematic level, the first impression of the site challenges the notion that CrossFit is a male-dominated practice reserved for elite athletes.

As the most widely used resource, the Workout of the Day (WOD) falls right below the headline. The card-based UI displays both the WOD and editorial content, including articles, tutorials, and recipes, allowing users to easily scroll through and digest bits of content all above the fold.

 

Getting started at an affiliate
Course registration was another key user goal. Through an interactive form on the homepage, users can start the registration process here before completing it on the Affiliates subdomain. To demonstrate the scale of CrossFit, a dynamic counter shows how many locations are worldwide, and then nearby once a location is entered. Behind the form, there is an image of an affiliate gym, which rotates among user-submitted images to offer a window into different locations around the world.

 

Becoming certified
To showcase the range of courses available for trainers, and to integrate more of the new branding, this dynamic carousel displays all course badges including Level 1, Competitors, and Kids. Clicking on a badge populates a short description and access to continue registering on the Training subdomain.

 

Defining the fitness program
This area showcases a quote, video, or value prop statements, helping to communicate the mission and values of CrossFit. The default panel is “Fitness in 100 Words,” a fitness manifesto by CEO founder, Greg Glassman.

 

Drawing from the community
This Pinterest-style area showcases the value of community. Users are invited to submit their photos and showcase CrossFit in their lives.

 

Celebrating diversity
Designed to provide accesss to different programs including Beginner, Adaptive Athletes, and Kids, this area offers a powerful visual representation of CrossFit’s mission to deliver a fitness that is broad, general, and inclusive.

 
 

Thanks for reading!