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
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.
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.
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