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
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.
Template features
- Content can be prioritised or removed by clubs themselves
- Set of customisable modules that cater for the fans' key user journeys.
- Showcase key signings or important club statements using the Breaking News module.
- Fully customisable shop module means clubs can promote anything from Kit ranges and training gear to Mother's/Father's day gifts.
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.
Template features
- Content can be prioritised or removed by clubs themselves
- Set of customisable modules that cater for the fans' key user journeys.
- Showcase key signings or important club statements using the Breaking News module.
- Fully customisable shop module means clubs can promote anything from Kit ranges and training gear to Mother's/Father's day gifts.
Article pages
My aim was to design Article pages that could be easily consumed. The use of a left column for content and right column for flashing banners has become the norm for many football websites. However, I have used the one-column approach as it allows the user to read the content without distraction.
Within the main content, the club have the flexibility to add images, galleries, videos, captions and a host of other embedded content to create content-rich pages that fans will enjoy reading. Below this we bring in related and latest news to allow fans to move easily on to more news. Clubs also have the option to bring a range of modules from the home page onto the footer of the page to promote other features such as the new kit.
Template features
- Clear single-column approach
- Host of embeddable content and features
- Related content continues the fans' journeys
- Clubs can drop modules on to this page to promote features such as player profiles and the shop
Article pages
My aim was to design Article pages that could be easily consumed. The use of a left column for content and right column for flashing banners has become the norm for many football websites. However, I have used the one-column approach as it allows the user to read the content without distraction.
Within the main content, the club have the flexibility to add images, galleries, videos, captions and a host of other embedded content to create content-rich pages that fans will enjoy reading. Below this we bring in related and latest news to allow fans to move easily on to more news. Clubs also have the option to bring a range of modules from the home page onto the footer of the page to promote other features such as the new kit.
Template features
- Clear single-column approach
- Host of embeddable content and features
- Related content continues the fans' journeys
- Clubs can drop modules on to this page to promote features such as player profiles and the shop
Team Listings
'A team listing with a difference' - the default setting is for the listing to clearly show the selected team in order of position but through the use of filters the fan can hone in on stats such as who has the best pass completion or which defender has the most goals. Essentially this page is two-in-one: a team sheet and a season statistics breakdown.
Further to this, the page allows fans to easily see players who are in/out on loan as well as who the skipper/vice skipper are. Fans can use the tabs at the top to easily jump between squads.
Template features
- Easy to browse the Team sheet
- Options to order team by a host of stats
- Quickly jump between teams using tabs
Team Listings
'A team listing with a difference' - the default setting is for the listing to clearly show the selected team in order of position but through the use of filters the fan can hone in on stats such as who has the best pass completion or which defender has the most goals. Essentially this page is two-in-one: a team sheet and a season statistics breakdown.
Further to this, the page allows fans to easily see players who are in/out on loan as well as who the skipper/vice skipper are. Fans can use the tabs at the top to easily jump between squads.
Template features
- Easy to browse the Team sheet
- Options to order team by a host of stats
- Quickly jump between teams using tabs
Player Profiles
'Everything you would want to know about a player all on one page' - fans can view a player's details and seasonal stats, as well as browse content such as his bio, latest news, videos or social posts.
The 'Top Hero' area is flexible to cater for either a cut-out image, a match shot or even a video walk on, allowing the clubs to showcase the player in the best way.
Template features
- Host of player-specific content
- Seasonal stats for each player
- Flexible hero area allows for imagery and video
- Ability to have sponsors for each player
- Easy access to other players
Player Profiles
'Everything you would want to know about a player all on one page' - fans can view a player's details and seasonal stats, as well as browse content such as his bio, latest news, videos or social posts.
The 'Top Hero' area is flexible to cater for either a cut-out image, a match shot or even a video walk on, allowing the clubs to showcase the player in the best way.
Template features
- Host of player-specific content
- Seasonal stats for each player
- Flexible hero area allows for imagery and video
- Ability to have sponsors for each player
- Easy access to other players
Fixtures & Results
The Fixtures & Results page was designed to make the full calendar of games easier to view. The page default shows the current month of the season allowing fans to get to the next or last game easily. Fans can then quickly jump through the season month by month.
Each fixture can be expanded to view either a buildup summary of an upcoming game or a post match summary highlighting the score and key incidents.
Template features
- Fixtures viewable from a month by month approach
- Each fixture expands to show more match info
- Televised games highlighted in the list
Fixtures & Results
The Fixtures & Results page was designed to make the full calendar of games easier to view. The page default shows the current month of the season allowing fans to get to the next or last game easily. Fans can then quickly jump through the season month by month.
Each fixture can be expanded to view either a buildup summary of an upcoming game or a post match summary highlighting the score and key incidents.
Template features
- Fixtures viewable from a month by month approach
- Each fixture expands to show more match info
- Televised games highlighted in the list
Match Centre
This was designed to be a 'one stop shop' for everything match related. The match centre allows fans to follow all the build-up, live match and post match reaction all in place. Clubs can pull in updates, news and video related to the match along with any social posts to provide a rich experience for fans following the game online.
The live match brings in a host of stats to give fans a real sense of what is going on in the current game. This page also shows the scorelines and stats from related games, preventing fans from having to leave the site to see how other results will affect their team's progress.
Template features
- Pre, live and post match updates all in one place
- Flexible content stream allows clubs to provide in depth coverage
- In depth match stats from Opta
- Integrated betting showing odds for next goal scorers etc
- Ability to listen live
- Future plans for 'watch live' facility
Match Centre
This was designed to be a 'one stop shop' for everything match related. The match centre allows fans to follow all the build-up, live match and post match reaction all in place. Clubs can pull in updates, news and video related to the match along with any social posts to provide a rich experience for fans following the game online.
The live match brings in a host of stats to give fans a real sense of what is going on in the current game. This page also shows the scorelines and stats from related games, preventing fans from having to leave the site to see how other results will affect their team's progress.
Template features
- Pre, live and post match updates all in one place
- Flexible content stream allows clubs to provide in depth coverage
- In depth match stats from Opta
- Integrated betting showing odds for next goal scorers etc
- Ability to listen live
- Future plans for 'watch live' facility
Great on any device
Designed from the mobile up, meaning you can follow your club wherever you are.
Great on any device
Designed from the mobile up, meaning you can follow your club wherever you are.
