Chelsea FCiOS App

The Challenge

Chelsea Football Club wanted to improve the match day experience for their Hospitality guests by creating a unique, premium and exclusive app, that provided important content to users in a convenient and hassle free way.

The app takes advantage of knowing that the user will be at Chelsea’s home ground (Stamford Bridge) to provide a contextual experience by displaying relevant information based on the ticket type, time and also the user's location throughout the day.

Chelsea Cover Image
The Solution

Research was vital for this project, and it began in the form of actually going to see the Chelsea FC hospitality suite at Stamford bridge, to get a feel for what this VIP status is all about. I then started to compile a list of potential forms of information which could be incorporated into the app such as, Live match commentary, weather, travel and club news.

Once I had created a list of all possible features and ideas, I presented these back to the client with quick sketches and mood boards to show a visual of what I wanted to achieve. Upon sign off and the go ahead from the client, I then began creating low fidelity wireframes which we could use for a prototype and testing purposes.

Chelsea Wireframe 01
Connector
Chelsea Wireframe 02
Connector
Chelsea Wireframe 03
Chelsea Wireframe 04
Connector
Chelsea Wireframe 05
Connector
Chelsea Wireframe 06
Chelsea Wireframe 07
Connector
Chelsea Wireframe 08
Connector
Chelsea Wireframe 09
Design systems

We successfully completed user testing at Stamford bridge hospitality suite with a number of their VIP guests. It was then time to move onto the design language and visuals of the app. Chelsea FC are already a well established brand, and so had brand guidelines to adhere too.

Obviously the app needed to be branded and so I meticulously followed these guidelines for the new app. I started by developing a flexible grid system, as the client wanted the app to be future proof and work amongst current but future devices.

Following the guidelines, I discovered that Chelsea FC had a custom typeface called CFC headline which was used with a complementary typeface Syntax LT for body copy and buttons. They also had a strong defined colour palette which was adopted and a basis for iconography. However, they didn’t have a unified set and so I decided to design one consisting of a 25px grid and 1px outline.

Grid System
10 columns | 21px width | 10px Gutter, Margin | 7px Baseline
Chelsea Columns
Chelsea Baseline
Colour
All colours used for the project
Chelsea Primary Colours
Typography
All typefaces used for the project
Chelsea Typography 01
Chelsea Typography 02
Chelsea Typography 03
Chelsea Typography 04
Iconography
25px grid system, 1px outline
Chelsea Iconography 01
Chelsea Iconography 02
Chelsea Iconography 03
UI Components
Atomic design system
Chelsea UI Components
Chelsea Device 01
Final UI

The final app is a pastiche to football and its environment, branded accordingly to Chelsea FC. I carefully considered the use of colour, type and iconography throughout the app, ensuring and maintaining an easy to use approach.

I also ensured that the app met the requirements of the client, and it provided its users with rich and engaging information and media. I wanted the app to be a complementary experience to a football match which enhanced, stimulated and motivated its users. There was also further discussion about transforming the app into a smartwatch app which could enhance the experience to the next level.

Chelsea Device 02
Chelsea screen 01
Chelsea screen 02
Chelsea screen 03
Chelsea screen 04
Chelsea screen 05
Chelsea screen 06
Chelsea screen 07
Chelsea screen 08
Chelsea screen 09
Chelsea screen 10
Chelsea screen 11
Chelsea screen 12