McFit: One Fits All

Eine einheitliche Plattform für alle Marken

Der Kunde RSG Group äußerte den Wunsch nach einem einheitlichen Konzept für den Relaunch sämtlicher Marken im Portfolio. Eine benutzerfreundliche Gestaltung spielte dabei eine zentrale Rolle: Die Redakteure sollten über alle Brand-Pages hinweg eine konsistente Benutzeroberfläche vorfinden. Weiterhin war die universelle Einsetzbarkeit von Modulen über die verschiedenen Marken hinweg sowie eine verbesserte Integration des Checkout-Prozesses in die Website von hoher Bedeutung.

Bis dahin operierten die einzelnen Marken auf eigenständigen TYPO3-Applikationen. Parallel dazu wurde eine SinglePage Application für den Vertragsabschluss von den Nutzern verwendet. Die Arbeit mit den unterschiedlichen Systemen erwies sich aufgrund veralteter Technologie oder divergierender Anwendungen als aufwendig, da immer wieder eine Neueinarbeitung erforderlich war. Zusätzlich erschwerte die separate Handhabung der Anwendungen eine effektive Verknüpfung von Landingpages und Vertragsabschluss.

Als Lösung wurde ein Plattform-Konzept entwickelt, das eine einheitliche funktionale Basis für alle Marken bietet, jedoch in der optischen Darstellung den individuellen Charakter jeder Marke bewahrt. Technologische Grundlage dieser Plattform ist das Framework Next.js, das mit einem Monorepository-Setup (also einer gemeinsamen Codebasis für alle Apps) realisiert wurde. Es entstand ein Pool an Modulen und wiederverwendbaren Libraries, der automatisch jeder App zugänglich ist. Die Entwickler*innen konzentrieren sich nun auf die Implementierung des markenspezifischen Stylings.

Dank des Headless-Ansatzes von Next.js gelingt die Integration diverser Drittanbieter-Systeme reibungslos. Unter anderem werden zahlreiche Daten, etwa über Fitnessstudios oder Vertragsdetails, extern zur Verfügung gestellt. Diese Daten werden von uns unkompliziert abgerufen, aufbereitet und nahtlos in die inhaltliche Gestaltung der Seiten integriert. Attraktive User Journeys tragen so zur Verbesserung der Conversion-Raten im Checkout-Bereich bei.

Schritt für Schritt bis ans Ziel

Bei der Entwicklung einer digitalen Plattform für McFIT, die auf mehrere Brands skalierbar ist, standen wir vor der komplexen Aufgabe, eine Vielzahl von Anforderungen unterschiedlicher Stakeholder zu erfassen und zu harmonisieren. Die Diversität der Ansprechpartner und Verantwortlichkeiten musste in Einklang gebracht und in einer Plattform vereint werden, die dennoch individuelle Merkmale je Brand aufweist.

Als Wegbereiter diente uns "Golds Gym", eine renommierte Marke, die mit ihrem Markteintritt in Deutschland als Test-Pilot für dieses innovative Projekt auserwählt wurde. Die Herausforderung lag darin, eine neue Designlinie zu schaffen und gleichzeitig das System so auszurichten, dass es den Bedürfnissen aller zukünftigen Brands gerecht wird. Der Schwerpunkt lag auf einer White-Label-Lösung, die sowohl im Design als auch in der Entwicklung anpassungsfähig konzipiert wurde.

Nach dem erfolgreichen Launch von "Golds Gym" wurde die Plattform nach und nach für weitere Brands wie "Johnreed" und "High 5" ausgerollt. Anschließend wurde auch McFit in diesen Workflow integriert und erfolgreich live geschaltet. Ein besonderer Fokus lag dabei auf den individuellen Herausforderungen und Vertragsbedingungen jeder Marke, die zum Teil studiospezifisch waren. Dadurch waren Flexibilität und Erweiterbarkeit des Systems maßgebliche Faktoren.

Dieser Prozess erforderte eine sorgfältige Abstimmung und eine agile Projektsteuerung, um sicherzustellen, dass alle funktionalen und designbezogenen Aspekte jederzeit auf die Bedürfnisse und Eigenschaften der einzelnen Fitness-Brands abgestimmt waren. Das Ergebnis ist eine einheitliche, aber anpassungsfähige Plattform, die die individuelle Nutzererfahrung jedes Brands unterstützt und gleichzeitig eine konsistente Markenidentität innerhalb der gesamten Gruppe gewährleistet.

Kreation - UX 

In der User Experience haben wir großen Wert darauf gelegt, dass sowohl die Kursübersicht als auch die Studiosuche und der Checkout-Prozess nahtlos und intuitiv gestaltet sind. Die Kursübersicht bietet eine klare und einfach zu navigierende Darstellung des vielseitigen Angebots, unterstützt durch Filteroptionen, um Kurse nach Präferenz, Intensität oder Verfügbarkeit zu sortieren. Gleichzeitig wurde die Studiosuche optimiert, um durch Geolokalisierung oder einfache Eingabe das nächstgelegene Studio schnell und effizient ausfindig zu machen, mit weiterführenden Informationen zu Öffnungszeiten und speziellen Angeboten.

Der Checkout-Prozess wurde speziell entwickelt, um den Abschluss von Mitgliedschaften zu erleichtern. Wir gestalten den Prozess des Mitgliedschaftsabschlusses durch schlanke und zielorientierte Schritte so einfach und unkompliziert wie möglich. Wir legen großen Wert auf Transparenz und kommunizieren die Vertragsdetails klar, sodass Nutzer immer einen vollständigen Überblick über die Konditionen erhalten.

Kreation - UI

Visuelle Designprinzipien:

Unser Ansatz konzentriert sich darauf, ein Design zu schaffen, das durch interaktive Elemente und eine dynamische Gestaltung eine spielerische User-Experience bietet und Nutzer durch den digitalen Fitness-Raum führt.

• Vielfältigkeit:
  Um die breite Zielgruppe von McFIT zu repräsentieren, verwenden wir eine umfangreiche Palette an Visuals, die unterschiedliche Menschen und Fitnessstile abbilden. Dadurch vermitteln wir ein Gefühl der Gemeinschaft.

• Offenheit:
  Unsere Designs laden jeden ein, Teil der McFIT-Welt zu werden, unabhängig von Fitnesslevel oder Erfahrung. Das Erlebnis ist intuitiv und niedrigschwellig, damit sich alle Nutzer willkommen fühlen.

Umsetzung im Design:

Die visuelle Ausgestaltung unseres Konzepts für McFIT zeichnet sich durch eine Palette lebendiger Farben und dynamischer Formen aus, die eine einladende und motivierende Stimmung erzeugen. Starke, gut platzierte Überschriften fassen den Inhalt knapp und kraftvoll zusammen, während eine sorgfältig ausgewählte Bildwelt die Diversität und Energie der Kundinnen und Kunden von McFIT widerspiegelt und zur Identifikation mit der Marke anregt.

Kreation Ergebnis:

• Adaptives UX & Design Toolkit: Ein maßgeschneidertes Toolkit mit über 20 individuell anpassbaren Contentmodulen ermöglicht es, den Markencharakter jeder Brands effektiv und ansprechend darzustellen.

• Brand-Style: Einmal definiert, lassen sich die Markenattribute wie Farben, Schriftarten und Bilder weltweit einheitlich implementieren, was zu einem konsistenten und nachhaltigen Designkonzept führt.

• Ressourcen-Management: Die stringente Asset-Struktur vereinfacht die Markenpflege und ermöglicht es, dass Verbesserungen allen Brands zugutekommen.

Das Ergebnis ist ein durchdachtes und anpassungsfähiges Designsystem, das eine homogene und vielseitige UX schafft. Es unterstützt und vereint die verschiedenen Marken und verbindet Nutzer und Marke auf einer emotionalen Ebene, ohne dabei die Klarheit und Orientierung zu vernachlässigen.