CONCEPT PROJECT - APRIL 2020
Mobile First Website Redesign for a Nation-Wide Community of Runners
Inspiring new membership signups through improved site navigation and organization, and a free membership plan.
Project Overview
50 States Half Marathon Club is a nation-wide, membership-based community of runners and walkers.
Each member is focused on completing the club’s challenge of finishing a half marathon in every state.
50 States Half Marathon Club needs to redesign their website in a way that encourages new membership sign-ups.
Duration
2 weeks
Team
Sarah Haidermota, Melissa Leung and Me
Tools
Figma, Trello, Whimsical, Slack, Zoom, Google Suite
Method
Desk Analysis, Heuristic Evaluation, User Surveys, User Interviews, Persona Creation, Competitive and Comparative Analysis, Affinity Mapping, Sketching, Wire-framing, UI Design, Iterative Prototyping, Usability Testing
Problem
“I don’t understand the value of being a part of this group.”
Users need important membership information clearly communicated.
The value of joining 50 States Half Marathon Club is to be a part of an inclusive community focused on accomplishing a common goal-run a half marathon in all 50 states. And this fun, positive and supportive running community is exactly what our target user is looking for.
The problem? The website fails to deliver necessary information about the membership and community in a clear, direct and visually-engaging way.
The website's paywall blocks a potential new member from accessing important information about the club. Information like: What are member groups? How do I meet new people? What are other community members like? How can I follow other members' training schedules? How can I coordinate race logistics?
And the club’s digital community exists in 8 external social media pages, including Instagram, Facebook, Strava, MeWe, Google, Pinterest, Youtube, Twitter and Tumblr, preventing them from seamlessly engaging with the community.
Restructure
Restructure the website’s information architecture and improve site navigation.
Strategy
Show the Who, What, Why.
Allow users to learn, discover, engage and connect.
Show Off
Showcase the community through pictures, testimonials, and blog posts.
Enable Engagement
Offer a free membership to convince the user that are services are worth it.
Simplify
Make it easy for the user to understand membership benefits and signup.
Research
Evaluating the website through a sitemap and heuristic evaluation.
When I went to 50 States homepage, it was challenging to understand the basic business value, membership benefits, and how to sign up. I struggled to understand why I would pay for a $429 for a lifetime membership, exactly what are the “BIG discounts” that a membership gives you, and how to I pay?
Understanding the Websites Informational Architecture
A sitemap shows top heavy navigation and too many external links.
The site map helped me make sense of the website’s current informational architecture, and this guided the team’s design of focused site navigation. Key takeaways included:
50 State’s navigation is primarily top heavy, with very little secondary navigation. This makes it challenging for the user to understand how to navigate the site, and makes the overall experience feel chaotic.
The website directs you to 16 different external pages (shown on the sitemap in yellow), like Facebook, Strava, half marathon search, etc. This causes the user to be continually directed to external sites, and prevents them from experiences a seamless user experience.
Assessing the Websites UI with a Heuristic Evaluation
Identifying four key heuristic violations to focus our website redesign.
We conducted a heuristic evaluation to evaluate the website against UI standards. The key heuristic violations included:
Aesthetic and Minimalism - The website looks overwhelming and disorganized because there is too much text on each page, and actionable items are hidden among an overload of irrelevant information and cluttered images.
Flexibility and Efficiency of Use- The user experience lacks continuity because of the overload of external links.
User Freedom and control - The pay wall blocks potential new members from seeing necessary information for sign-up, which makes it challenging to understand the benefits of purchasing a membership.
Learnability - The website makes it hard to understand what the organization does and what value it provides for the customer, and customers are unlikely to sign up for a yearly or lifetime membership if it is not clear to them what value the company provides.
User Interviews to Build a Persona
Tracing key insights and identify users goals, needs and pain points.
We took a deep dive into the minds of passionate half-marathon and marathon runners by conducting 3 user interviews and analyzing the data through affinity mapping. Key quotes that stuck out to us included:
“I love being the voice of optimism in an atmosphere of defeat.”
“The friendship and community spirit of running helps me get motivated, which I don’t have right now”
“My success is found in the success of others and I really thrive off of that.”
Four Main Themes Identified through Affinity Mapping
We took 129 quotes from our user interviews, and categorized them into 14 different themes. Out of the 14, we prioritized the above 4 statements, as these were the most common and important themes for our project.
Our affinity mapping exercise showed us:
Runners are driven towards a sense of community and support.
Runners value positive environments that they feel connected with.
It is challenging for runners to coordinate logistics and find compatible running groups.
With this insight, we created our persona, the Tenacious Teammate, to guide our design decisions.
Designing at the Intersection of Business Goals and User Needs
Finding inspiration from industry leaders.
Our team had a major “AHA Moment” one Sunday afternoon when we were staring blankly at our initial research and persona. Here we had a business offering a unique social community to runners, and we had our Tenacious Teammate who looking for social community of runners.
We realized that it’s not that the business fails to meet user needs. The problem is that the website fails to show and tell the user that they do offer exactly what they are looking for because of the significant amount of information blocked behind the paywall, and the overall disorganization of the website.
One of the main challenges was figuring out how to communicate the value of the community, in a way that inspires people to commit to a $429 lifetime membership, or $79 yearly membership.
We looked towards some of the best community based fitness platforms, like Strava, Pelaton, Swift and Adaptive for inspiration and strategic ideas, and found that all of these platforms offered either free plans or free trial options.
Communicating the Value of Community
Proposing a free trial to engage new members.
Initially, we designed a one week “Free Trial” option that allowed the tenacious teammate access to one social forum currently blocked behind the paywall. A short, three question quiz connects the user to a compatible running group within the 50 State’s community, and this would allow the Tenacious Teammate to get a sense of the community before committing to a full membership.
Test & Redesign
User testing showed the proposed free trial was still ambiguous.
When we tested the free trial option with users, we learned:
It was still unclear what was offered in the free trial versus full membership.
A one week pass to an online community was not of value to our user.
With this insight, we made the following changes for our final iteration:
It is not valuable for the Tenacious Teammate to connect with an online community for only one week, so change “Free Trial” to “Free Membership.”
A free membership allows the Tenacious Teammate to connect with one group for an unlimited amount of time.
Clearly show the difference between the free plan and paid membership plan.
Refining our Design based on User Feedback
Clearly showing the difference between a Free Plan and Paid Membership
Before & After of 50 States Half Marathon Club Mobile Website
Before & After of the Global Site Navigation in the Hamburger Menu
In the before, the header was taking up too much space, and the names on the names on the dropdown menu were neither straightforward or accessible. The redesign shows a much cleaner dropdown menu that optimizes the use of space, so that users can learn more about the club.
Before & After of the Global Site Navigation in the Footer
In the redesign, all of the external social media pages have been condensed to the footer, and important information is categorized into either “Menu” or “Get Started” so that users can easily learn more and sign up.
Before & After of the Membership Information Page
The before shows that membership information was blocked by a paywall. The redesign clearly communicates information about the membership, signup is simple, and a free plan option allows users the flexibility to learn more about the community before committing to a membership.
Before & After of the Homepage’s Description of Membership Benefits
In the redesign, the long, text heavy description of what the membership offers is replaced with icons so that the information is easier to understand and read.
Before & After of the Membership Signup Page
The before made it challenging to understand what a membership includes, and how to signup. The redesign of the membership page is clean and straightforward, and different membership options can be viewed through by scrolling horizontally.
50 States Half Marathon Club Design Solutions
Show it off!
For the homepage, our main priority was to clearly show the value of being a member of the community. 50 States mission statement is front and center, clearly showing who they are and what they do. Members passion and enthusiasm is showcased through a community picture scroll, and key member quotes are highlighted in testimonials.
Simplify It.
In the membership page, we display membership benefits through a horizontal scroll because our goal was to display information in a clear and digestible way and to create a page that was not dense with scrollable text.
Enable Engagement
Our group page focuses on connecting members, and takes inspiration from Strava Group’s in a effort to create internal group pages that are consistent with networks that are familiar to our members