Case study

Football Association of Wales

Building a digital ecosystem for Welsh football.

Visit faw.cymru

In September 2022 Hopp Studio (where I work as lead engineer) was awarded a contract to transform the digital presence of the Football Association of Wales (FAW). This was the culmination of months of hard work where I worked directly on the tender, working closely alongside the MD, account manager and designer, providing details on the tech we would use, providing indicative timings, working out the budget and attending client meetings.

This project is scheduled to span over 2 years – we’re currently 10 months in and we’ve delivered lots of really exciting tech already, and have lots more to deliver.

The FAW has over 20 web properties all with different branding, and all executed with varying degrees of success. The plan is to transform all the web properties in to one cohesive experience – providing a global header which will offer easy access to everything FAW, and building the sites with a global set of components and styles. The tech stack it being built upon APIs (cue WordPress’s fantastic REST API) in an uncoupled way to ensure it’s robust and resilient.

What we did

1. Building a Match Centre that integrates with a 3rd party API to pull in match data, both in real-time and in the background to import matches and match data.
2. Design, development and maintenance of the faw.cymru site
3. Advanced news/blog functionality
4. Extending various facets of core WordPress , such as Custom Post Types, Taxonomies and Comments
5. Ongoing feature development, optimisation and maintenance

Outcomes

3 big takeaways

01. A world-class Match Hub, fully integrated with a 3rd-party API

02. Scalable tech, laying the groundwork for a growing digital ecosystem

03. Advanced News and Blog functionality

01.

A world-class Match Hub, fully integrated with a 3rd-party API

A Match Hub?

A Match Hub provides real-time text updates of football matches. There’s a realtime feed covering all the key moments of a match – things like goals, yellow/red cards, substitutions etc. In addition to the live feed there’s also blog posts, videos, team lineups, match info (like attendance and referee info) and more. A Match Hub shares a lot in common with other live feeds you’ve likely come across on things like news websites and social media platforms. Take a look at a match here.

Looking at things differently

I am a firm believer that creative solutions are often better than overly technical ones, and if you look at something from a different angle, or think about it in a different way, then you can see things completely differently. Thinking laterally can often lead to the best outcomes.

WordPress already has some really cool tech than can be used for a Match Hub live feed: the comments system. Thanks to WordPress’s initial focus on blogging (fyi it’s so much more than that now), its comment system is mature, stable and extensible. All of this meant that it was the prime candidate to be used as the basis for the Match Hub live feed. I needed to do some testing to validate my idea, and built a prototype in just a few days.

At its core the Match Hub live feed is the WordPress comments system with some AJAX added to pull through comments (which we call ‘updates’) automatically without visitors needing to refresh the page. It’s repurposed to only allow editors to add updates and the media library has been brought over to the front-end for editors to add updates directly on the front-end.

Integrating with a 3rd-party API

A custom JavaScript and PHP solution was built to integrate Analyticom’s COMET System with the Match Hub to pull in competition and match data both in realtime and via background processes.

I worked closely with Analyticom and FAW, devising the best way to integrate with Analyticom’s API, ensuring the API worked as expected, making suggestions and troubleshooting issues and bug fixing.

02.

Scalable tech, laying the groundwork for a growing digital ecosystem

Starting from a good base

The timeframe for delivering the Match Hub was so tight that things needed to be built at breakneck speed. But, of central importance was creating a really high quality piece of tech and laying the groundwork for the broader digital ecosystem. This meant using the whole array of skills I’ve developed since 2014 building WordPress-powered tech to ensure we delivered a scalable, highly performant piece of tech.

WordPress is going through a transition with the introduction of what is known as Full Site Editing – we didn’t have time to fully embed Full Site Editing but we were able to implement some parts of it, which means if we feel it necessary we can transition over fully in an iterative way, although our current hybrid model is working great and offers a nice blend of shiny new WordPress, and classic (and more stable) WordPress.

For the fans

Welsh football has a diverse and growing fanbase, with an independent poll in 2022 indicating that football had overtaken rugby in terms of popularity for the first time (if you’re reading this from outside of the UK, rugby is the de-facto national sport of Wales, so it’s a big deal that football seems more popular than rugby now).

With both the domestic and international games going from strength to strength (in November 2022, Wales played at the World Cup for the first time since 1958), a key focus of the new digital ecosystem is fan engagement. Starting with the match centre, which has been built for fans to have easy access to every previous and future international match, allowing for easy filtering by competition, team and year.

03.

Advanced News and Blog functionality

The power of templating in WordPress

Templating in WordPress has evolved significantly in recent years, with there now being 3 ways to do it, old-school PHP templates, Site Editing Templates and templates within custom dynamic blocks. The news and blog functionality for faw.cymru makes use of these different ways of templating to provide a large array of layouts for news and blog grids and archive screens.

The blog grids can be easily set up by site editors, and displayed on any page across faw.cymru, filtered by tag. See here, here and here for examples of the way news can display.