Football Statistics Project
UX / UI DESIGNER
The aim of this project was to create a statistical-based website prototype with the idea of making it fun, accessible and interactive by presenting statistics and factual information in more engaging ways. Having been a user of other stats based websites, I would often feel overwhelmed with the way the stats were presented, almost always in a giant list with key stats often submerged amongst the others.
I was looking to imagine this fictional prototype as if it were Arsenals/The Premier Leagues official website whereby fans could access stats and information from their favourite clubs and individual players.
As well as the user's perspective and experience, I didn't want to neglect the business needs/goals in this project. In the player profile screen I included a section which allows the user to view the teams different kits (home, away & third) in a fun way by showing that particular player wearing each strip in action. Users can toggle through the different kits and purchase the strip using the call to action button on the screen (which would link to the retailer site which would have the strip selected with the players name added to the back of the strip by default for example.)
Although not directly related or obviously related, I wanted to include a recent post/videos section where fans could access videos featuring their favourite player, whether that be game conferences, personal social media posts/videos, analysis, highlight reels or videos directly from the football club. These types of videos are all very popular across social media and helps fans feel closer to the players as individuals outside of the game. This connection between seeing the player wearing the different kits, viewing videos of the player in interviews etc. and the links to their social media pages helps to try and create a deeper connection with the players on a personal level from a fans perspective and therefore as a potential customer.
Business Perspective
Player Profile
Whilst researching other stats focused websites such as Sofascore, The Stats Don't Lie & Whoscored.com I was aiming to find the most valuable stats to the average fan. There were a few obvious ones such as goals, assists, clean sheets and it appeared through research that individual player form was becoming increasingly prevalent. Even amongst friends with whom we participate in the fantasy premier league every year, We are always looking to pick the best players for our team to gain the edge over each other and current form as well as upcoming opponents are major contributing factors in the decision-making process.
I wanted to present recent player form in a fun and engaging way by utilising colour, the rating given by fans on sofascore (could have also used google ratings) as well as showing the opposing team, result, competition and icons to illustrate actions in the game (substituted on/off, yellow/red carded, scored or assisted)
Manager Profile
It was also important to include managers as well as their statistics as they are as integral as the players to the success of a team.
On the managers profile page (Mikel Arteta) you can see that there is a green button above the title, this signifies the persons role at the football club and in this instance the arrow icon tells the user that there is more to be seen as Mikel Arteta is also a retired footballer and once was a player for Arsenal in his career. This CTA alludes to the scope of the pages potential (including players past and present) and altering the stats presented based on if the user has selected to view Arteta the player or as a manager.
Furthermore in relation to future scope, future iterations could include a previous clubs list that a player has played for which similarly would allow users to jump between viewing different clubs by clicking on their badge or name for example. I have also alluded to this on the club home page underneath the team name where the club's position in the premier league is shown. the word Premier league is underlined showing the user that it is clickable and this would then show the Premier League table and allow the user to continue on exploring different teams statistics for example.
Statistical Information
The Statistics tab includes a drop down which can be used to filter the stats to different seasons and view historical stats from seasons gone by. Similarly, on the home page where the squad list features, it has a similar drop-down in which the entire squad players/cards will change based on the year selected which opens up for more exploration of the current team over the years for those devoted fans.
With all of the information presented, I wanted to give users the ability to collapse tabs to prevent being overwhelmed with too much information and focus on specific sections (Accoldades for example) this was important to add I felt with the future in mind as I would envisage more digestible stats would be added in future iterations as football evolves and more nuanced stats become more prevalent.
Design Decisions
I made use of components throughout the design to make sweeping changes easily and effortlessly. Some components were created for different structural layouts (vertical stacking etc.) but weren't included in the final prototype. Created a card design for the clickable players/managers and used a hover effect to give the user visual feedback for their actions throughout.
In future iterations when other teams profiles and players would be added, the colours of the state change effect could also be adapted based on the currently selected teams primary colours (Chelsea - Blue, Man City - Light Blue, Tottenham - White etc.)
