Every Pittsburgh sports fan knows Heinz Field to be the crème de la crème of football fields in town. It’s home to the Steelers and Pitt Panthers games, and many concerts that require stadium seating. As such, it needs to have a top of the line website for its patrons.
The main purpose of the website appears to be to provide useful resources to sports fans, and to promote an avenue through which someone could book an event at the stadium.
Heinz Field is mainly an event venue for the Steelers and Panthers, so it is fitting that the site has a visible social media element on the right side of the page with links to the field’s social media as well as that of the Steelers and Panthers. Throughout the site, they make sure to really promote those teams and provide useful resources for fans of those teams (directions, parking, buying game-day gear, etc).
Throughout the site, they make sure to really promote those teams and provide useful resources for fans of those teams (directions, parking, buying game-day gear, etc).
As a venue that houses not only sporting events, but large concerts, rallies, and corporate events, it makes sense that the website is jam-packed with an abundance of information and links, however this can get a bit confusing as some of those goals end up competing with each other. But designing a website with these audiences in mind is a terrific challenge.
There are three “above the fold” navigation bars and an extensive navigation element at the bottom of the page. It’s a bit repetitive, and maybe could be de-duplicated a little.
One easy fix is the icon menu on the top right. It did not help that the meaning of the symbols were not immediately clear. One symbol is a seated figure which we mistook for a handicapped symbol (it lead to a seating chart, but not for the handicapped). The content of those links in the icon-based navigation bar are useful because they are all related to event-day needs: directions, parking, seating charts, and a link to The Weather Channel’s website for the day’s weather forecast. They just need a “tool-tip” display to give users a quick visual cue about their purpose.
One symbol is a seated figure which we mistook for a handicapped symbol (it lead to a seating chart, but not for the handicapped).
The weather icon links off-site, but there is no indication that if you click it, you will be leaving the Heinz Field website – and the other icon links do not go off-site. Also, the links to the Steelers game day information in the central promotion area also link off-site (to the Steelers.com website) with no indication.
There is a slideshow to promote various events or timely messaging (concert tours, bag safety, etc). It is designed to stretch from left to right margin, which is fine, but it creates tension by not allowing for any padding. Also, it causes some overlap with different elements in the website.
It is odd that a website whose main audience and purpose revolves around game day football action would come up short when using its central promotion space for a football game. We found that events for the Pittsburgh Panthers football games were listed without images or much detail. The Steelers’ event links, on the other hand, have some of their information covered up by a “Game Day” tag. When was that kickoff time again?
We found that events for the Pittsburgh Panthers football games were listed without images or much detail. The Steelers’ event links, on the other hand, have some of their information covered up by a “Game Day” tag. When was that kickoff time again?
Just below the central promotion area on the homepage is another set of navigation links, laid out in a grid. They are attractive and support the underlying goals of the website. We see a bit of a conflict in the top-left image, though, where its treatment is different than the others. Three of the images work as links, but the top left one is split between two links and the text of the image has no link attached at all (unlike the other three). This can be confusing. It might be worth thinking about giving Pitt and the Steelers each their own yellow block, and combining the “Book a Tour” with the “Book and Event” block.
The mobile site does not require any “pinch and zoom”, which is great. But it does present a few challenges that could be fun to work on.
While there is no need to horizontally scroll, the mobile page is simply a smaller, squashed version of the larger version. Some links and text overlap, making them impossible to use or read. The main promotional slideshow at the top of the homepage does not respond to touch navigation, and offers no alternate way to scroll other than to wait for each slide to load.
While there is no need to horizontally scroll, the mobile page is simply a smaller, squashed version of the larger version. Some links and text overlap, making them impossible to use or read.
Slideshow content is right up against the left and right margins of the page, with no padding, which would make some of it difficult to read. The slideshow content is also really difficult to read on mobile devices, since its font size is really scaled down – almost too tiny to see.
In our tests, the site came up with 312 CSS errors and 166 HTML errors, which we recommend looking into.
The loading time for the site is 12 seconds with the first byte loading in 1.4 seconds. This is on the slow side – especially for mobile users. They should certainly try to cut that time down. The weight of the Heinz Field site is currently 5.17MB, well above the average website weight of 1.79MB. They could try to make the site a bit lighter by using less (or better optimized) images or use a smaller code base. Some great ways to address the speed and weight issues include specifying image dimensions, optimizing images, and enabling image compression.
Their site also had 29 errors and 12 alerts when put through the WAVE test for accessibility. The errors were generally instances of missing alt text and empty links. A bulk of the alerts were redundant links. Quickly fixing these few problems with a bit of maintenance would be really useful for any patrons with disabilities, so it should certainly be a priority.
Overall, the goals and the audience of the website are very clear and it fits in a lot of helpful information for any football fans and patrons. The icon-based navigation bar is great for any last minute information needed on game days, the social media bar on the side can get any Steelers or Panthers fan caught up on their favorite team in seconds, and there’s plenty of Pittsburgh pride showing throughout the site to get you revved up for games!
Overall, the goals and the audience of the website are very clear and it fits in a lot of helpful information for any football fans and patrons.
Make sure to head out and support the Steelers and Pitt Panthers this season, and check the Heinz Field website for helpful directions, seating charts, and even weather reports the day of!