Not the start I had hoped for
Initially, we proposed starting the Playmaker project early, aiming to create a white-label website for a fictitious football club. This would have served as a demonstration tool to market the platform to potential football club clients, allowing them to interact with a functional version of the platform during the pitch stage. Due to business reasons we were not able to proceed with this idea. Unfortunately, what this led to was having to begin the Playmaker platform by designing Swansea’s website first with the understanding that every element I designed needed to be adaptable for other clubs like Middlesbrough and Stoke. Essentially the Swansea designs and functionality became the basis of the Playmaker platform.
Atomic Design Approach
Having three clubs already signed up to the platform, we needed to follow an Atomic Design process that would streamline every part of the design and development process. 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 consistent during the build.
Mobile first
In addition to implementing Atomic Design principles, adopting a mobile-first approach was imperative. By prioritizing the smaller screen dimensions initially, we addressed the more challenging layout and design issues earlier in the process.
This approach facilitated a smoother design phase overall, saving considerable time, particularly in the creation of templates like the match centre, fixtures, and player profiles.
Streamlined Design
Flexible modules were designed for various elements, such as player profiles. This approach eliminated the need for multiple modules to display a player across different pages or slots. Instead, I designed a single flexible module that could be customised using CSS to accommodate various scenarios. The same concept was applied to features like next/last match modules and promotion modules.
These strategies, combined with other processes, resulted in a more streamlined design and development workflow.
Opta stats
I devoted some time to researching all the various Opta widgets available for use on the platform. The primary criteria I focused on were Opta stats that fans would find interesting, were responsive for viewing on mobile devices, and could be styled to match the UI and branding of each club website we were creating.
Once this was complete, I compiled the final list and provided UI and specs for each Opta widget for the developers to begin their work.
Forward planning
To future-proof the platform, every symbol in Sketch was organised and labeled, and libraries were created. This enabled other designers to efficiently create templates and modules that were consistent and readily available within the product.
Moving forward, the aim was that these libraries would improve the ease in which future websites could be created using this platform.
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.
Allow for a distinctive design for each club
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
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
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
Overall, the Playmaker project was a success. Due to using an atomic design approach we successfully launched websites for Swansea, Stoke, and Middlesbrough across just three consecutive days. The project's success prompted discussions with numerous other teams interested in migrating their sites to this new platform.
Unfortunately, the company I was working for was acquired. Due to this transition, the newly merged company shifted its focus to websites and projects in sectors other than sports and so the platform wasn't able to reach its potential.
This is still one of my proudest projects and the designs and ideas I created for this platform still stand up against the majority of football websites live today.
Club sites launched over three consecutive days.
increase in unique visitors to Swansea City
increase in page views to Stoke City
increase in visit duration to Middlesbrough
