English Premier League Exploration
My Role
UX / UI - Visual Design - Copy Writing
The Premier League is the top level of the English football league system. Contested by twenty clubs, it is the greatest football league in the world. The EPL is watched by over 600 million people in roughly 200 countries, resulting in £3.6 billion last season (2016/2017).
As a major fan of all European Football (ahem…soccer) watching early weekend matches or weekday European cups I realized, as an American who’s only been to London once, I have no idea where these teams actually play. So I wanted to see if I can create a way to experience the league in a completely new way - location.
Home Page
The beginning of this project centered around the map and location of each team. It's a way of interacting with the league that I haven't seen before and introduced a new way of thinking about the league. For the first time, you grasp the bigger picture of the EPL and can gain a greater understanding of the connection between each team. As someone who doesn't know where teams are located, you explore the map and click through to understand where teams play.
The other navigation is spread into the four corners of the page. It was an exploration of a unique navigation. It puts the main focus on the map, while still giving each link its own space to breath and draw you in.
Team Detail Page
I wanted each team's page to communicate everything you would want to know about the club. You land on a team overview with a brief history of the club, their league standing and a list of their silverware. From there you can navigate to explore their scores, squad, and stats. The map remains prominent reminding you of where the team is located, while still allowing users to quickly navigate to other team pages.
Visual Design
The landing and league pages were kept mute to emphasis each club's team pages instead. Each team page experience was designed to feel like you were stepping into their club. Once clicking on a team's location on the interactive map, the entire page transforms to reflect the design of their home jersey.
Motion Design
The animation was used not only as a way create a pleasant experience, but to serves as a way to illustrate navigation through the site.
Every transition was designed to create a seamless experience from one page to another. Ideally eliminating the idea of “pages”, having users move from one space to another.
