Project: Product design and brand articulation
Client: Chelsea FC
Sector: Sport
Responsibilities: UX and UI Design, Web design, App design, Brand identity, Prototyping
All of our design work for Chelsea is now live on the 5th Stand App and on the Chelsea FC Website.
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.
All of our design work for Chelsea is now live on the 5th Stand App and on the Chelsea FC Website.
Furthermore is an evidence-led, product & service design agency based in London, UK. We believe that the research and strategy behind great design is just as important as the design itself. By gathering data and insights to inform our decisions, we help organisations create compelling services and products based on evidence, not opinion. A hypothesis driven design framework helps us achieve this. Using our methods we envision unique experiences built on a solid functional foundation that are a pleasure to use and have the potential for meaning, delight and significance in people’s lives. Please get in touch if you would like to know more.
“We worked with Furthermore for over 3 years after initially bringing them in to conduct a full app usability audit. They supported us with our live experience strategy and helped us to define a design system to modernise the UI and enhance the user experience.” Erik Hartberg - Former Product Lead at Chelsea F.C
Get in touch with the team to discuss your idea, project or business.
Furthermore
54-58 Tanner Place, Tanner Street,
London, SE1 3PH
.png){kind=icon}
