CrossFit Website Redesign

How might we improve the digital experience for athletes around the world accessing resources of the fitness regimen?

Goal: To design a more accessible, engaging homepage, as well as improve the navigation to invite further exploration into CrossFit.com.

Team: Designer (Me), Project Manager, Developers, Marketers

 
 
 

Discovery Phase

Discovery.png

Research and Synthesis

Data Analysis, Interviews, and Observations

Kicking off the inspiration phase, we conducted a heuristic analysis to evaluate the performance of CrossFit.com and the various subdomains operated by different departments. To understand the competitive landscape, we looked at other content-rich sites, comparing site-wide organization and function.

Complimenting this analogous research, we conducted interviews with CrossFit staff and local gym owners to understand business needs, and combed through online forums to understand user views on the fitness regimen and brand.

Personas and Scenario Planning

As insights emerged during this research phase, we 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.

 

Build Phase

Build.png

Ideation and Prototyping

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!