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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
'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.
'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.
'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.
'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.
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.
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.
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.
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.