50 States Half Marathon Club
.svg)
User Research, Interaction Design, Visual Design
Miro, Figma
50 States Half Marathon Club is a running club that provides community and challenges to its members. Members can take on any of the 7 endurance challenges on the website. Currently, all main communication occurs through a private Facebook group. Our task was to help the website instill a greater sense of community. This was a speculative redesign made for our General Assembly UX Design class. We were assigned a client and a brief that detailed the problem we needed to design for:
- Primary Goal: “The 50 states club wants to encourage a greater sense of community for their members as a nation of runners”
- Secondary Goal: Update the website to modern standards
I led our team in interaction and visual design, using a mobile-first approach as the foundation for this responsive website.
Designing the Right Thing
In order to get our bearings, we each performed individual heuristic evaluations of the current site, starting with the mobile version.
The current header was quickly identified as an area that needed improvement. In its current state, the header bar takes up more than half of the screen. That’s valuable real estate that could be used to connect with users. Inspecting the current menu system revealed difficult to read text due to low-contrast color choices. 50 States Half Marathon Club emphasized inclusivity as one of their core principles, so the website needed to follow through on that promise.
Beyond the navigation, users were confronted with endless walls of text at almost every page, placing a high cognitive load on visitors. This was especially evident in the Challenges and FAQ pages.
Creating Empathy
Using valuable insights that Ayla, our researcher, had extrapolated from our user interviews, a proto-persona was created. Using the persona, I created a journey map to understand the essence of the whole experience from the user's perspective. This helped our team to understand the basic needs of our user and to identify specific points in the experience where a user would become frustrated. It was clear that the sheer amount of information that our users were presented with needed to be broken down into digestible sections.
With a clear direction in mind, I began to work on the designs.
Colors
Since the running club was a relatively small organization, I knew I had to be conscious of their current asset inventory. I chose a color that would co-exist with the current brand identity, providing something new and fresh but would still give existing members the same sense of “home”. The orange was a choice that would be both--I hoped that the encouraging and welcoming nature of the color would resonate with Jordan.
I also utilized a softer shade of black (#1C1C1C) as the secondary color to ease the contrast on the eyes a bit more. This lighter shade of black was also meant to represent the color of asphalt, evoking a sense of purpose and intent for the site-- “we know runners”.
Typography
To match the energy and mentality of our Proto-Persona, I needed to find a bold, authoritative, and challenging font to inspire Jordan to rise to the challenges of the club. It had to be a Sans Serif font to provide a modern, clean, and approachable feel to the site.
Putting It All Together
The new home page focused on the intention of the site. Visitors immediately understand that this is a running community from the photo displayed. The block of text on the starting website was condensed to include only what visitors needed to know. CTA buttons were created using the orange color of the logo to bring attention to actions that we want the user to engage in.
For the challenges page, I focused on the consolidation of information. By breaking up the information into sections, or chunking, I hoped to lower the cognitive load for visitors. Each challenge card would expand when tapped, providing users with information about the selected challenge, as well as a clear CTA button to entice users to join.
I relied on data gathered by our Information Architecture lead to dictate sections for the navigation menu. I made sure that my designss would pass accessibility testing.
Lessons Learned
After creating and preparing our prototype, we went directly into usability testing our updated site. Users reported that our designs were aesthetically pleasing and intuitive to navigate. However, something was lost in the process... While the usability of the site had improved greatly, users also reported a diminished sense of community and approachability. We had swapped out photos of the club events and meetups for more inspirational running photos, but perhaps we stepped too far. I learned a major lesson here: content is more important than containers.
Project Gallery
projects
