Spirit of Soccer

Role and Responsibilities: UX Designer

A pro-bono project for an international sports charity with a short deadline and limited resources. This project involved becoming a product owner, UX Designer and Wordpress Developer.

I took on a role of Product owner, as well as UX Designer in order to keep decision making short and ensuring the client had a system that would work for them for the next 5 years. I communicated the design and content needs with the designer, and client(s) in order to obtain assets and share progress.

Throughout the project, although more so in the final half, I became a Technical Advisor, sourcing suitable Hosting and domain management options, developers for future plans and the creation of the Wordpress Theme Itself and how the interface should be used.

I later provided training on the CMS to a number of the marketing team at Beyond Sport in order to populate the site with their new content. This was done remotely over 4 sessions.

The Brief

Founded in 2009, Spirit of Soccer’s mission is to use the football to educate children about landmines and explosive remnants of war through its multi-award winning Mine Risk Education (MRE) programme. In 2014, the charity wanted to create a website to promote their operations across the globe and to coincide with a launch of new programs in Iraq and Cambodia.

Their site at the time had been hand built in 2005. It suffered from a dated design, no CMS to manage content, meaning they were continually paying for updates. A fixed-width build meant the site was not accessible through mobile devices and was starting to cause them penalties with search engines.

The Process

Working with the marketing team at Beyond Sport, and Spirit of Soccer, and Visual Designer Mikey Allen we developed a simple brochure site using Wordpress. Because of its known simplicity for content creators, we wanted to ensure it was easy for the team to produce new content, but also ensure they would be able to seek support in the future from other designers and developers meaning the site would have a better future.

I interviewed the founder and the PR team to discuss what the site needed to say about the charity. We considered how we would measure its success and shared preliminary sketches of a homepage design based on a recent presentation pack to express a design and content direction that matched the quality of the work they did in printed brochures and PR outreach.

This information gave me a clear idea of the content types, that the site would need to cater for. I worked outwards starting with a case-study page for one of the projects, thinking about the main content and accompanying meta-data such as the year it was founded, where it operated, what it was doing and the partners that may be involved. With the project co-ordinator I repeated this process for each content; or page type, until we had the core content area nailed down then began to look at how this information could be found through site navigation and began considering the overall Information Architecture.

I helped with creating a content brief, which was then given to the PR team to produce the copy and source imagery to be used in the design and page content. Content guides and Page Templates were created in a Google Doc which could be used for drafting content before adding it to Wordpress. The guides gave direction on how to write content, what type of images to use for certain things along with writing guides to ensure that each related article had the same style. The templates provided a structure of the content and a list of sections that were required to fill in.

These templates also provided me with the input structures I would need to develop the admin interface for entering this content into Wordpress, and in-turn how and where it would be output into the UI.

Design and Build

With Mikey taking the lead on the visual design, I developed a theme for use with Wordpress. Starting from scratch, I created a simple structure and included the ability for them to surface certain content types across the key navigation areas of the site. The full-screen homepage is entirely customisable through the CMS adding further control for their communication strategy online. Because the charity operates internationally and meetings are often had in countries with little to no signal strength we wanted to make sure the site had fallbacks for graphical content and layout techniques to ensure it would work on old technology first.