Greenergym ist eine Fitnessmall, die sich aus drei verschiedenen Bereichen zusammensetzt (GreenerGym, GreenerFoods und GreenerWear). Diese ergänzen sich so, dass sie ein ganzheitliches, ideales Fitnesserlebnis bieten - ein umfassendes Angebot für Fitness- und Umwelt - Enthusiasten.
Im Rahmen dieses dreimonatigen Studienprojekts hatten wir die Freiheit unser Thema frei zu wählen. In einem Team aus drei Mitgliedern entwickelten wir zunächst eine innovative Markenidee und ein umfassendes Konzept und gestalteten anschließend die Corporate Identity. Unsere Aufgaben umfassten die Erstellung von Printmedien und die Konzeption sowie Gestaltung einer benutzerfreundlichen App und Website. Dabei wandten wir verschiedene UX-Methoden wie Wireframing, die Erstellung von Nutzer-Personas und die Gestaltung der Customer Journey an.
Die Geschäftsidee, die Vorgaben für das Corporate Design, die Gestaltung der Customer Journey und die Ideenfindung für die Printmedien wurden kollektiv in unserer Gruppe erarbeitet. Während ein Teammitglied die Umsetzung unseres Konzepts für Printmedien in Angriff nahm, widmeten mein anderer Partner und ich uns gemeinsam dem Prozess des User Experience Designs für die Website und die App. Hierbei teilten wir uns gleichermaßen die Verantwortung für die Erstellung der Wireframes und das Seitenlayout auf.
Wir starteten mit der Konzeption des Geschäftsmodells, der Namensgebung und einem Slogan für Greenergym. Zudem legten wir die Zielgruppe fest, formten eine klare Mission und Vision und definierten die Kernwerte der Marke. Anschließend entwarfen wir Corporate-Design-Richtlinien, um gezielt die identifizierte Zielgruppe anzusprechen. Schließlich gestalteten wir verschiedene Printmedien für das Unternehmen, darunter Flyer und Visitenkarten.
Im Anschluss konzentrierten wir uns auf den digitalen Aspekts unserer Marke. Hierbei legten wir den Grundstein, indem wir Wireframes und eine Informationsarchitektur erstellten – sowohl für die App als auch für die Website. Zusätzlich entwickelten wir Personas zum besseren Verständnis der Bedürfnisse unserer Zielgruppe. Wir skizzierten außderdem die Customer Journey und definierten die Rollen von Website und App innerhalb dieser.
Unter Verwendung unserer Entwürfe haben wir in der Designphase unser Konzept für die digitale Präsenz von Greenergym konkretisiert. Dabei entwickelten wir auf Grundlage der zuvor erstellten Wireframes, der Informationsarchitektur und der Markenidentität das UI-Design für die Website und die App. Diese Phase war der kreative Höhepunkt unseres Projekts und erforderte Sorgfalt und und Hingabe zum Detail, wodurch sie zum umfangreichsten Abschnitt wurde.
Zu Beginn unseres Projekts agierten wir als ein Gründerteam mit der Aufgabe, eine Marke von Grund auf zu konzipieren. Unsere Ideenfindung resultierte in "Greenergym", einem Konzept, das Fitness mit Umweltbewusstsein verbindet. Dabei erkannten wir, dass herkömmlichen Fitnessstudios oft nachhaltige Praktiken fehlen. Daher gestalteten wir unsere Marke so, dass Umweltfreundlichkeit und Selbstversorgung im Mittelpunkt stehen. Diese Vision manifestierte sich in drei miteinander verbundenen Untermarken: GreenerGym, GreenerFoods und GreenerWear.
GreenerGym legt den Fokus darauf, ein umweltfreundliches Fitnesserlebnis zu schaffen und ist das Herzstück der Fitnessmall, in der sämtliche sportlichen Aktivitäten stattfinden. Um Nachhaltigkeit zu gewährleisten, werden sämtliche Trainingsgeräte aus umweltfreundlichen, recycelbaren Materialien gefertigt, die frei von Schadstoffen und Kunststoffen sind. Anstelle von Plastik setzt GreenerGym auf hochwertige, langlebige Materialien wie Edelstahl, Eisen und Massivholz. Darüber hinaus nutzt das Fitnesscenter die erzeugte Energie seiner Cardiogeräte zur Stromerzeugung, was Teil des umweltfreundlichen Selbstversorgungskonzepts ist. Zusätzlich bietet GreenerGym eine mobile App an, mit der Nutzer ihr Training verfolgen können und sogar Belohnungen für die erzeugte Energie erhalten.
GreenerFoods ist der gastronomische Bereich von Greenergym, der sich auf nachhaltige und gesunde Lebensmittel konzentriert. Ihr Ziel ist es erstklassige und gesunde Zutaten mit exzellentem Geschmack und hohem Proteingehalt zu kombinieren. Um für alle Vorlieben etwas zu bieten, gibt es vegane, vegetarische und glutenfreie Alternativen. GreenerFoods baut sein eigenes Gemüse und Obst in einem geschlossenen Bereich des Außenbereichs an, die frisch geerntet und in den köstlichen und nahrhaften GreenerFoods-Gerichten verwendet werden. Zwar können nicht alle Zutaten aus eigenem Anbau stammen, jedoch sorgt GreenerFoods dafür, dass der Rest der Zutaten aus biologischem und regionalem Anbau stammt. Außerdem arbeitet dieser Teil von Greenergym mit nachhaltigen Snackherstellern zusammen, um Verpackungen zu reduzieren und unverpackte Optionen anzubieten.
GreenerWear bietet Sportbekleidung aus recycelbaren, recycelten und fair gehandelten Materialien an. Die Sportbekleidungskollektion der Bekleidungsmarke "GreenerWear" von Greenergym umfasst Artikel aus Bio-Baumwolle, die aus kontrolliert biologischem Anbau stammt, und Fasern, die aus recycelten PET-Flaschen gewonnen wurden. Die Teilmarke legt großen Wert auf nachhaltige und ethische Produktionspraktiken und ist bestrebt, seine eigene Produktion auszubauen und mit Partnerunternehmen zusammenzuarbeiten. Die Artikel aus dem Bekleidungsgeschäft können sowohl vor Ort als auch im Online-Shop oder über die App erworben werden.
Um das Wettbewerbsumfeld zu verstehen, in dem Greenergym sich behaupten müsste, führten wir eine umfangreiche Marktanalyse durch. Die Identifizierung und Analyse der Mitbewerber ermöglichte es uns, wertvolle Erkenntnisse über die einzigartigen Positionierungsmöglichkeiten und Differenzierungschancen von Greenergym zu gewinnen. Diese Erkenntnisse dienten als Grundlage zur weiteren Ausarbeitung des Markenkonzepts und des Alleinstellungsmerkmals. Basierend auf dieser Marktforschung konnten wir die folgenden Aspekte als Alleinstellungsmerkmale von Greenergym herausarbeiten.
Bei der Entwicklung der Marke Greenergym spielten die zuvor beschriebenen Schritte eine entscheidende Rolle. Sie halfen uns, ein tiefes Verständnis für unseren Zielmarkt, unsere Zielgruppe und die Branche, in der wir tätig sind, zu erlangen, was wiederum die Grundlage für die Definition unserer Markenidentität bildete. Auf dieser Grundlage haben wir unsere Werte, Mission und Vision entwickelt. Diese Leitprinzipien beeinflussen maßgeblich unsere Designentscheidungen und gewährleisten, dass unsere Marke und die Nutzererfahrung im Einklang mit unseren grundlegenden Prinzipien stehen.
Wir glauben daran, dass der Sport Freude, Energie und positive Auswirkungen für Einzelpersonen und Gemeinschaften bringt - er hat die Kraft zu inspirieren und zu vereinen.
Unser Planet liegt uns sehr am Herzen, und wir sind uns des Zusammenhangs zwischen Umwelt und Sport bewusst. Nachhaltigkeit ist ein integraler Bestandteil all unserer Aktivitäten, und wir möchten andere dazu inspirieren, dasselbe zu tun.
Wir betonen individuelles Wohlbefinden und erkennen die Verbindung zwischen Gesundheit und Planeten. Unser Ziel: Zugang zu sauberer Luft, Wasser und eine sichere Umgebung für Aktivität für jeden.
Wir streben fortlaufend nach innovativen Lösungen und Höchstleistungen. Wir möchten modernste Standards für nachhaltige Sportpraktiken setzen und andere durch unser Handeln inspirieren.
Greenergym hat es sich zur Mission gemacht, Fitness und Umweltverantwortung zu verbinden. Wir schaffen innovative Fitnesserlebnisse, die Menschen dazu bewege sollen, umweltbewusste Entscheidungen zu treffen und so zu einem gesünderen Planeten beizutragen.
Unsere Zukunftsvision ist es, die Fitnessbranche zu revolutionieren, indem wir das körperliche Wohlbefinden nahtlos mit Umweltbewusstsein verbinden. Unser Ziel ist es, deutschlandweit eine Vorreiterrolle in der grünen Fitnessbranche einzunehmen, angetrieben von unserer Mission.
Der Greenergym-Flyer vereint wissenschaftliche Designprinzipien mit der Markenstrategie. Wir verwenden das konsistente Farbschema der Markenidentität, verwenden demnach Schwarz und als Akzentfarben Grüntöne und reduzieren die Verwendung von dunkler Tinte, um die nachhaltige Markenphilosophie zu unterstreichen.
Im Kontext des Brandings bewahrt der Flyer die Integrität unserer Marke durch die Verwendung des Logos, der Farbpalette und des konsistenten Designs. Die visuellen Elemente sind strategisch angeordnet, um den Prinzipien der visuellen Hierarchie zu folgen. Sie lenken die Aufmerksamkeit des Betrachters geschickt von unserem Slogan und den repräsentativ für die drei Untermarken stehenden Icons, über unser Logo, ein Bild, das als Eyecatcher dient und den Aufruf zum Probetraining hin zu unseren sozialen Medien.
Unter der Überschrift bietet ein informativer Text weitere Details, der erst nach gewecktem Interesse des Betrachters in den Fokus rückt.
Die Visitenkarte von Greenergym folgt einem minimalistischen und geradlinigen Ansatz, indem sie auf der Vorderseite lediglich das Logo, den Slogan und die Symbole für die drei Segmente des Fitnesscenters zeigt. Auf der Rückseite wird ein weißer Hintergrund verwendet, um Tinte zu sparen. Außerdem werden hier die Kontaktinformationen unter Verwendung von Icons präsentiert. Die abstrakten Formen, die auf der Karte verwendet werden, stimmen mit dem allgemeinen Corporate Design von Greenergym überein, das auch auf der Website und der App durchgängig angewendet wird. Darüber hinaus enthält sie einen QR-Code, der einen bequemen Zugriff auf die Website ermöglicht und so das Nutzererlebnis über alle Medienkanäle von Greenergym hinweg verbessert.
Um den Designprozess für die Website und die App in Gang zu setzen, definierten wir zunächst klar ihre Rollen in der Customer Journey. Dieser auf den Benutzer fokussierte Ansatz gewährleistete, dass beide Plattformen klare Ziele hatten, um Verwirrung und unnötige Überschneidungen zu verhindern. Diese anfängliche Maßnahme bildete die Grundlage für die Erstellung der Wireframes und die Entwicklung der Informationsarchitektur für beide Medien.
Die Hauptfunktion der Website besteht darin, Nutzern grundlegende Informationen über das Unternehmen sowie seine Produkte und Dienstleistungen zu bieten.
Sie soll das Markenbewusstsein zu steigern, die Nutzer über die verfügbaren Angebote informieren und sie zur Durchführung einer gewünschten Aktion bewegen, beispielsweise die Anmeldung für eine Mitgliedschaft oder im besten Fall ein physischer Besuch der Fitnessmall.
Sie zielt darauf ab, die Aufmerksamkeit der Nutzer in den frühen Phasen der Customer Journey zu gewinnen, ihr Interesse zu wecken und die für eine Entscheidung erforderlichen Informationen zu präsentieren. In der Konversionsphase der Customer Journey spielt die Website eine Schlüsselrolle.
Die App legt den Schwerpunkt darauf, Nutzern, die bereits Interesse bekundet oder Kunden geworden sind, interaktive und maßgeschneiderte Erlebnisse zu bieten.
Die App soll das Nutzerengagement steigern, den Zugang zu speziellen Diensten erleichtern und eine kontinuierliche Interaktion mit der Marke ermöglichen. Sie fungiert als zentraler Anlaufpunkt durch Funktionen wie Energieverfolgung, individuelle Trainingspläne, Prämieneinlösung und umweltfreundlichen Produktkauf.
Die App bietet Nutzern, die bereits Mitglieder bei GreenerGym sind, exklusive Funktionen und Interaktionsmöglichkeiten, spielt eine zentrale Rolle in der Phase der Kundenbindung und des Engagements innerhalb der Customer Journey und stärkt die Bindung zur Marke.
Um ein tieferes Verständnis für unsere Zielgruppe zu gewinnen und unser digitales UI-Design an deren Bedürfnisse anzupassen, haben wir zwei unterschiedliche Proto-Personas erstellt, die die wesentlichen Merkmale und Vorlieben unserer Nutzer repräsentieren: Fitness und Nachhaltigkeit. Chris ist hauptsächlich von der Fitnessseite des Einkaufszentrums angezogen, technikaffin und legt großen Wert auf Selbstentwicklung und Verbesserung. Sophie hingegen setzt sich für den Klimaschutz, den Feminismus und andere soziale Wohltätigkeitsorganisationen ein. Sie strebt danach, Umweltbewusstsein in ihr tägliches Leben zu integrieren, einschließlich ihrer körperlichen Aktivitäten.
Angesichts der unterschiedlichen Anforderungen und Funktionen sowohl der App als auch der Website haben wir uns entschieden, bei der UI-Design-Grundlage der App auf Wireframes und eine umfassende Informationsarchitektur zu setzen, aufgrund ihrer Komplexität und unklaren Spezifikationen. Die Website hingegen, mit ihrem einfacheren Umfang, verließ sich ausschließlich auf Wireframes. Daher präsentieren wir grafische Darstellungen der Wireframes und der Informationsarchitektur der App.
Nach dem Download wird der User durch ein 5-schrittiges Tutorial bzw. Walkthrough geführt, das ihm die essentielle Funktionen der App erklärt - das Erstellen von Workoutplänen, die Funktion zum Tracken der Workouts im GreenerGym, das Sammeln von Prämien, das Einsehen des aktuellen Angebots des GreenerFoods-Restaurants und die Onlineshopping-Funktion von GreenerWear. Für eine optimale Nutzererlebnis ist der Text von Illustrationen begleitet und das Tutorial kann an jedem Punkt übersprungen werden.
Das Dashboard beinhaltet zunächst einen kreisförmigen Fortschrittbalken, das Teil des Payback-Systems von Greenergym ist, bei dem die Nutzer regulär Prämien für das Erzeugen von Energie über die Cardio-Geräte im GreenerGym in Form von Gutscheinen für GreenerWear oder GreenerFoods erhalten können. Dem Nutzer wird gezeigt, wieviel Watt Energie der Nutzer noch bis zum Freischalten der nächsten Prämie erzeugen muss. Darunter werden wichtige Ereignisse und Informationen angezeigt, wie geplante Trainingseinheiten, tägliche Statistiken und das aktuelle Angebot im GreenerFoods-Restaurant. Diese Elemente dienen als Verknüpfungen zu verschiedenen Abschnitten der App.
Die GreenerShop-Seite dient als Navigationsseite zu den GreenerWear- und GreenerFoods-Shops, die für eine intuitivere Benutzerführung und zwecks besserer Orientierung und Übersicht innerhalb des Shops getrennt sind. Sobald sich die Nutzer im jeweiligen Shop befinden, können sie zwischen verschiedenen Kategorien wählen, nach Stichwörtern suchen, ihren Warenkorb oder ihre Wunschliste einsehen und weitere Details auf der Produktseite ansehen.
Das Cardio-Tracking ermöglicht es Mitgliedern des GreenerGym sich mit Cardio-Geräten des Fitnessstudios zu verbinden und Echtzeitmessungen verschiedener Parameter anzuzeigen, die anschließend im Statistikbereich des Nutzerprofils gespeichert werden. Nach dem Scannen des QR-Codes am jeweiligen Gerät startet die App die Erfassung des Cardio-Trainings. Wenn der Nutzer die Pause-Taste oder den Zurück-Pfeil drückt, oder auf ein Menüelement zuzugreifen will, wird dem Nutzer ein Bestätigungsdialog angezeigt, bevor er zur alternativen Ansicht weitergeleitet wird. In diesem Fall wird der Erfassungsprozess gestoppt. Die Cardio-Tracking Funktion kann entweder über die grüne "+"-Taste im Menü oder über "Cardio" im Workout-Auswahl Screen aufgerufen werden.
Nutzer haben auf dem Workout Auswahl - Screen Zugriff auf verschiedene Workouts, die im Header nach Trainingsart gefiltert, ihrem persönlichen Workout-Plan hinzugefügt, oder sofort gestartet werden können. Der persönliche Plan ist täglich oder wöchentlich vollständig anpassbar und zeigt den täglichen relativen Fortschritt innerhalb einer Fortschrittsleiste an. Nutzer können ausstehende Workouts nach Belieben starten. Dabei werden umfassende Anleitungen für jeden Schritt angezeigt.
Der Punkt rechts in der Menüleiste führt zu den Speiseangeboten des GreenerFoods Restaurant, die einem Cafeteria-Plan ähneln. Über die Kalenderansicht im Header können die Essensangebote für jeden Wochentag angezeigt werden. Zusätzlich können Nutzer die Auswahl basierend auf ihren Präferenzen filtern, wie z.B. glutenfrei, laktosefrei, vegetarisch oder vegan. Für die vielfältigen Bedürfnisse stehen täglich mehrere Alternativen zur Verfügung. Mit Klick auf ein Gericht werden dem Nutzer Details zum jeweiligen Essen angezeigt, die eine ausführliche Beschreibung und Angaben zu den enthaltenen Nährwerten, einschließlich Kalorien, Makronährstoffen und dem Anteil dieser Nährstoffe am Gericht umfassen.
Der Nutzer kann appübergreifend über den Avatar oben rechts zu seinem Nutzerprofil navigieren. Innerhalb des Profils ist an gleicher Stelle allerdings ein Hamburgermenü zu finden, welches zu den Einstellungen führt. Im Header sind Profilinformationen wie Nutzername, Profilbild und Abonnement zu sehen und können von dort bearbeitet werden. Darunter stehen verschiedene Ansichten zur Auswahl. Die Trainingsansicht zeigt Durchschnittsstatistiken für aufgezeichnete Trainingseinheiten in Wochen-, Monats- und Jahresansichten. In den weitern Ansichten kann der Nutzer entweder Körpermaße wie BMI, Gewicht und Körperfettanteil verfolgen, Prämien verwalten, oder verschiedene individuelle Challenges starten und tracken.
Auf der Homepage von Greenergym wird dem Nutzer zunächst das dreiteilige Konzept von Greenergym vorgestellt, wobei jedem der drei Bereiche ein eigener Abschnitt gewidmet ist, der ihm einen ersten Einblick gewährt und über einen entsprechenden Button zu den jeweiligen Unterseiten innerhalb der Website verlinkt. Für ein dynamisches & erstklassiges Nutzererlebnis kann der Nutzer über ein Bilderkarussell bereits durch Produkte des GreenerWear-Onlineshops blättern. Am Ende der Website verweist ein Call-to-Action zum Download der Greenergym-App.
Auf der GreenerGym-Website erhalten Nutzer durch eine Bildergalerie und detaillierte Beschreibungen Einblicke in das Ambiente des Fitnessstudios. Darüber hinaus stellt die Seite ihnen die persönlichen Trainer von GreenerGym vor, um eine persönlichere Verbindung und ein Gefühl der Vertrautheit zu fördern. Außerdem wird eine Übersicht des Kursangebotes und Informationen zu den Abonnements sowie deren jeweiligen Preise und den Vorteile erhalten. Diese können bequem durch Klicken auf die entsprechenden Call-to-Action-Schaltflächen auf dieser Seite erworben werden.
Der Online-Shop erstreckt sich über die Unterseiten "Foods" und "Wear", auf denen Nutzer die versandfertigen Produkte von GreenerWear und GreenerFoods erkunden, Artikel in ihren Einkaufswagen legen und als Favoriten markieren können. Eine Leiste am oberen Rand der Produktübersicht ermöglicht eine gezielte Produktsuche und Filterung nach Kriterien wie Produkttyp, Geschmack, Nährstoffgehalt und Ernährungspräferenzen. Zudem können Produkte nach Bewertung, neuen Artikeln, Preisintervall und Packungsgröße sortiert werden, um das Einkaufserlebnis individuell anzupassen.
Auf der GreenerWear Unterseite, welche ebenfalls zum Online-Shop gehört, können Nutzer wie im GreenerFoods Teil des Shops über die Suchleiste nach bestimmten Artikeln suchen, Sportbekleidung als Favoriten markieren, ihrem Warenkorb hinzufügen, oder ebenfalls nach einer Reihe an Kriterien filtern und sortieren. Da sich der Onlineshop über die beiden Unterseiten "Wear" und "Food" erstreckt, wird der Inhalt des Warenkorbs und der Wunschliste ebenfalls seitenübergreifend gespeichert.
Wie in der Greenergym App werden die Gerichte des GreenerFoods - Restaurant auf der entsprechenden Seite für die gesamte aktuelle Woche angezeigt, wobei in der Kalenderansicht zwischen den einzelnen Tagen umgeschaltet werden kann. Icons links oben in den Bildern der Gerichte zeigen an, ob diese glutenfrei, vegetarisch oder vegan sind. Die Nährstoffanzeige und -verteilung ist allerdings ein exklusives Feature der App, die, wie auf den anderen Seiten der Website jeweils am Seitenende verlinkt ist.
Die Funktion der "Über uns"-Seite besteht im Vermitteln der Markenidentität und Philosophie von Greenergym sowie dem Aufbau einer emotionalen Verbindung zu den Nutzern. Während im ersten Abschnitt Statistiken zur prozentualen internen Stromerzeugung, zum Anteil selbst angebauter Lebensmittel und zur Gesamtunabhängigkeit angezeigt werden, erhalten die Nutzer weiter unten Einblicke in die Mission, Werte und Unternehmensphilosophie von Greenergym. Jedes Teammitglied trägt außerdem durch personalisierte Textvorstellungen dazu bei, eine persönliche, nahbare und einladende Atmosphäre zu schaffen.
Für einen guten Kundenservice und optimales Nutzererlebnis hat der Websitenutzer die Möglichkeit, Greenergym unkompliziert über mehrere Kanäle zu kontaktieren, die auf der Kontaktseite zur Auswahl stehen - entweder über ein Kontaktformular, via E-Mail oder die Social Media-Kanäle. Zusätzlich wird hier für die Anfahrt vor Ort die physische Adresse der Fitness Mall angegeben.
In drei Monaten haben wir Greenergym von Grund auf zu einem konsistenten Markenerlebnis über Print, Web und Mobile entwickelt. Das Projekt war eine wertvolle Lektion darin, Vision und Machbarkeit auszubalancieren. Wirtschaftlich hätten unsere Nachhaltigkeitsziele für ein reales Budget eine striktere MVP-Priorisierung erfordert. Auf Produktseite weisen komplexe UX-Flows – wie die Workout-Individualisierung und Kern-E-Commerce-Features – noch Optimierungsbedarf auf.
Meine zentrale Erkenntnis dabei ist, wie stark ein sauber dokumentiertes UX-Fundament (Personas, IA, User Journeys) ein Team auf eine Linie bringt und Designentscheidungen objektiviert.
Dank des großen Marktpotentials ließe sich das Konzept mit ausreichendem Startkapital auf den Markt bringen: Die Geschäftsidee ist innovativ und unverwechselbar, das Branding und das Storytelling sind stimmig, und die digitalen sowie die Printmedien sind bereits vollständig ausgearbeitet.
Um den Launch erfolgreich zu realisieren, muss in der nächsten Phase die Brücke von der Vision zur Validierung geschlagen werden: durch fundierte Nutzerforschung statt loser Annahmen, um das Geschäftsmodell und das visuelle Design datenbasiert zu schärfen.