Playmaker Platform

Creating A World Class Sports Platform

Playmaker Platform

Creating A Flexible World Class Sports Platform

The Project

A large number of football clubs were due to come out of a long-term contract with the English Football League. Our aim was to create a sports platform ,initially aimed at football, that could be sold to these clubs. My role on this project was to lead the design of this platform from the functionality of each template to the process used to create each template. I also came up with the initial list of Opta widgets and their settings which the team then built on.

The aim was to create a platform that was so flexible it could cater for each club's needs.

The Project

A large number of football clubs were due to come out of a long-term contract with the English Football League. Our aim was to create a sports platform ,initially aimed at football, that could be sold to these clubs. My role on this project was to lead the design of this platform from the functionality of each template to the process used to create each template. I also came up with the initial list of Opta widgets and their settings which the team then built on.

The aim was to create a platform that was so flexible it could cater for each club's needs.

Project Aims

Create a platform initially focused towards football
Needs to allow for a distinctive design for each club
Cater for the key user journeys of football fans
Flexible enough to cater for each club's needs
3 clubs needed to go live in the same week

Creating Playmaker

Atomic Design Approach

Having three clubs already signed up to the platform we needed to follow a process that would streamline every part of the design and development process - enter Atomic Design. This approach allowed for quicker wireframing and visual designs of templates for each club to sign off. It also made it simpler, building a design system for each club which in turn meant Front-end had a style guide to follow to keep everything consistant during the build.

Atomic Design Approach

Having three clubs already signed up to the platform we needed to follow a process that would streamline every part of the design and development process - enter Atomic Design. This approach allowed for quicker wireframing and visual designs of templates for each club to sign off. It also made it simpler, building a design system for each club which in turn meant Front-end had a style guide to follow to keep everything consistant during the build.

Mobile First

Along with Atomic Design, working from a mobile first approach was also essential. Dealing with the smaller screen first meant the harder layout and design problems were dealt with earlier and allowed for a less problematic design phase. This was a massive time saver when it came to templates such as match centre, fixtures and player profiles.

Mobile First

Along with Atomic Design, working from a mobile first approach was also essential. Dealing with the smaller screen first meant the harder layout and design problems were dealt with earlier and allowed for a less problematic design phase. This was a massive time saver when it came to templates such as match centre, fixtures and player profiles.

Streamlined Design

Flexible modules were designed for numerous elements such as player profiles. This saved having a number of different modules just to show a player in different pages/slots. Instead I designed one flexible module that could be tweaked using CSS to cater for a number of different scenarios. The same idea was used for features like next/last match modules and promotion modules. This, along with the other processes, led to a more streamlined design and development process.

Forward Planning

To future proof the platform every symbol in Sketch was ordered and labelled and libraries were created. This will allow other designers to quickly create templates and modules that were consistant and available in the product. Moving forward this will allow future websites using this platform to be created with ease.

Key Templates & Features

Homepage

The homepage is built up of a number of different modules: Headline News, Latest News, Fixtures & Results, Videos, chosen Player Profile, Social feed, featured promotion and product carousel for the Online Shop. The idea being that the club can decide which modules to show and in what order, depending on their current focus and requirements. For example if they have just announced the new kit they may want the shop or promo module sitting higher up the page. Likewise if the season is over and there's no fixtures then they can turn the fixtures module off altogether.