Grassroots Growth

Clwb Cymru is a Football Association of Wales Trust programme created to educate and develop key club volunteers and facilitate them to grow their grassroots club within their local Welsh community. 

We created the Clwb Cymru brand and a broad suite of information resources and built a new digital platform to support the clubs. 

Our vision for Clwb Cymru was to create a solution that was scalable, easy to use and extensible, ensuring that ease of use was at the heart of everything we designed and developed.  

The website will grow massively over time, so creating a design that works with minimal and maximal content was very important. We planned this through thorough testing of the UX and UI, internally and externally with stakeholders to identify the strongest route to future-proofing this build.  

The site contains an easy-to-search multilingual resource library with over 130 resources, and growing, for clubs to download in both English and Welsh. A unique ‘pack’ functionality that combines multiple resources into a single zip file with the zip created programmatically on the fly, saves hours of administration time.  

At høpp studio they truly care! The team have taken the time to understand me, my project and the needs of our volunteers who sit at the heart of Clwb Cymru.

Football Development Manager, FAW Trust

Having never worked on this type of project before they have provided some incredible insight and suggestions that I would have never even considered.

Football Development Manager, FAW Trust

The logo was designed to represent the many hands of volunteers within the community, linking together to support one another in making their club the best that it can be within ‘The Welsh Way’ FAW Trust brand vision. The circular graphic of the logo and the volunteer ecosystem formed the basis of the design and navigation for the site.  

From approval of the UX, prototyping commenced, with a serious focus on implementing technologies that provided the user with an easy and informative way to navigate through the site, such as the circular navigation device and carousel, which makes it easy to find information and reinforces the function and form of the logo.  

The whole site is what’s known as a “Single Page App”, meaning when a user navigates to a new page, instead of loading all of the site assets again (css and js), only the content is updated, offering near instant loading, and making the site feel snappier, and easier to navigate and use. Single Page Apps can be difficult to pull off because the sites’ javascript has to be loaded a different way, which is why lots of sites don’t do it. But we felt that the benefits to the user outweighed the technical overhead in doing it. For example, getting the resource library working with the Single Page App effect took a really sharp focus from a solution finding perspective and some creative ways of loading the code when we needed it.