INTRODUCTION:
Running is the simplest and most universal form of exercise.
The start up cost is low (a good pair of running shoes) and can be done anywhere. You got the shoes, but where do you start? Our goal was
to take a well established running site and make it a destination for all runners-novice and experienced alike.
Project Overview:
50 States Running Club is collection of different running groups across the United States and territories. They encourage members to participate in marathons, 1/2 marathons and triathlons throughout the United States and Canada. The club currently communicates with its members through different Facebook club pages and website.
50 States would like to rely less on Facebook and more on their site to inform members of different clubs and events around the U.S. and Canada. Their site has not been updated in awhile, and is in need of a refresh. The site must be mobile first, since most members access information away from their desktop digital device.
PROBLEM:
Members of the 50 States need a hub where they can find and organize events, that ultimately fulfill the mission of the club, completing various mid to long distance running events throughout the US and Canada.
SOLUTION:
Design a mobile first website for 50 State Running Club that brings event planning and fosters a sense of community under one platform.
Site must appeal to a diverse audience- beginners to seasoned road runners.
How did we get here?
In order to fulfill the client objectives of centralizing club functions to one site, we conducted a competitive site analysis of 4 different running clubs.
Prior to conducting our analysis, we hypothesized that most running pages would be more similar than different. Our assessment proved to be true. Our competitors had a lot of the same features as the 50 States Running Club, such as events pages, club pages, and membership portals. They also relied on social media, such as Facebook, as a means for members to communicate with each other.
As people knowledgeable in the principles of UX/UI design, we felt negatively biased towards the organization and design of the 50 States Running Club site. We took the extra step of creating a questionnaire that asked runners and non runners what their thoughts were on the current site and what could be improved.
This quiz proved helpful in that it helped validate some initial insights we had regarding the site.
Our initial insights were:
—
Streamline the
content
—
Sign up for affiliated running events on the 50 States Running Club site
—
Make events more
prominent
—
Create a profile that
tracks events easily
—
Access affiliated running clubs on one site
Talk.Talk.Walk.Run!
“I need an efficient and effective method of my preference for staying up to date about events, runs, and marathons happening in my area.”
— Interview Subject One
“I want a way to be able to personalize my running experience and the community I am in.”
— Interview Subject Two
Our interviewees had a lot of “wants” in common, such as finding events easily and the desire for one stop event sign up. One thing that was consistent, regardless of running level and geographic location, was a sense of community among runners. For experienced runners it was swapping training tips among each other. For novice runners it was varying their run locations and meeting others "
who were at the same level.
Who is the 50 States Running
Club User?
The data from our interviews yielded two distinct running personas. This allowed us to better understand our users and help us come up with a plan to address the client’s needs- centralize all club functions to one site.
Meet David Cayton
-
He’s 48 years old and lives in Seattle, Washington. David has been running since he can remember. David loves running marathons not only to stay in shape, but because it harnesses a competitive spirit and fosters a sense of community that he felt when he ran Track and Cross Country at UCLA.
-
Find like minded runners who are training seriously to qualify for different marathons.
-
David has trouble finding other like minded runners who are as serious about their training as he is.
David wants a place that helps him find qualifying runs for competitive world class marathons such as, NYC and Boston Marathons.
David wants a place where he can find information on improving his running (diet, regimen and training tips)
Not everyone is hard core, sinewy, and can run a marathon in under 5 hours.
Meet Katelyn Brown
-
She is 24 and recently moved to Chicago, Illinois from a small town in Indiana. The only reason Katelyn runs is because it varies her workouts and it serves as a form of meditation after a long day as a Sales Associate.
She is interested in joining a running group so that she can meet new people and grow as a runner.
-
Katelyn would like to find easy and fun runs as a means of staying in shape and meeting new people
-
Katelyn has found it difficult to find other runners in her new city
As a newbie to Chicago, Katelyn keeps her runs to a 1 mile radius of her home. She’d like to find new running areas that are safe, since she runs alone.
Two personas. One solution.
Two personas generates a lot of how might we statements. But the one both David
and Katelyn had in common was:
How might we foster a greater sense of community.
If you build it they
will run.
Our client had a rather tight time frame. Instead of months, we had weeks, meaning
we had to generate ideas fast! As a group we made the decision to set up a design studio. This allowed us quickly to generate different ideas and select the best ones to address our clients needs.
We used ideas from our design studio and created a clickable lo-fidelity prototype in Figma. We picked features that resonated with both David and Katelyn.
Profile
This is what David has been looking for. A robust profile page that allows him not
only to track his running exploits, but limits his circle to like minded, tanned, sinewy marathoners like himself.
Bonus- he can communicate through a site messaging feature with members of his inner circle to swap tips or encourage each other to go on a leisurely 13 mile run.
Events
This feature appeals to all runners, especially Katelyn. It gives her all the event details, and allows her to register for the event without any club commitment. Our goal is that the ease of finding events in a mobile friendly format, makes the 50 States Running Club her favorite running site. We hope that one day she decides to take the next step and creates a profile, ultimately joining the club.
Usability testing 1
On to the high fidelity prototype…not.
Although most testers were able to find events and the messaging feature in the profile, our Maze results showed three major flaws. These flaws led us to run a second usability test. The flaws in the prototype were:
Moving forward
We addressed the pain points and possible pain point above and ran the second
usability test.
Make it classy
While we were making refinements to the lo-fidelity site, we went ahead and started working on a style guide. We created a moodboard to help us create the style guide as a group. We picked a green and warm gray palette with orange accents.
We also selected a typeface that complimented the new logo we designed for the site.
We felt this made the site, clean, modern with an athletic vibe.
It’s hi-fidelity time
We applied the adjustments and the style to our lo-fidelity to create the hi-fidelity prototype. We conducted another round of testing.
The results were similar to the second round of usability testing with two new observations from our testers. Where do I click to go to the events page on the home page? We made a minor tweak and made that a button versus text.
We noticed we still had issues with the creating a post. Some users complained about the size of the buttons and having issues following through with the creation of a post.
But all good things must come to an end.
— the client
Conclusion:
We addressed the clients needs by:
1. Creating a mobile first site
2. We streamlined that content and made the events and “club” (now Community) pages front and center, on the homepage and menu.
3. We centralized all events and clubs on the 50 States Running Club page.
4. We made it easy to sign up for events nationwide and locally, through the
50 States Running Club page.
5. We fostered a sense of community among members of the 50 States Running Club
by adding messaging and post features to the profile page allowing members to communicate with each other and find like minded members.
6. We opened up our events pages, including event sign up as way to foster community, increase traffic to the 50 States Running Club site with the goal of increasing membership to the 50 States States Running club.
Next steps:
Improving our posting feature on our profile page.
Even though we managed to increase our overall success rate to 92%, our misclick
rate remained at 45% on average.
A user noted that making this a pop up would make it more intuitive.
I believe conducting a competitive analysis on social media platforms would help us refine this feature further.
Taking a deep dive into the paid membership portion of the 50 States
Running Club Site.
It seemed to be the newest feature of the site, but perhaps integrating it into the profile page and adding more features for paid members would make the site stronger.
Personal takeaways:
It was the first time that I could take everything that I had learned in class and apply it to a real world setting. I learn by doing, so a lot of what I learned in lecture now made sense.
When I signed up for General Assembly, I thought I would enjoy the research portion of UX/UI more than the design portion. I felt it would appeal to the former museum curator and accounting intern in me. This project reinforced that research was a skill that I need to become more comfortable with since I may be in a situation where I need to do everything- design, research and writing. Though, I’m realizing that deep down I am a designer. It is something that I enjoy and it is a part of my identity after 15 years of working in the design/art direction field.