Football Foundation

The Challenge: Design and launch a best-in-class website and grant application portal. Within five months

Our team was asked to design and build a new website and grant application portal that reflected the look and feel of the updated brand and made it easier for grassroots football organisations to apply for funding.

The Football Foundation team wanted their new website to:

• Reflect the new Football Foundation brand, positioning and strategy
• Deliver an improved user experience
• Increase the number of applications submitted through the funding application portal
• Provide a user experience aligned with the needs of, and optimised for, the grassroots football community
• Highlight the foundation’s good news stories
• Drive more organic visitors to the website
• Showcase high profile partners and ambassadors
• Be optimised for search queries of the grassroots football community
• Increase the brand visibility of the foundation
• Provide Football Foundation staff with an easy-to-use content management system for updates
• Enable applications to self serve throughout the application process
• Be ready for launch within five months!

What we did: Designed and built an easy-to-maintain, user-centric website using Drupal 8 CMS.

Design

Our design and web development teams used the latest Drupal CMS to deliver a best-in-class website.

It began with a digital strategy workshop with the charity’s key stakeholders. Our team facilitated and helped align the charity’s needs, along with their commercial partners, to produce a detailed plan of action.

Our UI and UX-led approach ensured that the website provided a seamless, intuitive journey for end users. The inclusive design conformed with the latest accessibility standards to make sure the website could be used by everyone - a key requirement of the foundation’s government partner, the Department of Digital, Culture, Media and Sport.

The Drupal CMS was designed with an intuitive interface so the foundation team could implement changes quickly and easily.

SEO

The website was built to integrate seamlessly with our redesigned grant application portal and included a series of visual filters to ensure that users were directed to the right application form for their needs.

Our SEO goals were simple - to ensure search visibility didn't drop as a result of the migration and to improve the website’s organic visibility. Step one was to carry out research to discover keyword opportunities, related keywords, and potential questions from the sites user base.

An SEO audit was conducted prior to the launch of the website to identify gaps and opportunities for on-page optimisation.

We reviewed existing content and metadata to ensure that the website was optimised to meet the search intentions of their target audience and adhered to best practices. We re-wrote the website’s content and metadata in an SEO-friendly way.

A full technical SEO migration plan was put in place and included URL mapping, technical review of the platform, go-live support and post-live checks.

As a result, we’ve seen an average increase of 5 positions for targeted keywords and organic traffic has increased by 97% since migration.

Drupal build components

We used Drupal’s layout builder which allows you to create sections as a wrapper and then templated blocks to populate them. The CMS editor can customise the page to change the background and optimise the space around the copy and images they are using.  

We created all the blocks and configuration for the sections in code. We needed to create blocks in code specifically for layout builder, so we developed a module from scratch. The new module features boilerplate code that can be used when creating new blocks to reduce future custom development.

We created custom validation to allow a CMS user to add blocks to sections which were not compatible with the Layout builder

We have created a custom image optimisation module using Mozjpeg, Jpegtran when uploading images to the CMS. This optimises the images without needing to install any of the other image styling modules.

For the frontend development, we have built a bespoke, zero-dependency custom Drupal 8 theme. This theme uses the Bootstrap 4 CSS framework, uses Sass as a CSS preprocessor and vanilla JS for simple UI features whilst using the Vue.js framework for more complex user interface modules. Our custom Webpack 4 frontend build configuration seamlessly integrates with Drupal 8’s ecosystem. This both enriches the local development experience and ensures all frontend assets are fully optimised for production.

Using Agile methodology delivered through a scrum framework, we kept the project on-track throughout, and ensured that the website was delivered on-spec, on-budget, and within the five month launch window.

Results:

A high performance website delivered on-spec, on-budget, and on-time.

The new website has already delivered a huge increase in grant applications plus significant improvements in performance, ease of use and accessibility.

• 500% increase in the number of grant applications
• Most users gave the new website the top score of 7 out of 7
• An immediate uplift in overall website performance of 32%
• Ranking in positions 1-3 for 24 target keywords
• The accessibility index across both desktop and mobile increased to 98/100 from 60/100
• The Desktop SEO index increased to 100/100 from 80/100
• The Mobile SEO increased to 98/100.
• Average position in search has improved by 5 places based on targeted keywords
• 300% increase in organic click through rate

 
The design of the website and the use of Drupal CMS has provided a future-proof platform through which iterative enhancements to content and performance can be implemented quickly and easily.