In 2017 we had the pleasure of building a new web platform for the Wheeling Nailers, an ECHL hockey team affiliated with the Pittsburgh Penguins. Their old site was outdated and wasn't ready for this new age of mobile devices so we designed a new platform, updated their content architecture, and developed a new blazing-fast Drupal site. Go Nailers!
Strategy & Workshop
This was our first experience with an athletic organization, so we didn't have a good handle on how the organization was structured or how their customers were engaging with the brand. When it comes to understanding an organization and creating a shared vision, we've found design workshops to be a particularly effective tool.
We met with the Nailer's staff at their headerquarters and helped the team through exercises related to strategic design thinking, customer/org needs, content architecture, and visual design.
Through the workshop we were able to define and prioritize the main Wheeling Nailers audiences: package holders, groups, walk-up customers, and partners. We also identified and prioritized the top concerns for each audience. This work really goes a long way in informing our site structure and design decisions.
It was also important for us to try to hone in on a visual style for the brand online. Most of their print work was heavily textured and layered, which is nearly impossible to mimic on the web. We were able to hone in on a few concepts, which gave us some direction when working through visual design.
One of our favorite tools in quickly working through visual design systems are "style tiles." These small compositions give us some idea for how a website's components may work together when styled in a particular way.
We tried to maintain the nature of the Nailer's print work, while also modernizing the design language and making it more appropriate for a digital medium. After a few small revisions, we agreed to pursue a site design using the style tile in the foreground as inspiration.
Armed with our content strategy, style tiles, and site architecture, we could finally begin the work of designing the site's many interfaces. We like to begin this process by sketching on paper before moving ideas into wireframes and ultimately pixels and code.
This project gave us an opportunity to tackle some new challenges that are unique to professional sports organizations.
When games were played, the "Upcoming Game" on the homepage was swapped out for a live scoreboard. Not only did this scoreboard display the current score and play-time during the game, but it also displayed the game's results for a time after it's conclusion. Visitors to the site could also quickly access the live radio and video broadcasts of the game.
This scoreboard was synced with on-ice data every 60 seconds due to web services limitations.
Hockeytech provides the ECHL network with a full suite of data services related to on-ice statistics and scoring systems through it's LeagueStat product. Through these services we were able to sync team roster data, season schedules, and game-day score updates to the local web platform (powered by Drupal). Having local data allowed us to use Drupal's systems to display content in more demanding ways: like attacting promotions to specific games.
Rather than using Drupal's native commenting systems, we decided to implement the Disqus commenting engine instead. This gave the Nailers better access to moderation tools, notifications, and analytics data. This strategy also allowed us to promote articles which were more engaging based on social sharing and commenting sentiment.
We developed a responsive game calendar using data synced directly from the ECHL's data services. The calendar displays upcoming home/away games, allows users to toggle the display into a list view (default on mobile), and gives visitors the option to download a dynamically generated calendar for their email client (Outlook, iCal, etc).
The Nailers sell advertising directly on their site without the use of an ad network, so we implemented a simple system that allows them to manage purchased ad space on their site. The system allows them to schedule ad placements, configure rules for different regions of the site (sidebars, footers, premium regions, etc), rotate ads dynamically, and gather useful analytic data for each ad impression.
Feature Spotlight: Responsive Image Sliders
"Responsive images" describes a set of technologies and techniques that serves different images to a user depending on their display. For instance, large desktop monitor users would see a large image, while smart phone users would see a smaller image, consuming less data and improving the perceived speed of the site.
We've been implementing responsive images by default on our new sites for a while, but it's always been tricky in full-width sliders. If we configure the site to automatically scale and crop images, often the important parts of the image are cropped out. It's a very cumbersome process for editors.
In this site, we give editors the ability to define a "focus area" on images, and the site automatically scales and crops around the important area of the image. This results in images that always capture the action and editors that don't need to fiddle with crop settings!
Bye Bye Bounce Rate!
It's not often we get to observe a site's performance through three platform updates. Omni launched a new platform in February of 2017 and the Nailers' moved to a conference-wide web platform nearly 20 months later. While their site was built on Omni's platform, they saw a 40% reduction in bounce rate!
Not only did we launch a new responsive site for The Wheeling Nailers, the new platform was easier to manage and faster than the previous platform. The new site also adopted modern development practices, allowing to review and test new features before launching them to the live site. Omni was proud to be a part of this new digital strategy for the Wheeling Nailers.