ATK Navigation

Redesigning the IA and navigation for the affiliate toolkit

Context

The CrossFit Affiliate Toolkit is an online tool for CrossFit Affiliate (gym) owners and coaches.

Features include Programming (CAP), business and marketing resources, event information, and more.
Relatively low usage/adoption
Most users come for Programming (weekly)
No historical product strategy or roadmap

Business Goals:

↑ gym retention

↑ new gym growth

Hypothesis

Improving the Affiliate Toolkit experience will improve the perceived value of CrossFit affiliation, thereby driving retention.

Problem

The Affiliate Toolkit is our primary digital offering to affiliate owners, but no investment in making it a high-quality software product.

User Problem

It didn’t do a good job of representing the offerings we have today, nor provide space to easily highlight future offerings.

Business Problem

ATK didn’t provide a foundation to help internal teams achieve their goals.

Process

Discovery research

Discovery Completed Heuristic eval + user interviews during generative user research study.

Internal workshops

Ran stakeholder workshops to distill requirements and build team trust.

Prototype

Built HTML/CSS/JS prototypes to share interactions and use for user testing.

User testing

Met with 1 user - had them walk through the new prototypes and share their thinking and feedback.

Discovery research

Heuristic eval of the toolkit revealed several usability issues with the existing navigation structure and functionality.

User interviews highlighted that the navigation and IA are confusing and unclear to users.

Internal workshops

Building on the initial research, we worked collaboratively with stakeholders to brainstorm naming and grouping of navigation items.

UX Improvements

Ensure a user knows where they are and how they got there by adding active states to nav items and displaying IA hierarchy in the menu.
Increase screen real estate above the fold by removing bulky top-nav and streamlining with left-nav (desktop) and bottom nav (mobile).

Rename confusing elements to set better expectations with users.
Reorder navigation to surface top user destinations (programming, events) to ensure users are able to easily find what they are looking for
Surface additional offerings (eg. marketing, educational resources) to more easily highlight the valuable offerings CrossFit is providing to affiliates (especially on mobile)

Prototype

Based on research outcomes and stakeholder workshops, build some clickable prototypes.

These designs allowed us to test the new navigation structure (left sidebar), as well as concept test some content and naming ideas that have been discussed internally.

Based on research outcomes and stakeholder workshops, build some clickable prototypes.

Mobile

When designing for mobile, we explored a variety of options. Initially I advocated for an app-like bottom bar tabbed navigation. However, after weighing the pros and cons the team ultimately decided to go with the hamburger menu as it was more scalable, lower dev effort (faster shipping time), and was a known and familiar UX pattern for mobile web.

When designing for mobile, we explored a variety of options. Initially I advocated for an app-like bottom bar tabbed navigation.

However, after weighing the pros and cons the team ultimately decided to go with the hamburger menu as it was more scalable, lower dev effort (faster shipping time), and was a known and familiar UX pattern for mobile web.

Results

Increased engagement

Significant increase in time spent in the toolkit

Increase conversion

Conversion from home to Marketing and Programming pages increased by 3% (marketing) and 12% (Programming).