Plurchase

50 States Half Marathon Club is a national running club that hosts distance challenges and meet-ups throughout the US. They are a private member-only group that requires members to pay an annual membership fee and values community and inclusiveness. Their site was severely outdated, so I took this opportunity to try and improve their online presence. 

This project was a responsive website redesign to improve site navigation and user retention for interested runners who want to learn more and join the 50 States Half Marathon Club.

The Problem

My initial steps with this redesign included researching the client and identifying metrics for success. I started with visiting the original website and reading more about their business goals and website mission. 

Upon completing a task analysis, I learned that this site was used by admin to share news, photos, and events. It was also a secondary source for updates because their primary source was through their private Facebook group. This creates a paywall and increased difficulty for prospective members to learn about 50 States. I found that the website had a confusing site navigation and sign-up process.

My goals with this project was to create a streamlined navigation experience and lower the barrier of entry for new members. I also wanted to refresh the visual design of their brand, while maintaining the integrity and community-feel of the group. I was able to measure my success through improved usability testing scores and qualitative feedback from users.

Original Site: https://www.50stateshalfmarathonclub.com/

Identifying Solutions

With the data collected by my UX researcher on community runners, I contributed in creating the persona (Jordan) and user flow. Our investigation included a task analysis to investigate improvements to the information architecture and competitive analysis to find website patterns that could work better. I wanted to learn where the current site was failing and need to improve.

Our team also created an affinity map using user interviews, and it helped me focus on pain points that I could address with the redesign. In the end, I was able to work with an improved site map that cut down the number of category choices (9 to 3) and reorganized site content that allowed for easier navigation.

The research process was lengthy and involved effort from everyone on the team to fully understand what problem we were trying to solve. This proved to be important in later phases of the project when our design started to go in the wrong direction.

Problem Statement:
Jordan needs a better way to learn more information and sign-up for the 50 States Half Marathon Club because they are a runner that wants to feel connected to a community of like-minded athletes.

Visual Design

With my role as lead UI/visual designer, I started with a mobile-up approach to build a responsive website. I created wireframes for my team to build off and a style guide that established design rules for my team to utilize while designing their respective pages. 

This UI refresh included creating more clear CTAs and breaking down site text into more digestible sections. The original website made use of a hi-vis green as their brand color, which I decided to change to orange which is more closely associated with feelings of energy and determination. I introduced the Oswald and Universe fonts for a bold and challenging look. The black background color was swapped with an off-black grey, which was chosen to reduce eye-strain against white text and because it was reminiscent of asphalt roads. 

The end goal was to establish the client’s website as a more friendly and motivated group, welcome to all.  These design decisions are supported by A/B testing of our users.

Find support with your community

An important aspect of the mobile restoration was to refresh the menu: decrease the number of available choices and increase contrast between the text and background. This was done to reduce cognitive load and improve readability.

Another improvement was to create uniform containers and labels to use throughout the site. There is an excess amount of text and images throughout the site, so this change helps content display more clearly for users.

On the right is an example of these functions in a hi-fi prototype.

Testing Our Users

After completing the first iteration of the redesign, my team did usability testing with participants from previous user interviews. We received valuable feedback from our users, which allowed me to continue improve the design. An important part to this usability test was realizing that the rebranding of the club did not resonate with the target users.

Improving the Design

Using the results from usability testing, I made iterations to the design. This effort was made to make sure that the redesign was backed by data and improved the online experience for real users. As hinted earlier, the design began moving in the wrong direction so this testing helped shift our final prototype.

Major Improvements:
1) Swap out cover photos with more community-oriented ones.
2) Separate “About Us”, “Resources”, and “Rules & Guidelines” in the main menu.
3) Allow users to see member count and filled capacity status for races.

Reflection

Given the limited time I had to work on the project, I would have liked to accomplish more for this redesign. Some next steps would include going through more rounds of iterations and testing, reaching out to 50 States Half Marathon Club for feedback, and conducting SUS score evaluations for quantitative data.

I learned a lot about collaboration and communication, while working on a team with other designers. It was a challenging experience to lead one aspect of the design process, but it allowed me to become an expert on the visual design. I would definitely work with this group again in the future!