store.fifa.comE-Commerce-Lösung
in Rekordzeit

Kunden Profil

Der Fußball-Weltverband FIFA treibt die Digitalisierung im Fußball nicht nur mit Technologien wie der Torlinientechnik oder dem Videobeweis voran. Auch in Sachen Fan-Ausstattung ist die FIFA im digitalen Höhe der Zeit: Im Zuge der WM 2018 in Russland hat creativestyle zusammen mit der Sportnex GmbH den offiziellen FIFA Online Store entwickelt und in Rekordzeit zur zentralen Shopping-Plattform für weltweit Millionen von Fans gemacht.

Anforderungen

Für die Realisierung des FIFA Online Stores galt es, das umfangreiche Produktsortiment hochwertig und auf Basis neuester technologischer Standards abzubilden. Eine zentrale Herausforderung des Projekts war, die strengen FIFA-Richtlinien samt Corporate Identity in ein einheitliches Design zu überführen und damit ein konsistentes Nutzererlebnis über alle Kanäle hinweg zu gewährleisten.

Dem Entwicklerteam von creativestyle blieben hierfür gerade einmal 90 Tage Zeit, um den internationalen Fußball und seine Sportartikel pünktlich zum Start der WM 2018 in Russland digital erlebbar zu machen.

Den komplett neuen Merchandising-Shop auf Basis von Magento 2 Open Source – vom ersten Projektentwurf bis zum finalen Go-live – realisierte die creativestyle GmbH in enger Zusammenarbeit mit der Sport- und Merchandising-Agentur Sportnex GmbH, die sich auf E-Commerce-Plattformen für Fußballfans spezialisiert hat und die UEFA- und FIFA-Lizenzen besitzt. Sportnex beauftragte creativestyle für den gesamten Prozess der Webshop-Entwicklung.

Umsetzung

Current design of eu.store.fifa.com

Eine Kombination aus Magento und AWS

Um die zeitlichen und technologischen Herausforderungen zu meistern und gleichzeitig die Ressourcen bestmöglich zu nutzen, setzte creativestyle für den FIFA-Shop die selbstentwickelte MageSuite für das Content Management System (CMS) und AWS Auto Scaling im Bereich der Anwendungsskalierung von Leistung und Kosten ein.

Welchen Mehrwert generierte die MageSuite für den FIFA Store?

Mit der MageSuite konnte das Entwicklerteam von creativestyle die einheitlichen Layout-Richtlinien des FIFA-Designs schnell, responsiv und für alle Endgeräte optimiert darstellen, ohne auf Drittsysteme wie TYPO3 oder Wordpress angewiesen zu sein. Die MageSuite ist einfach und intuitiv zu bedienen und ermöglicht, aus dem Backend des Onlineshops heraus individuelle Gestaltungselemente und hochwertige Inhalte zu integrieren.

Einzelne Design-Elemente oder ganze Angebote für den User sind mit der MageSuite jederzeit per Drag-and-Drop veränderbar – auch für Content Manager und Redakteure ohne umfassende Entwicklerkenntnisse. Shopbetreiber erhalten so deutlich mehr Gestaltungsspielraum. Der angewandte Open-Source-Ansatz im Bereich der MageSuite stellt zudem sicher, dass der Webshop permanent weiterentwickelt und der Auftraggeber ihn unabhängig betreiben kann.

Welchen Mehrwert generierte die AWS-Struktur?

Neben Magento 2 wurde eine AWS-basierte Devops-Stack-Lösung verwendet, die Serverleistungen bei Bedarf individuell anpassen kann, beispielsweise für attraktive Turnier-Spieltage. Hier ermöglicht das AWS Auto Scaling, die Zielauslastungsstufen für mehrere Ressourcen in einer einzigen, intuitiven Schnittstelle festzulegen und zu überwachen. Hohe Onlineshop-Besucherzahlen – während der WM bis zu 800 pro Minute – waren dadurch mühelos und ohne Performance-Verluste handhabbar.

Wie war das Projektmanagement strukturiert?

Die FIFA-Shoplösung wurde mit Hilfe agiler Methoden in einem Scrum-Prozess und nach dem MVP-Ansatz entwickelt. MVP steht für Minimum Viable Product und beschreibt „ein Produkt mit den minimalen Anforderungen und Eigenschaften", das bereits in der Grundversion zuverlässig einsatzfähig ist, und im laufenden Betrieb dann schrittweise um weitere Funktionen und Services ergänzt wird. Bei der Erstellung des FIFA Webshops bedeutete dies, in nur neunzig Tagen einen hochwertigen Webshop zu erstellen und zu veröffentlichen, um zügig das erste Feedback von (potenziellen) Kunden zu bekommen. Dieses wurde unmittelbar dazu genutzt, das Produkt zu erweitern und zu verbessern. Auf diese Weise konnten die klar formulierten Vorgaben für das Projekt effizient, schnell und einfach abgebildet und realisiert werden.

Projectmanagement tools

Jira (Ticketverwaltung & Scrum Board)

Confluence (Projektdokumentation)

inVision (Konzeption & Design)

Slack (Kommunikation mit Lumitronix)

Webex (für SCRUM Zeremonien)

Magesuite CMS

Das MageSuite CMS ist eine Erweiterung des nativen Magento CMS, das Redakteuren die Möglichkeit bietet CMS Seiten aus zahlreichen Komponenten in beliebiger Konstellation zu erstellen. Unser CMS Baukasten lässt sich nicht nur für klassische Contentseiten, sondern auch in Kategorie und Produktseiten einsetzen.

Wir emöglichen somit einen schnellen und einfachen Einstieg ins Content Commerce und das ohne umständlicher Integration von anderen CMS Systemen wie Wordpress oder TYPO3.

Alle Komponenten sind selbstverständlich responsiv und befolgen stets die Richtlinien Ihrer Corporate Identity.

MageSuite CMS ist OpenSource und wird ständig um weitere Komponenten und Konfigurationsmöglichkeiten erweitert.

Video preview

Der Erfolg

Die termingerechte Fertigstellung der anspruchsvollen Lösung war eine Kombination aus sportlichem Spirit, Teamwork und Know-how. Die Zusammenarbeit zwischen creativestyle und Sportnex verlief effizient und zielorientiert. Der fertige FIFA Online Store überzeugte mit hoher Performance während der Weltmeisterschaft und konnte hohe Traffic-Zahlen – bis zu 3 Millionen Besucher pro Monat – ohne Probleme bewältigen.

Features

Setup & Integration

  • Setup von Magento 2 Open Source
  • Setup von MageSuite
  • Anbindung an myfactory Cloud ERP
  • Integration von Computop
  • Integration von elasticsearch

Performance & Security

Marketing & Customizing

  • Shirt Konfigurator
  • MageSuite CMS
  • SEO Optimierung mit Ryte
  • Anbindung an Marktplätze
  • Trusted Shops Anbindung
  • B2B Checkout

Das Projektteam

Foto von Adam
Adam
Lead PHP Developer
Foto von Krzysztof
Krzysztof
Front-end Developer
Foto von Mateusz
Mateusz
Front-end Developer
Foto von Magdalena
Magdalena
QA Manager
Foto von Błażej
Błażej
PHP Developer
Foto von Christian
Christian
Project Manager
Foto von Mateusz
Mateusz
UI / UX Designer
Foto von Krzysztof
Krzysztof
DevOps