Transforming the Sport and Social Club Experience

Project Details

The Sport and Social Club (SSC) partnered with Paper Leaf to create a modern, user-friendly, and technically sophisticated solution. This project included three websites: Edmonton Sport and Social Club (ESSC), Calgary Sport and Social Club (CSSC), and Go Play!, and a user portal, all of which needed to seamlessly integrate with their existing databases.

Problem Statement

The project included completely rebuilding two current websites, ESSC and CSSC, with a new modern, user-friendly experience. Additionally, the SSC was expanding to include a youth recreational sport division GoPlay!, and sought a completely new website for this new line of business. 

The three websites would primarily be used by new players, who needed to learn about SSC and the sports offerings before registering. All three websites needed to integrate with a self-directed member portal experience, which was rebranded as, ‘Homebase’. Homebase acted as the hub for existing players and housed member information (schedules, policies, standings, game reports, etc.) All essential data is pulled from a proprietary database, League Manager, which houses over 20 years of critical data (accounting, facility information, game reports, player information, payments, etc.)

SSC’s complexities required an agency with an ability to navigate UX challenges, technical requirements , and business protocols. With this project, SSC aimed to increase membership and overall registrations for adult sports. With the new GoPlay! addition, the primary goal was to build awareness and encourage adult SSC members to register their children for youth programs. 

What We Did

Phase 1: Discovery & Research

The discovery phase was focused on understanding the history of the existing site, including the reasoning for existing features. The SSC team needed the new sites to include some legacy features, including the ability for staff to act as a player and complete online player orientations.
The previous websites were content-heavy and complex in how they intertwined with information housed in the database. The research aimed to unpack and understand how the data worked together and find ways to make connections between cleaner. 

Our research included:

• Top Task Survey: To build an understanding of what players were most interested in, helping us develop a menu hierarchy, content plan, and navigation strategy. 
• Usability Benchmarking: To understand pain points and blockers in the current registration process. Through this research, we found it took on average 13 minutes to register for a sport.
• Functional Requirements Workshop: Included full planning of priority areas for the websites and portals and how that differentiates between different user groups (new members, active members, team captains, parents, administrators, etc.)
• Technical Integration Investigation: The Technical requirements of this project were substantial and included integrating with League Manager, developing a player portal, and building a registration flow with eCommerce functionality. Our team did a thorough analysis to understand what needed to be rebuilt (feature parity), streamlined and reimagined.
• Stakeholder Interviews: Consulting different stakeholders and subject matter experts in planning the new web products.
• Current State Object Mapping: Included a visual representation of what Paper Leaf needs to design and build; including attributes, metadata, relationships, etc. 
• Content Investigation: The websites were extremely content heavy, which required reorganizing for both public and portal sides. We reviewed where content was redundant and could be streamlined and what content needed to be available for different user groups (e.g., marketing, prospective members, current members).

Phase 2: Design & Build

The redesign of the ESSC and CSSC needed to capture the fun and excitement of the local sports scene while providing various user groups with relevant information. The design was kept simple and modern, while allowing for visual motion to bring sports to life. The GoPlay! website had its own unique design, bringing out the joy and playfulness of children’s sports. Our expert designers had to configure a user-friendly way to filter, access, and present schedules and standings on the website, which was a unique aspect of the websites. On the portal side, existing user flows and functionality were reworked to make them more user-friendly and accessible. 

Design and User Experience Highlights:

• Users now access the portal to view all their essential league needs, including schedules and standings. This ability was not included in the previous website versions, and just in the first month after launch, we’ve seen 3000 users utilize this feature.

• Weather statuses are posted in plain sight both on the multisite and the homebase dashboard. Users no longer have to click multiple times to understand the days’ weather call.
• Team captains can seamlessly pull up their field permits, post-game reports and sub requests all in one place. 

The development phase of this project was highly complex. With over 20 years of data and established business practices, our expert developers had to navigate existing data and find ways to integrate new functionality for the websites and portals. Communication was key, and our teams were in constant contact to ensure business continuity for all existing services.

Key Development Improvements:

• Moving the public-facing websites to a modern CMS (Statamic) and removal of the existing CMS that was no longer being supported.
• Adding a completely separate portal application (built with Laravel and Filament), which separates website content from user functionality. Users now have a one-stop shop for all their needs, and this portal can be expanded to include future functionality when needed.
• Seamless integration between the CMS and portal application so that shared components like the listing/filtering of sport offerings can be reused between both.
• Developing a centralized custom integrations package, allowing for updates to be made across multiple products in a single location.
• Integration of Moneris Checkout with the websites and League Manager to provide smooth payment processing.
• Creating a comfortable CMS experience for administrators to flip between Edmonton SSC, Calgary SSC or GoPlay! as needed.
• All products now access League Manager directly, rather than relying on a homegrown API, which has improved speed and performance, and reduced maintenance work for SSC staff.

Outcomes

Since launching the websites, we’ve seen some truly amazing results that highlight how effectively users are now able to navigate the website. This included improved page load times and increases in users navigating the website. 

The Sport and Social Club team can now access multiple vantage points to validate their decisions to sponsorship partners. Not only do they have direct analytics tracking on their sponsorship pages, but the membership card can now be viewed and tracked through unique URLs (through Google Analytics), giving them the data they need to make informed decisions.
The client relationship remains strong, and we look forward to seeing the continued results of the hard work done by the team as we see more and more interaction with the website.