Building an online 

community for runners

A redesign for the 50 States Half Marathon Club

Photo by Isaac Wendland

Client: 50 States Half Marathon Club

Project Type: Conceptual

Duration: 2 Week Sprint

Role: UX/UI Designer

Team: Andre Oosthuizen, Mijin Kwon, and Paul Kim

Tools: Figma, Mural, Asana, Optimal Workshop

Our Design Prompt

For this conceptual design sprint, Andre Oosthuizen, Mijin Kwon, Paul Kim and I were challenged to redesign the 50 States Half Marathon Club website with a mobile first approach. From research to visual design, we completed the entire design process in two weeks. 

One Integrated Community

50 States Half Marathon Club is a national running community. Members enjoy a private Facebook page, race entrance fee discounts, annual meetups, and discounts to the club store. 

 

The club had fifty separate Facebook pages, one for each state. Their goal was to transition away from Facebook and create one integrated online community located on their website.

Defining "Community"

First we had to understand how users defined “community.”

We talked to people who liked to exercise and were part of an online exercising community. We created a survey to narrow down our prospective interviewees. Andre and I conducted three user interviews with people who fit these specifications. We wanted to know what motivated them to exercise, what they liked and disliked about their current online exercise communities, and what their ideal community would look like.

From these interviews, we learned that everyone had a slightly different definition of community, but they all fell into two categories–people who enjoy camaraderie and accountability from their peers, and people who want access to resources and a large bank of knowledge.​

To represent these two categories of people, we created two fictional personas:

ALEX

Alex: likes to make new friends, and feels more accountable when they workout with a team or group of friends. Wishes they could join a running group based on their skill level.

BLAKE

Blake: an independent runner who researches online ways to improve their running techniques and times. Wishes they could ask other runners what shoes to buy.

Competitive Analysis

We researched eight online exercise communities including Strava, BodyBuilding.com, the subreddit r/bikeLA, and the app Nike Run Club. Here is what we learned from r/bikeLA and the Nike Run Club:

r/bikeLA

Pros

{

Reddit is an established and trusted forum

Lots of sorting options

Free

You can read posts without an account

Cons

{

No formal way to join running groups

Group is not very active

Navigation isn't intuitive

Nike Run Club

Pros

{

Nike brand name

Can compare runs with friends

Beautiful UI

Cons

{

Icons are a little ambiguous

Need account to view the app

From our research we learned that if we designed our community to have a formal way of joining running groups based on ability, and a way to view post on the forum without being a member, we could capitalize on what r/bikeLA and Nike Run Club were missing.

Confusing Navigation & Exclusivity

Alex and Blake experienced similar problems on the current site. Disorienting navigation that prevented them from finding what they needed, and the exclusivity of the current Facebook communities. Why would they commit to becoming a member if they couldn't get a sense of what was offered?

Old 50 States Half Marathon Club Private Facebook Page

Only paying members of the club got access to the Facebook page. This was a problem for both Alex and Blake. They wanted to see what was offered before committing to a membership.

Old 50 States Half Marathon Social Media Page

Navigation on the old site was misleading and inconsistent. It was hard to tell what the title of the page was. In the example above, "Member Portal Login" looked like the title, when really it was the "50 States Half Marathon Club Social Corner."

 

In the example below, the calendar page redirects the user to a different website altogether, one with a new color scheme and layout. It's unclear how this website is affiliated with the 50 States Half Marathon Club. 

Old 50 States Half Marathon Calendar Page

The Community

From our personas we knew what users would be expecting from an online community:

{

The ability to join running groups based on skill level

 

A place to pose questions and do research 

 

The ability to see what was offered in the community before committing to membership

We kept these expectations at the forefront of our design.

Running Groups

{

For Alex, we created the ability to join running groups

You can filter the running groups based on location, pace, and running distance.

Non members can view running group information, but they can’t join until they have become a paid member. This allows users to see what’s available before committing.

If they decide they want to join, they can become a member.

Forum

{

For Blake, we created the Forum so they have a place to pose questions and do research.

On the forum you can filter posts by category. You can also sort posts.

You can read posts, and the comments responding to the posts.

You can create posts and tag them with a category.

Non members can view posts and comments on the forum, but can’t comment or post themselves until they have become a member.

Adding Some Style

The old website was confusing. Everything looked important because there was so much stimulation. I stripped it down by removing everything extraneous. I clarified the titles of the pages.

Old 50 States Half Marathon Home Page

Redesigned 50 States Half Marathon Home Page

I moved the social media icons to the footer at the bottom of the page so they are still accessible, but not taking up valuable real estate at the top of the page. I moved the member portal to the hamburger menu and clarified the title of the page: 50 States Half Marathon Club.

I created a cohesive color scheme of black, white, grays, and greens. By removing the reds and blues from the current site I was able to bring more attention to the vibrant green.

Old 50 States Half Marathon Color Scheme

Redesigned 50 States Half Marathon Color Scheme

I paired them down to one aesthetically pleasing font. By picking one with many style options, we were able to create many moods while still remaining consistent throughout the site. I picked Avenir because of its multitude of styles, its modern aesthetic, and its readability.

Photo courtesy of UC Santa Barbara 

And I created a style guide to ensure design consistency throughout the site.

Testing our Design

We tested the design on users. They found a few things confusing.

The running group filter menu had some confusing language. The “Distance” category confused users because they interpreted it as running distance, instead of distance from their zip code. This category felt redundant so we changed it to running distance.

Version 2 Distance Filter

Version 1 Distance Filter

The category “Speed” also confused users. The correct running terminology is “Pace.” Some users also didn’t know what their pace was in miles per hour, so we changed it to minutes per mile.

Version 1 Speed Filter

Version 2 Pace Filter

Users they were thrown off by the bubble tags listed below the text box. One user stated "I thought an algorithm had automatically selected these tags for my post." Another two users didn't notice the tags at all. To remedy this problem, we created a pull down tag menu so the user must choose a category for their post before submitting.

Version 1 Tags

Version 2 Tag Pull Down

When asked to navigate to the forum and running group pages, users were overwhelmed by the number of menu options, and couldn't locate the correct pages listed underneath "Community." We simplified the menu options, and made running groups and the forum immediately visible.

Version 2 Hamburger Menu

Version 1 Hamburger Menu

Users preferred the filter menu we used on the running groups page better than the filter pull down in the forum. For visual design consistency and learnability, we made them look the same. 

Version 2 Forum Filters

Version 1 Forum Filters

Next Steps

We would like to do more user interviews to help the club transition from Facebook to the new online community.

 

Since we designed the site mobile first we’d like to refine our desktop site, and make it function as beautifully as the mobile site.

 

It would be beneficial to run a second card sort with new participants.

  • LinkedIn
  • Instagram