Chelsea FC

Midweight UI Designer. London 2014

chelsea-hero@2x

Overview

Chelsea Football club was looking to enhance the match day experience for their Hospitality guests via a premium and exclusive mobile app, which could provide valuable content to their users before a match but also during the match.

Upon, joining the awarding winning digital agency Somewhat_ I was immediately brought in to support the user experience but also the visual language and interactions of the app. Initially, we wanted to release the app for the iOS platform, with the release for Android shortly following.

Sitemap & User flows

Working collaboratively with a user experience designer, we designed the app to be smart and intuitive and to provide the user with a 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 match day 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. 

chelsea-sitemap@2x
chelsea-ux@2x

Design system

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 are 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 strong 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.

chelsea-branding@2x

Atomic components

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 sizeable component library. 

chelsea-components@2x

Final design

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 off season but especially during a game.

chelsea-finaldesign@2x

NEXT

Anthony Eamens 2020©

Anthony Eamens 2020©