North America’s largest junior hockey league, the CHL, comprises of three regional leagues: the QMJHL, the OHL and the WHL with 60+ teams distributed between them. After five years of the same content presentation, the network needed to catch up with the times and redesign its online properties and the system that managed its digital content.
Our task was to redesign all 70 of the CHL networks through a single management system built in WordPress and establish a consistent brand experience. The previous website suffered from frequent outages, scaling issues from a technology perspective, it wasn’t mobile optimized, expensive to maintain and it was not user friendly to customers. In addition, the end user wanted a rich statistic platform.
Sports sites drive traffic and that traffic can be monetized, it’s not that complicated. At the league level, digital revenue is driven by ad sales and sponsorship, whereas for teams, revenue is driven by ticket sales and sponsorship. The challenge was to maximize the revenue opportunities on the site. To do this we needed to identify what users really wanted out of the site, and once there, how we could get them to stick around.
The idea, like most, was simple — the execution, not so much. If we could create content that was not available anywhere else fans would keep coming back to it. If we could extend their visit by keeping them engaged they might stick around for longer.
The old CHL site design consisted of a rigid page structure that did not allow for varying ad sizes without disrupting the page layout. As revenue opportunities are directly tied to the ability to serve varying sizes of ad units, this would become the first opportunity. We recognized that of the wide number of ad sizes available, some were more popular than others. This would allow us to constrain our requirements to about six ad sizes in total, but still offer advertisers variety in the ad sizes available.A challenge that presented itself was the presentation of ads on a small screen. This was achieved by developing mechanisms to control the appropriately sized ads based on screen breakpoints and screen size.
Sponsorship plays a huge factor in the network’s ability to attract brands that wish to market themselves online. To offer this in a turn key fashion, we needed to create elements of the site’s content that fans would be drawn to and brands could own. One such product we developed, Game Centre is a comprehensive statistical view of the game with real time updates on every recorded event; goals, shots, faceoffs, penalties and hits. Check out Game Centre in action http://new.ontariohockeyleague.com/gamecentre/21523/play_by_playFor the homepage, we developed a dozen or so widgets; polls, player spotlight, stats trackers, wallpaper and announcement overlays are just some of them. Each widget delivering valuable content or user interactions to which a sponsor could associate their brand.The concern with the ability to sponsor so many items, was that the presentation of the content could quickly become marred with a barrage of logos like a stock car. To circumvent this, we developed style guidelines, and size requirements for each widget to achieve the best of both worlds, satisfied sponsors and a tasteful visual experience.
While the sites did not themselves sell tickets, the push for fans to purchase tickets was made at every opportunity. Links to buy tickets were added to the scoreboard for upcoming games, displayed within the preview of Game Centre and included in the season schedule and daily scores. The announcement bar, a site wide promotional component was also used heavily to promote upcoming games on team sites.
Responsive design is the task of designing flexible layouts for web pages that allows them to scale between small and large screens while making the best use of available space.For the CHL network this proved to be more complex and required more than breakpoints to solve. Some of the biggest complexities with a responsive layout for a sports site was the was the main menu system and the display of tabular data.
Navigation proved to be one of the most complex components of the design process. The challenge was to build a menu system, the contents of which we had no control. When our best efforts of minimizing items in the main menu fell short, a scalable solution was required.We assumed using a mobile design pattern for the main navigation (hamburger menu) would simply work if applied to the desktop. While this approach worked several times in past experiences, we discovered that our audience of 40+ parents and grandparents simply did not appreciate this mobile convention on large desktop screens.The hamburger menu design pattern does a fabulous job of containing navigation elements in a tucked away little drawer hidden behind a button. On a desktop screen however, where there is enough room to display a navigation system and its subsections, the extra click to expose the menu caused visible frustration from our audience in our user tests.The solution was to build two distinct navigation systems that worked differently for larger screens and mobile screens. Horizontal, top aligned navigation for large screens over 728px and the hamburger menu for screens smaller than 728px.We ended up developing an infinitely hierarchical menu system, that displayed a cascading list of items. On desktop when space allowed, the topmost level navigation items would display horizontally and those that did not fit would fall into an overflow menu under the non-descript More heading. If the screen reduced in size but was still greater than 728px, nav items that did not fit would fall into the overflow menu. On mobile it displayed a list style menu which could be expanded to reveal subsections if they existed.The result was a highly functional, scalable menu system that the teams could use to build out their content plans with virtually no tech support required or make-it-fit requests to decrease font sizes, padding or letter spacing.
Tabular Data Layouts
As you might imagine, a sports site has several statistics displayed as tabular data. Player statistics, team statistics, standings, schedules, streaks, rosters, transactions are all displayed using a tabular format. However, designing usable tables for mobile is not as trivial as it might appear. While several easy solutions exist such as hiding columns or side scrolling, none really addressed our primary mandate, that mobile would not be a diminished experience.With the direction set, we embarked on a mission to deliver the best possible user experience in the presentation of tabular data. More on that here.
While building a content management system from scratch was a tempting notion, it did not align with the goals of the product. We needed to deliver a CMS solution that felt familiar with our team administrators and one that would instill confidence in them from day one. After several team administrator interviews, one platform surfaced as a clear winner — WordPress.While WordPress was not our first choice, it did offer us a number of benefits:It had a large community of developers which, if needed, each team could leverage as several had their own in-house development resources.It has a large ecosystem of plugins (this proved to be less useful in the long run).It offered a familiar and robust content management system for the most common tasks that teams would ever need to use.It had the kind of household brand name that put the team managers at ease with an overhaul of this kindWe realized that WP didn’t fit our needs entirely, especially when it came to building a multilingual network of sites. For those of you in the know, WordPress Multisite didn’t meet the needs of the project either. It also lacked the ability to manage short form video content, have a mature API (since matured) and a host of other small but potentially challenging drawbacks. Nevertheless, our collective wisdom eliminated all other candidates and WordPress was chosen.WordPress did prove challenging for the engineering teams to work with. They were able to achieve success with first creating a development environment where more familiar tools and development workflows could be used, Bedrock by Roots.io provided this environment.The greatest success was found with our first demos to the team administrators. They felt confident in the tools, were simple enough to use and provided them with on-the-go editing with the CMS being responsive right out of the box.
The Ontario Hockey League was one of the first of the sites to launch with the redesign. The team at Stadium Digital and OHL did a phenomenal job of preparing the site with fresh content and more importantly a means for site visitors to provide feedback on the site. Visitors found the site easier to navigate, enjoyed the depth of stats available in variety of presentations and the overall ease of use and clarity of content. Most of all availability of great content on all devices was one of the top favourite features.While there is still a lot to learn and many opportunities to uncover. The process of listening to users, empathizing with their needs and developing solutions for them is a winning approach. To see some of the sites on the new platform see below.ontariohockeyleague.ca, whl.ca, theqmjhl.ca, kitchenerrangers.com, www.guelphstorm.com,www.hamiltonbulldogs.com,www.niagaraicedogs.net, www.attackhockey.com, www.sarniasting.com, www.soogreyhounds.com, www.sudburywolves.comNote: Work performed for Stadium Digital
Interested in this project?
Download the full case study to get the inside scoop on how we helped the CHL Network re-design hockey stats and implement a template across over 60 sites.Download Case Study