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
Research and Synthesis
Data Analysis, Interviews, and Observations
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. I also delved into the online 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 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.
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