Project: Product design and brand articulation
Client: Chelsea FC
Responsibilities: UX and UI Design, Web design, App design, Brand identity, Prototyping
Furthermore worked with the team at Chelsea FC to update and improve their official fan app, The 5th Stand. We initially helped identify key areas for improvement using a product teardown which informed the prioritisation of a development roadmap for the app. In collaboration with their internal team and development partners, we then worked to introduce multiple new features, update the overall visual identity, and create a consistent design system.
One of the most exciting parts of the Chelsea engagement was the opportunity to design an entirely new fan engagement experience for the app. Play Predictor gives fans the chance to make predictions about an upcoming match in a fun, quick and easy way. Users score points for correctly guessing match outcomes such as the score, first goalscorer and number of shots on target. After each match users are added to a leaderboard and are in with a chance of winning hundreds of prizes including a VIP match day experience.
To make the Play Predictor as compelling as possible, we worked on the gameplay mechanics to ensure that they were visually enticing but also easy to use while on the go. We created a dynamic visual design with team imagery taking centre stage - we wanted these to capture the mood, emotion and drama of match day for fans across the world who can’t be there in person.
Alongside designing new features such as Play Predictor, we also began to forge new underlying design principles to create a cohesive new design system.
Building on the existing Chelsea FC master brand, we expanded the visual language to form new guidelines specifically for digital products. We also wanted to introduce more of Chelsea’s unique brand personality to help differentiate The 5th Stand app from all the other carbon-copy football apps that occupy the same space. We worked with Chelsea FC’s brand and marketing teams to ensure that the new guidelines were a true embodiment of the club by giving the new 5th Stand app visuals structure and meaning and aligning with the core brand DNA.
We introduced more white space, revamped the typography and established a new grid system, which ensured a clear set of rules were implemented across the app. One of our key aims was to improve usability and to do this, we streamlined the number of font sizes, weights and styles, increasing legibility and reducing cognitive load. A refreshed colour palette was needed, along with a new icon set and a set of image best practice guidelines. Our collaborative efforts resulted in a slicker look and feel that makes the app clearer, easier and more enjoyable to use.
We provided look & feel mock ups for existing app pages to assist developers in implementing the new design guidelines, and it’s been great to see the updated version of The 5th Stand with the new rules in play.
The fantastic thing about design systems is that they can evolve and grow over time, and now Chelsea FC has a set of clear standards and UI components, these can be assembled together to build any number of applications going forward - it will be exciting to see the visual design align across all platforms in the future.
Once we had established the consistent design system across the 5th Stand App, we turned to the Chelsea FC website and began investigating ways we could improve accessibility and increase engagement. We identified a selection of key pages in need of UX updates and we created wireframes showcasing new layouts. By introducing less fragmented pages that flowed more seamlessly, and introducing more ways through to key content, we hoped to promote higher click through rates and increase time spent on the page.
In parallel to our UX improvements, we also looked at a refresh of the UI to bring the website more in line with the visual language we developed for the 5th Stand. Using shared styles across both platforms reinforced a consistent brand language and began to make the app feel like a true extension of the website as opposed to a fully separate product. Our UI improvements also tackled key accessibility issues such as low contrast headline text and unclear hover and selection states.