The Whitpain Recreation Association (WRA) is a vibrant non-profit youth sports organization serving over 7,500 members in Montgomery County, Pennsylvania. They recognized that their old website, wrasports.org, just wasn’t doing the job when it came to creating a cohesive and engaging online presence. So, in 2022, WRA launched a comprehensive project focused on both a UX overhaul and rebranding to establish a consistent brand voice that truly reflects their values and connects with the community. This emphasis on consistency was crucial for improving communication at every touchpoint.
As the UX designer and content creator for this project, I had the exciting challenge of designing a mobile-responsive website that made registration easy while providing the consistent brand voice they were missing. In this case study, I’ll walk you through the rebranding strategy and the UX design process behind playwra.com, showcasing how I addressed WRA’s need to create a welcoming digital environment that not only simplified the registration process but also resonated with the community's spirit and values.
Problem Statement
The WRA faced a couple of big challenges with its old website, wrasports.org, that really affected both brand messaging and user experience. First off, as a volunteer-run organization, WRA relied on various board members—most of whom didn’t have backgrounds in marketing, branding, or SEO—to create content for different sections of the site. This led to a mix of styles across admin pages, sports program descriptions, and registration forms, making everything feel inconsistent in tone and detail.
On top of that, the website was built on a sports management platform called SportsSignUp Play, which was pretty much stuck in the past and no longer received updates. It didn’t adapt well to mobile devices, forcing users to zoom in and pan around just to find what they needed. There were performance hiccups, too; sometimes the site would take up to 20 seconds to load, and there were times it wouldn’t load at all. To make matters worse, parents encountered security warnings when they tried to enter the registration area, indicating that the site wasn’t secure. As a youth sports organization, this “not secure” message was a major red flag, especially when families were entering sensitive information about their kids. This not only shook their trust but also discouraged them from completing the registration process.
Together, these messaging and usability issues underscored the need for a comprehensive redesign and a consistent, community-centered brand voice to provide a user-friendly experience for WRA’s families and athletes.
Goals
To kick off the project, I organized a meeting with the WRA executive board to gain a clear understanding of their objectives and vision for the new website. This discussion helped us identify the key areas that needed attention and allowed us to align our goals for the project. These were the 8 goals we outlined:
Create a platform that connects with the community while effectively showcasing all available sports programs.
Ensure clear details for parents, coaches, and sponsors to help them make informed decisions.
Enhance the registration experience to encourage greater participation.
Move the website to a WordPress platform for increased flexibility and options.
Research and choose a new sports management system that integrates seamlessly with WordPress for efficient registration and payment processing.
Facilitate straightforward access to important documents.
Promote community engagement by sharing news, highlighting social media accounts, and showcasing sponsor opportunities.
(Added later) Develop a comprehensive marketing campaign to promote the rebranding from wrasports.org to playwra.com.
UX Research
To build a site that truly connected with the WRA community, I dove into a solid round of user research. This meant gathering real insights from the main users: parents, coaches, and sponsors, while also consulting with the sports directors responsible for maintaining program content on the original site. This approach was all about getting to the root of user frustrations and content needs, while also making sure the existing info was accurate and relevant.
For my research, I conducted interviews with parents and coaches, and they consistently mentioned how tough it was to find specific information on the website. Navigating the site was especially frustrating on mobile devices, and while it was less convenient, the workaround was to use a computer instead.
Chatting with the sports directors revealed that, on the original website, many programs had descriptions and requirements that hadn’t been updated in years. They pointed out several areas that needed major revisions. To streamline the process, we agreed on a collaborative workflow where I would refine the content they provided, ensuring it flowed smoothly and communicated the necessary messages in a consistent voice.
A competitive analysis was also done, focusing on the websites of nearby sports associations. Reviewed sites included:
It became clear that a common theme ran through these websites: cluttered layouts, outdated designs, and a narrow focus on just one sport. In contrast, the WRA stood out with its diverse range of six youth sports programs that catered to everything from instructional and intramural play to higher-level travel teams. This variety allowed participants of all ages and skill levels to stay within the WRA for their entire youth sports experience. The key challenge was to ensure that the WRA's website effectively showcased this unique strength, making it easy for families to see all the options available to them.
User Personas
Three types of personas were identified among website visitors:
1. Parents interested in enrolling their children to play.
2. Parents or community members interested in volunteering to coach.
3. Local businesses interested in sponsorship opportunities.
EXAMPLE 1:
Dana, 38, is a physician's assistant and the parent of three children. She's enthusiastic about fostering their interests and helping them develop skills through extracurricular activities. While her job demands her attention, she values quality time with her family and seeks convenient ways to support their interests.
Dana values convenience, information, safety, communication and flexible payment options. She's looking for a user-friendly website where she can easily register her children to play without a complicated process, saving her time and effort. She was clear information about the programs available, including schedule, fees, and required equipment. Safety is paramount, so she expects an organization's commitment to child protection, including background checks for all volunteers, etc. She appreciates clear communication lines. She prefers flexible payment options, whether by check, credit card, or the ability pay in installments. Her pain points include complex registration processes and lack of information.
EXAMPLE 2:
Dave, 42, is a real estate agent and a dedicated parent to his 10-year-old daughter. He's passionate about soccer and has played the sport at a college level in his youth. His busy career in real estate keeps him occupied, but he's eager to get involved in his own daughter's soccer journey now by volunteering as a coach for her team.
Dave values clear information, easy registration, support, and resources. He needs a website that defines the commitment of the sport he is volunteering for and one that provides a straightforward registration process that doesn't consume too much of his time. Although he played soccer, he would appreciate access to coaching resources, such as practice plans, drills, and guidance on working with players. His pain points include disorganized information and lack of support, as he wants to feel confident when he steps onto the field to coach for the first time.
EXAMPLE 3:
Michael, 55, is the owner of a local restaurant that has been a staple in the community for over a decade. A former baseball player himself, he has a deep-rooted passion for the sport. He recognizes the importance of giving back to the community and wants to use his restaurant as a platform to support the needs of the local youth baseball program. Michael is not only interested in contributing to the community but also in maintaining the awareness of his restaurant among the parents of baseball players.
Michael values community engagement, always seeking ways to give back to the local community. He values brand visibility, wanting to keep his restaurant top of mind especially with an increased number of restaurant options today. He also values networking, making connections with coaches and parents. His pain points include uncertainty on how to support the program and who to contact.
Insights Gained
The websites of neighboring sports associations shared similar issues as the WRA’s, but the WRA distinguished itself with its diverse offerings of youth sports programs. By delivering a new website with a modern design, mobile responsiveness, and an organized information architecture, the WRA had the potential to set itself apart from neighboring programs, simplifying the decision-making process for prospective participants.
The new website needed to prioritize a user-centric approach that addressed the specific needs and pain points of each user persona. For parents like Dana, the design should have provided a straightforward and efficient registration process while offering comprehensive program information and highlighting child safety measures. Volunteers like Dave required easily accessible coaching resources and a seamless registration experience. Sponsors like Michael needed clear pathways for engagement and increased brand visibility.
By aligning the website’s design with these insights, I aimed to enhance user experience, attract a broader audience, and better serve the needs of its diverse stakeholders.
The Rebrand Decision
The decision to rebrand the WRA's website from wrasports.org to playwra.com stemmed from a strong desire for a fresh start. The association wanted to communicate that the entire online experience was evolving, emphasizing a reliable, user-friendly, and secure platform. Additionally, the association sought a name that captured the playful spirit of youth sports.
After searching for available URLs and presenting different options, the executive board selected playwra.com as it conveyed an inviting atmosphere that encouraged participation. Mottos were also discussed, and after me presenting various options, "Where the Whole Community Plays" was selected. This motto was an excellent choice because it encapsulated the spirit of participation that the WRA aimed to promote, emphasizing that the organization wasn’t just about sports but about building a community where everyone—parents, children, and local businesses—could come together to support and engage with youth sports.
To further enhance the rebranding effort, I suggested the creation of a dedicated logo for the new website that could also be utilized across various marketing materials. While the association had a style guide for its existing logos, I noted that the primary focus of these designs was a large "W."
Although the community widely recognized the organization as WRA, the current logo did not effectively reflect those initials. I proposed a new logo that would align with the existing branding while introducing a design for the letters "WRA" that felt seamless and organic, as if it had always been part of the identity.
"Play WRA" Logo
For the new logo, I used Adobe Illustrator to create a set of letters that matched the original "W" from the WRA logo, seamlessly forming the "WRA" abbreviation. I retained the shield element to ensure a connection to the original branding and added icons to represent the various sports offered by the association.
The new logo was designed to be prominently featured on all marketing materials associated with the new website. However, the executive team liked the WRA lettering so much that they adopted the design for jerseys and apparel across the various sports programs.
Website Architecture
The architecture of the new website was crafted to streamline navigation. I organized the site into clearly defined sections that catered to the needs of each user persona, ensuring that parents, volunteers, and sponsors could easily find relevant information.
Wireframes
Example provided below for home page:
Color Scheme and Fonts
The website’s colors and fonts were selected to align with the association’s original logo, with Open Sans chosen for paragraph text to ensure optimal readability across all devices.
Website Design
Before commencing the design stage, I initiated a comprehensive technology assessment of sports league management platforms to identify an ideal solution for seamless integration, a necessity for league and registration management within the association.
After careful evaluation, TeamSnap emerged as the chosen platform, serving as a centralized hub to efficiently oversee all sports-related business operations. Leveraging WordPress for the website's construction enabled integration with TeamSnap, establishing key connection points into the platform, such as user dashboards and online registration forms tailored to the diverse sports programs offered by the association.
This integration also empowered TeamSnap to facilitate an effortless sponsorship procurement process for sponsors interested in supporting the association's teams or making a general donation.
Start to finish, the project took a 10-week development phase managed by one person, covering all UI and UX requirements, including wireframing, design, photography sessions, and content creation. As part of the copywriting effort, I edited or wrote additional content for over 30 pages, ensuring a consistent brand voice that clearly communicated key information. I also incorporated news stories based on recent social media posts from the association to provide initial content for the website at launch.
See sample screens below.
NAVIGATION
HOME PAGE
SAMPLE INTERIOR PAGE
Marketing Campaign for Launch
To ensure a successful launch of playwra.com, a comprehensive marketing plan was developed, leveraging multiple channels to engage both current and prospective members. Key strategies included:
Email Marketing Campaign: An email was sent to all current and lapsed members, informing them of the rebrand and new website launch, highlighting the enhanced user experience and the association’s commitment to fostering community engagement.
Email Header Banner: Knowing it would take several weeks to transition teams to the new platform, we added a custom banner to emails sent through the old system, consistently promoting the new website during the changeover.
Website Transition: While wrasports.org remained active during the transition, each page was modified to direct users to the new platform.
Social Media Campaign: Posts were made across all social media channels to announce the change, and profile and cover images were updated to promote the new website. News articles were also shared across these channels, each linking back to the new website, encouraging families to explore.
Outdoor Field Banners: Banners were displayed at all sports fields with QR codes linked to the new website.
Community and School Advertisements: Ads were placed in community magazines and newsletters across all schools feeding into the program, maximizing visibility among families within local neighborhoods and schools.
Integrated Registration System: All new registrations were funneled through the new website, simplifying the sign-up process for families and showcasing the improved user experience.
This multifaceted approach effectively built awareness, engaged the community, and established playwra.com as the central platform for all sports programs offered by the association.
Final Result
In the aftermath of the website's launch, we received overwhelmingly positive feedback from users, including association board members, commissioners, coaches, and parents. This response served as a resounding testament to the intuitive and user-friendly design of playwra.com. Users expressed appreciation for its seamless functionality on both desktop and mobile devices and its well-organized layout, which facilitated the effortless discovery of information and program registration. Additionally, the transition to TeamSnap for team management received enthusiastic approval, significantly enhancing management and communication across all sports programs.
One year post-launch, playwra.com has achieved impressive results, averaging 1.5K monthly click-throughs and efficiently processing nearly one million dollars in registration fees.
Comments