Athlinks Services

Finalized sitemap and information architecture for complex B2B offerings, with wireframes to capture the funnel.

6 min read

The Client

Athlinks Services provides enhancements to the athlete's journey, from start to finish – and the fun with wording is appropriately inclusive.

Athlinks, the running industry's most comprehensive results database for athletes, features timing system Chronotrack, alongside registration and online event support as part of a Services suite for events. Athlinks Services is the B2B side, working with race directors, timers and event support staff.

Both Athlinks brands are focused on providing a better event and race experience for the end customer – the participants – a majority of which are endurance runners.

Athlinks' parent company, the formerly publicly-traded Life Time Fitness (with gyms of the same name), is now privately funded again. Backing is furnished by the same three private equity firms that have invested in companies like Airbnb, Uber, and J.Crew. Improving tech for race events, along with the quiet expansion of a few privately-backed SaaS industry leaders, makes for interesting competition and strategy in the fitness event arena.

Athlinks Services

Athlinks on Crunchbase

Chronotrack on Crunchbase

Life Time Fitness on Crunchbase

Your Turkey Trot Is Pointless (But Do It Anyway) (Wired)

High-end fitness brand Life Time wants you to live at the gym (Fast Company)

Life Time Fitness Develops National Portfolio of Events (Runner's World)

The Challenge

Chronotrack had acquired Athlinks, and was becoming a merged set of brands. Collectively they needed a focused B2B website to act as a sales driver and directory for everything race-timing and race-management related. The Director of Marketing had a general buying persona, some SEO terms to think about, and a lot of content to reorganize under the new structure, with traffic roughly 40% desktop and 60% mobile.

Information architecture and sitemap work, down to the targeted topics for sliders, was needed to visualize and contain nuanced categories of content.

My Role

2017
User Experience Design

Information Organization, Unified Wireframes to Guide Users

I finalized a comprehensive sitemap and information architecture, and developed wireframes to capture the intended funnel.

I was the sole UX Designer – working with VP of Client Services Ali Kennedy, Account Executive Allie Brimlow, and directly with Athlinks Services' Director of Marketing Laurie Pani.

My Work

Client presentations, information architecture, sitemap iteration, call-to-action language recommendations, page structure and wireframes inclusive of B2B sales funnel considerations.

Progress Snapshots

My account managers and I started without much knowledge of how the business worked, nor how the actual products functioned. I began by arranging content topics into very general categories. The first round didn't look like much.

We sent regular updates, which were met with active engagement by the Marketing Director: she gave us product training and responsive feedback. With the back and forth, the disarray started to take shape.

Functional Aesthetic

Some would argue that black and white wireframes, especially those that strip away all representation of "design," are best to see what's needed in planning a new site or app buildout. This approach compliments the design philosophy of having content fully prepared, before designing beautifully custom and (more) effective containers for it.

With a nuanced, highly-industry-specific B2B product suite, we had to find sensible places for all the content in order to express how the new site needed to function for its audience(s).

I would argue that it's easier to wrap one's head around these grayscale outlines, and improve on them, when there aren't any visual design distractions to consider – or very few.

Final Sitemap

This describes all the necessary pages and their sub-sections, as well as a global dropdown on the bottom right that provides instant access to the main set of product and service solutions.

"You did a phenomenal job wrangling the herd!"
–VP of Client Services Ali Kennedy
"Agreed. It's awesome work. Would work with this team again in a heartbeat."
–Director of Marketing Laurie Pani

Call-to-action (CTA) Language & Planning

We needed eye-catching call-to-action buttons, aimed at B2B customers and scaring off any athletes that may have mistakenly stumbled upon Services while searching for Athlinks results.

Brainstorming started simple and practical with what the button would do: "Get in Touch," "Contact Our Experts," and "Contact Sales." Even these would clearly not be for a event results search action. More formal language would work to our advantage, reinforcing the setting.

Much has been written about an age where users are not engaging with or entering the funnel, and one approach that could entice better was getting creative with longer CTAs, below.

Talk to us

Let's start with race solutions

Let's look at event race day, together

FEELS PERSONABLE

Request demo

Find out more

Schedule your free consultation

Learn more about race management tools

OLD-SCHOOL, BUT STANDARD FOR A REASON

Event organizer login

See the athlete's experience at Athlinks.com

TARGETED

The use of varied CTAs across the pages and navigation was the most engaging option. It also helped in building awareness for different aspects of the Services suite. Many of the above would link to a single well-designed form collection page, but allowed for different ways of thinking. Another benefit: these assorted button texts could incorporate high-value search and SEO language.

Example of final button language implementation

Mobile Wireframes

For both desktop and mobile wireframes, we used a few generic call-to-action placeholders but gave an outline of where navigation and action buttons would be. For mobile specifically, we needed to look at how a detailed footer that included resources such as case studies and data sheets would work on a smaller screen. Keeping the top level navigation more simplified but allowing for a detailed footer helped to retain all those crucial industry-specific keywords.

Desktop Wireframes

In order to get B2B customers started quickly, we looked at a few options for Contact CTA placement on desktop. In the end we decided to clip the top level navigation to the top and allow it to scroll with the page – creating frictionless access to exploring Services as well as hitting the Contact CTA on pages that aren't the homepage.

On the homepage there are many creative and longer CTA buttons that lead to the contact option, so there's conditional logic to show the top level navigation (nav) plus Contact CTA on pages other than home. This makes the whole site behave a bit more intelligently, and adaptively in terms of how much button or nav text you see – showing what's needed when it's needed.

Having wires that captured this level of precision made the next phases of visual design and development much smoother. And we knew we had captured at least the foundations of the funnel.

These, combined with the sitemap, led to easily comprehensible and clearly defined requirements. Of course aspects of this work was tweaked before final implementation and launch, but the main thoughts that our team and the Marketing Director wanted to include, were captured here for all to see. Doing this at a relatively early stage allowed for the larger team and stakeholders to discuss strategy and technology for build out – for example with the unique features of the form input represented with a gray background in the following full-page wireframes.

More: 

© 2019 Jennifer Gunther
All visuals are protected under the Digital Millennium Copyright Act.

Built using Webflow and some custom CSS.