Chelsea FC

A Brand new hospitality app for one of the UK's largest Football clubs. Creating a rich, seamless experience for match day.

My Role

Sitemap & Userflows

Working collaboratively with a user experience designer, we designed the app to be smart and intuitive and to provide the user with rich contextual experience.

The app comprises various smart widgets and before a game displays relevant information such as weather forecast, travel information and related news articles. The app takes full advantage of the user’s location via GPS and knows exactly when the user is within the vicinity of Stamford bridge (Chelsea Stadium). 

Upon approaching the grounds, the widgets change and display information such as matchday itinerary, food & menus and a full hospitality guide featuring information about staff members, FAQs and even dress codes. 

Once the game has begun, the app changes to a live timeline with rich content including match commentary and match events such as team lineups, player profiles and match statistics. During the game, app widgets change to display special offers in the Chelsea FC stores and scores from other games in the same league. 

Design Language

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

Obviously the app needed to on-brand, 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 I used with a complementary typeface Syntax LT for body copy and buttons. They also had a strongly defined colour palette which I adopted and a basis for iconography. However, they didn't have a unified set, and so I designed one comprising a 25px grid and 1px outline.

Atomic Design System

It was during my time at Somewhat_, where I discovered Atomic design methodology, and building design systems via Atoms, molecules and organisms to ensure consistency, efficiency and overall better design management. 

Having designed an extensive iconography suite for Chelsea FC and the use of the brand guidelines colour palette and typography rules, we had the foundations to build a sizeable component library. 

Final Designs

Having discovered the incredible workflow of atomic design, and building out, we released a large library of UI components at the beginning of 2015. With its bold features and intuitive experience, the Chelsea FC app looked and felt stunning to use not only offseason but especially during a game.

PREVIOUS PROJECT

NEXT PROJECT