In March of 2022, Volo Sports engaged Quoin to enhance their online brand presence. A national social sports organization that fosters community through social sport leagues, Volo had a strong regional base, but hoped to grow further and reach new audiences through their website. This meant that they wanted to ensure that their site was not only easy to discover, but also engaged users with a modern and intuitive experience.

Search Optimization & Performance

A top priority for Volo leadership was boosting their page ranking on all major search engines. At the outset of the project, we noticed that many pages were taking too long to load, causing Google’s web crawlers to essentially give up on indexing their site. Performance is a significant factor in how Google scores pages and calculates rankings. Volo’s SEO was thus doubly penalized by the sub-par performance of its website.

Quoin focused on addressing the underlying issues behind this problem.

• Switching to Server-side rendering: Using server-side rendering (SSR) improves SEO because Google defers the indexing of client-side rendered (CSR) pages by weeks at a time. Therefore, Quoin engineers worked with Volo to transition the React site from a mainly client-side rendering model to a hybrid set-up that used SSR for static text, but retained CSR for user-level interactions. These changes not only improved performance and reduced page time-outs, but also let Google index the site more frequently.
• Publishing a valid sitemap: Although often overlooked, updating the sitemap is a simple fix that enables Google to index the site more efficiently.
• Decomposition of JavaScript file: Volo’s build tool bundled everything together in a giant JavaScript file that slowed site loading to a crawl. To fix this, Quoin decomposed the jumbo file into constituent parts - reducing the bundle size from 20MB to 80KB. This allowed us to serve the most important parts of the page (such as indexable text, links, and meta tags) first, while larger files such as images could slowly load in the background.
• Pruning dependencies: To reduce the file size and speed page loading, Quoin identified and eliminated unused JS libraries and out-of-date image files. 
• Implementing modern image formats: We built a conversion engine using AWS Lambda which automatically converts images uploaded in old, bulky formats into new, more efficient ones. This way, Volo can use the most efficient formats without their staff members having to change their current processes and learn the differences between PNG, WEBP, and AVIF.
• Miscellaneous bug fixes: While these are not typically noticed by day-to-day users, broken links and errors can impact Google’s ability to crawl the site, and reduce Volo’s search ranking.
• Enforced GZIP compression of assets
• Browser based caching
• Efficient SSL encryption and certificates
• Use of IPV6
• Use of HTTP/2 and HTTP/3

To test performance gains throughout the development effort, Quoin utilized automated page quality testing tools like Lighthouse. Due to these advances in the site’s setup and infrastructure, organic search traffic for Volo increased by 500% over a four month period. 

Process Improvements

Beyond the immediate concerns of SEO, we guided Volo on a series of new initiatives to improve their day-to-day development practices. 

• We focused on introducing coding standards and code review processes that would give developers more time to write new code, rather than cleaning up technical debt. 
• Volo had excellent system documentation; however, it had fallen behind in recent years, so our technologists worked to resurrect, clean, and update the system with our new changes. 
• We also recommended updates to Volo’s deployment infrastructure to give Volo’s development team more flexibility in implementing site improvements, while creating consistency in how they test their code.

UI/UX Enhancements

As part of Volo’s goal to provide a modern and engaging user experience, Quoin is collaborating with the client to redesign parts of the site to make registration flows and player sign-ups simpler and more intuitive. Our design team analyzed Volo’s existing workflows and created new flowcharts for suggested changes, with a particular focus on increasing engagement and ease of sign-up for first-time visitors to the site. Such changes have included updating individual forms, streamlining registration pages for pickup programs, and building a new dashboard section for users to check notifications. Throughout, we have strived to maintain branding and messaging consistency between Volo's flagship site and its new 'Volo Pass' offering, which is designed for frequent league participants.