Designed by the fans

The challenge

Watford FC are known as a club who put fans at the heart of everything they do. So when a recent website refresh led some fans to feed back that the club’s online-experience wasn’t offering what they wanted, the club listened.

After a competitive pitch, Catch were brought onboard to bring the digital experience back on-side by overcoming these challenges;

Lack of understanding of audience and needs - Whilst the Watford team had an anecdotal understanding of their audience, they had little quantitative evidence or detailed insight into site performance to support this. 

Felt as if it was left 'unfinished' - The confusion that a lack of navigation and content surfacing provided left users under the impression that the website was still under construction and not finished. Watford’s previous website, although in need of a makeover, was effective in the way that it functioned. 

The fans were not 'fans' - Fans were not in fact fans of the website itself, easily losing their way and feeling that the design and branding was not reflective of the club. Bounce rate across the site was high (particularly on mobile) and fewer than a quarter of visitors were scrolling down the homepage to reach key content links. 

Confusing user-journey - The user-journey for a fan visiting the site was confusing and there appeared to be a lack of direction within the site to enable fans to easily consume the content that they were most interested in. The hierarchy of content on key pages, such as the homepage, wasn’t aligned to their audience needs. This lead to fans being frustrated and clicking around the site aimlessly, trying to reach an area that they were looking for. 

No news archive - Watford FC are club that’s steeped in history and have experienced some incredible sporting moments in the not so distant past. They’ve consistently produced news articles for a number of years but there was no centralised place for news to be stored and historic news articles to be viewed. This lead fans to feel that the new site had felt as if that they’d lost a little bit of their ‘identity’ as a Club.

There’s no better source for fans to receive the latest club news than directly from their teams website. However a lack of a centralised news area that surfaced the most relevant content, meant that fans were going elsewhere to obtain this information.

GA review & heatmaps - As a first step, we examined in detail WFC site performance and how users were interacting with the site. Using Google Analytics, Hotjar heatmaps and visitor recordings, we were able to draw some key insights, identifying points of weakness and opportunities for improvement. 

It became clear for example, that despite the majority of the site traffic coming from mobile and tablet, site performance was much weaker for these devices with a higher bounce rate, lower dwell time and lower engagement. Insight into popular content and top landing pages also enabled us to identify the key areas of the site where improvements were likely to achieve the maximum ROI.

Online surveys - We wanted to gain direct insight into user’s onsite experience in order to better understand their behaviour and motivations, and to verify the popularity of potential new features. Hotjar polls were implemented, designed to appear at the point a users displayed signs of exiting. Users were asked a series of questions about their experience of the site, ease of use and the sort of content and features they would like to see. 

After running polls for just over a week, we received almost 1,500 fully completed surveys, giving us a strong data set for analysis. Over 25% of fans made comments about the site’s UX & UI, expressing frustrations about convoluted user journeys and missing content. Respondents also displayed an appetite for more player and staff information as well as easier access to video content and match day highlights. The key takeaway however; was the users’ desire for more news and the ability to access past news articles and club heritage content.

User testing - It's always important for us to validate our designs by testing them on a wider audience. We used an online platform to remotely test the clickable prototype with different participants. Potential users of Watford FC website were asked to complete a series of tasks too. The tasks were chosen based on the key user journeys that we discovered and sessions were recorded and analysed to identify areas for improvement on the prototype. Based on the feedback received we iterated on our designs. 

Heat maps - We ran heat maps across Watford’s key pages to find out which content fans were most interested in and interacting with the most. From our findings we were able to promote this content rather than expecting the user to scroll down the page to find what they were looking for.

2nd theme - The second theme is part of the solution for our redesign so it goes with the re-visiting the application of the brand. After working with the inherited code base for a couple of months we decided that it would be best to create a separate theme for this redesign, instead extending the old theme. This allows us to improve efficiencies within the theme and reduce code duplication over time as we switch each section of the website over to the new theme, with the end goal of having just one theme running. This is all controlled using Drupal 8’s ThemeNegotiator class (You can check out the interface here) and the configurations for this are stored within Drupal 8’s configuration management to allow the changes to be applied at the same time as the new templates and styles.

Caching improvements - With matchday live growing in popularity this season the implementation we inherited was facing performance issues due to the responses not being cached. With this slowing down the website we investigated where the issues were and found that the match day live feed was serving a non-cached json response. By changing this response to be cached for a small period of time, we reduced the traffic that was going to the web servers during match day live by 78%. (Comparing 6/1/2018 to 10/2/2018)

News area - As a central place for news was the solution that our research pointed to, we created a news listing using drupal views which allows the user to filter content based on taxonomy terms which users understand. We deployed the new fields and taxonomy vocabularies first to allow Watford to tag their content, so it was ready for when the news area was released. This uses the views infinite scroll module to allow more items to be loaded in to the page via ajax.