Chelsea FC

iOS Hospitality 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.

Timeline
Dec 2014 - Feb 2015
Role
Mid-Weight UI Designer
Project Type
iOS Sports App

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.

Design System

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 | 8px Baseline

320

320

10 Columns

8 Pixel Baseline

Typography

Chelsea FC Brand Typefaces

Syntax LT Std

CFC Headline

Colour

Chelsea FC primary colour palette

#031E41

#8D9192

#EEEEEE

#FFFFFF

Iconography

25px grid system, 1px outline

UI Components

Chelsea FC Atomic Design components

Final Screens

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.