Relaunch FC Bayern Website

When you think of Munich, you think of the Oktoberfest, the Frauenkirche and, of course, FC Bayern München. The legendary German champion is the biggest sports club in the world and, in terms of football, a guarantor of absolute top class. To prevail at the top level nationally and internationally over decades only works if you move forward and think ahead. In today's international competition, this no longer applies only on the pitch, but above all in the digital world.

www.fcbayern.com

Team Size
6 people
Start
December 2018
End
Ongoing

The Mission

In the course of the relaunch of the FC Bayern München website www.fcbayern.com, we were commissioned to develop a clear and modern concept and design. We were also awarded the contract for the implementation of the frontend while retaining the existing content management system (CMS).

Technologically, we were faced with the exciting challenge of providing a modern and expandable frontend platform that would meet future requirements and be available to users at all times.

Our Approach

Like every complex project, we started with an inventory of all applications and platforms that play a role in the club’s web presence. We also benchmarked the websites of other national and international sports clubs. Our goal: to make the FC Bayern site the best football club site in the world.

Our UX team analysed all the features and funnels of the original FC Bayern website before prioritising and restructuring them based on insights from interviews and analytics.

The development was carried out in close cooperation with all stakeholders according to the mobile-first approach. In the process, the website was optimised for the most important use cases so that fans can access the content relevant to them even more quickly and intuitively.

For a uniform look & feel, we created a design system that keeps all components and patterns as a “single source of truth” always up-to-date and available for all future digital products of FC Bayern. To guarantee the correct use and implementation of the innovations in the future, we provided Brand Guidelines.

Technologically, we worked with the headless CMS approach to be able to fulfil the requirement of a new frontend while keeping the existing CMS – without working into someone else’s project. The strict separation of CMS and frontend allows the efficient implementation of requirements that would be impossible or very expensive in classic CMS environments. The theoretical independence of CMS and frontend also enables the straightforward connection of additional channels to support FC Bayern München’s omnichannel/multichannel strategy.

Technical Contribution

When choosing our technical basis, we weighed the use of React (without a framework), Next.js and Gatsby.js against each other as part of our detailed benchmarking process: the enormous number of static pages that will remain unchanged in the future ultimately convinced us to go with Gatsby.js. This framework allowed us to reduce the complexity of hosting while keeping React as the standard. Despite the focus on static content, this allowed us to provide dynamic components to implement content – such as breaking news, live tickers or real-time results.

 

Other technological features that we added in the course of the project:

  • Implementation of a well-tested component UI library.

  • The website was developed with the requirements of mobile devices in mind and is fully responsive in three different formats – including optimised images for every screen size.

  • The development of a powerful theming system with light/dark support. Theming allows us to efficiently and cost-effectively implement changing colour schemes required by the various teams and companies within the FC Bayern universe.

  • Our more than 2,000 unit tests strengthened confidence in the entire project and the stability of the infrastructure.

  • Static generation of almost 100,000 HTML pages including fast, incremental updates.

  • Barrier-free accessibility according to WCAG 2.0 was naturally something we took very seriously. That is why we have implemented all components of the FC Bayern website in such a way that they can be used by everyone.

  • Our CI/CD is based on Bitbucket, Bamboo and Jenkins and is fully integrated into the existing on-site IT infrastructure. In addition to the regular deployments, we generate Docker-based preview links for the efficient coordination of code changes with designers or within peer reviews.

  • Compared to classic “coupled” CMS’s, headless CMS’s have the disadvantage that the preview function is usually not included. We have developed a lightweight and fast solution that automatically synchronises changes in the CMS to a preview server via Webhooks and visually prepares the content for the editors.

Summary

With this successful relaunch, Satellytes has designed and implemented a modern, fast and user-friendly website for FC Bayern within two years. We would like to thank FC Bayern München for the trust they have placed in us and for the great cooperation.

Are you planning your next digital project? Please contact us, we are happy to help: Eric Singhartinger, eric.singhartinger@satellytes.com

Interested in working with us?

Career