von Sonja Bandli, Kristin Lange und Manuel Rupp
Ziel des Projekts
Für dieses Semester wollten wir ein Projekt realisieren, welches alle unsere bisher gelernten Fähigkeiten im Bereich Multimedia vereint. Wir wollten quasi ein MMP-All-in-One-Paket realisieren um aufzuzeigen, was MMP-Studierende leisten können. Die Anfrage für die Realisierung der Webseite von den Inhabern von BODY PLAZA bot sich hierfür perfekt an.
Recherche und Analyse
Um eine moderne Website zu erstellen, die sich einerseits branchenkonform zeigt und dennoch heraussticht, war eine umfassende Analyse der aktuellen Marktsituation nötig. Dazu wurden diverse Websites sowohl von Fitnesscentern in Chur, welche direkte Konkurrenten sind, als auch von Fitnesscentern aus der Schweiz analysiert und auf ihre Stärken/Schwachstellen untersucht. Schlussendlich entstand eine grosse Matrix mit vielen Vor- und Nachteilen der jeweiligen Seiten. Diese Methode verhalf uns zu einem sehr konkreten Bild, was auf jeden Fall auf der neuen Webseite von BODY PLAZA unbedingt beachtet oder vermieden werden muss. Viele der untersuchten Webseiten waren unübersichtlich, zu bunt und verwirrend gestaltet. Einige waren wie die alte Seite von BODY PLAZA nicht den heutigen Webstandards angepasst und/oder waren unübersichtlich. Sie hatten oft kein responsives Design oder wichtige Informationen wie etwa Öffnungszeiten waren schwierig zu finden.
Die Analyse wurde schliesslich mit den Inhabern vom BODY PLAZA besprochen. Zusammen definierten wir, was eine gute Fitnesscenter-Website ist und welche Anforderungen erfüllt werden sollen:
- Responsives Design
- Übersichtliches und schlichtes Design in den Corporate-Farben (blau)
- Einfache Verwaltung der Seite für die Mitarbeitenden
- Reservationsmöglichkeit für Probetrainings bei einer/einem gewünschten Trainer(in)
- Grafische Darstellung des Group-Fitness-Angebots und einfache Administration davon
- Verknüpfung mit sozialen Medien (vorerst nur Facebook)
- Keine statische Home-Seite (News mit Facebook verknüpft)
- Gute und übersichtliche Preisdarstellung
- Fotos der Mitarbeitenden
- Öffnungszeiten gut sichtbar (auf Startseite und im Footer)
- Übersichtliche Anfahrtsbeschreibung
- Die häufigsten Fragen von Kunden mit entsprechenden Antworten (Entlastung des Personals)
- Kontaktformular mit Spam-Filter
- Suchfunktion
- Zitat(e) von Firmenkunden für neue potentielle Partner
Content/Strukturierung
Der erste Schritt, um diese Anforderungen zu erreichen war, die grundsätzliche Struktur der Website festzulegen. Der zeitliche Aufwand dieses Prozesses wird häufig unterschätzt. Er ist aber auch einer der wichtigsten Prozesse, da Fehler grosse Konsequenzen für das Projekt haben könnten. Obwohl wir den Schritt nicht unterschätzt hatten, benötigte dieser doch mehr Zeit als zu Beginn eingeplant.
Unser Team musste sich für diesen Arbeitsschritt intensiv mit der alten Website auseinandersetzen und mit den Notizen der Kundengesprächen abstimmen. So hatten wir einen Überblick über den Ist-Zustand und spürten, was den Inhabern vom BODY PLAZA wichtig ist und was nicht. Eine Schwierigkeit dabei war, dass auf der alten Webseite einige Unterpunkte ohne Inhalt waren und ihr gesamter Fitnessbereich seit dem Umzug anders gestaltet war. Wir mussten einerseits von der alten Webseite Inhalte übernehmen, filtern und neu sortierten, andererseits mussten wir auch Platz für den zukünftigen und neuen Inhalt schaffen. Ziel war dabei, die Anzahl der Hauptmenüpunkte so gering wie möglich und so hoch wie nötig zu halten.
Somit können sich die Benutzer zwar schnell einen Überblick verschaffen, sie gelangen aber auch mit wenigen Klicks zu den gewünschten Informationen. Mit Hilfe von einfachen Papierkarten konnten wir die Inhalte beliebig verschieben:
Das neue Menü der Webseite besitzt nun folgende sechs Menüpunkte: Home, Fitness, Group-Fitness, Sauna, Preise und Über uns.
Themes
Da die Webseite zukünftig von der neu angestellten Mitarbeiterin für Marketing und Administration des BODY PLAZA betreut werden sollte, entschied sich das Team mit WordPress zu arbeiten. Dies ermöglicht einen einfachen Unterhalt der Seite.
Für die Webseite wurde dann ein geeignetes Theme-Template gesucht. Die Suche erwies sich jedoch anspruchsvoller als von uns erwartet: Um später nicht unendlich viele Plugins nutzen zu müssen, ist es von Vorteil, wenn das Grundtheme eine Vielzahl der gewünschten Funktionen schon besitzt. Daher wurden die Themes, welche zur Auswahl standen, vor allem anhand der zuvor erstellten Kriterienliste gewertet und ausgesucht. Eine Entscheidungsmatrix half dabei enorm bei der Bestimmung des Themes. Schlussendlich konnte sich das Theme "DynamiX" gegen “Theme X” und “Avada” durchsetzen, da es auf die Anforderungen am besten passte. Die farbliche und typografische Anpassung des Themes an das bestehende Corporate Design von BODY PLAZA war einfach. Der Feinschliff hingegen raubte uns aber extrem viel mehr Zeit als wir erwartet hatten. Uns war aber wichtig, dass wir ein sauberes Projekt abliefern konnten und investierten so lieber ein paar Stunden extra für ein gutes Ergebnis.
Plugins
Damit alle gewünschten Funktionen für die Webseite umgesetzt werden konnten, waren nebst dem gewählten Theme noch einige weitere Plugins nötig. Bevor wir diese kauften, sprachen wir immer zuerst mit den Auftraggebern ab, ob dies in Ordnung geht und sie diese bezahlen.
WPBakery Visual Composer
Dieses Plugin vereinfacht die gesamte Programmierung der Webseite und war im Theme schon vorhanden. Es zeigt im Backend die einzelnen Elemente schon in vereinfachter Form grafisch dar und gibt so dort schon einen ersten Eindruck der Webseite. Die Elemente können einfach hinzugefügt, bearbeitet und mittels Drag&Drop verschoben werden. Dies wird vor allem bei der Weiterführung der Webseite durch den Kunden eine grosse Erleichterung sein.
Black Studio TinyMCE Widget
Die Gestaltung des Footers erweist sich nicht immer als einfach und ist oft sehr eingeschränkt. Durch dieses Plugin kann auch für den Footer visuell gearbeitet werden. Das bedeutet, dass beim Erstellen des Widgets/Footers wie im normalen Wordpress Backend gearbeitet und Text entsprechend formatiert werden kann.
Bookly Booking Plugin
Hiermit können Kunden neuerdings über die Webseite Terminanfragen für Probetrainings oder Personal-Trainings tätigen. Dabei sieht der Nutzer jederzeit, zu welchen Zeiten der gewünschte Trainer oder die gewünschte Trainerin noch frei ist. Im Backend können dafür für die einzelnen Trainer Verfügbarkeiten und Ferien individuell eingetragen werden. Zudem kann jeder Trainer diesen Kalender mit seinem Google-Kalender verknüpfen und somit jederzeit mobil und abrufbar dabei haben.
Contact Form 7
Damit die (potentiellen) Kunden Fragen und Anregungen an das Team von BODY PLAZA stellen können, verwendeten wir das gratis Plugin “Contact Form 7”. Es erlaubt auf einfache und schnelle Art, Kontaktformulare zu realisieren. In Kombination mit einem Google-Konto funktioniert damit sogar ein Captcha-Anti-Spam-Feld sehr gut.
Custom Facebook Feed Pro Business
Mit diesem Plugin kann der Facebook-Feed der Bodyplaza-Seite auf der Home-Seite eingebunden und dem Design der Webseite angepasst werden. Das ermöglicht dem BODY PLAZA, ihre Kunden auf dem neusten Stand zu halten, egal ob sie nur ihre Webseite besuchen oder auch auf Facebook angemeldet sind. So kann eine breite Zielgruppe mit den gleichen Informationen versorgt werden und die Marketing-Abteilung muss nur auf einer Plattform Einträge generieren. Der Facebook-Feed ersetzt den bisherigen Newsletter.
Custom Facebook Feed Pro - Masonry Columns
Das Plugin “Custom Facebook Feed Pro Business” bietet zwar schon viel, kann aber nicht alles. Deshalb musste die Erweiterung “Masonry Columns” zusätzlich gekauft werden. Damit können nicht nur einzelne Facebook-Feeds untereinander angezeigt werden, sondern die Feeds werden zu einer “Wand” automatisch zusammengestellt. Dies erlaubt eine ungewohnte und lebendige Art, aktuelle Facebook-Feeds darzustellen.
Custom Login
Obwohl dies von den Auftraggebern nicht explizit gewünscht wurde, haben wir mit dem Plugin “Custom Login” den faden WordPress-Login aufgepeppt. Nebst dem Hintergrundbild konnten wir hiermit auch die Farben des Login-Panels ändern.
Duplicate Post
Unser Ziel war ein einheitliches Design. Da gewisse Einstellungen (vor allem mit dem Visual Composer) nicht einfach so kopiert werden können, installierten wir “Duplicate Post”. So konnten wir ein Seiten-Template erstellen und für die anderen Seiten kopieren. Dies garantierte uns einheitliche (Start-)Konfigurationen der einzelnen Seiten.
Duplicator
Mit dem “Duplicator” können Backups gemacht und auf die lokale Festplatte heruntergeladen werden. Das Backup der finalen Webseiten-Version haben wir so als Sicherungskopie heruntergeladen und anschliessend wieder auf den Server in eine Testumgebung kopiert. Die Auftraggeber können so in Zukunft Updates und Änderungen zuerst testen, bevor sie “live schalten”.
Forty Four - 404 Plugin for WordPress (gratis)
Fehlermeldungen sind nervig. Noch nerviger ist es für Benutzer, wenn sie im Nirvana einer Webseite landen. Dies sollte zwar nicht, kann aber passieren. Deshalb richteten wir “Forty Four” ein, was uns benutzerfreundliche 404-Seiten generiert und für die komplett Hilflosen sogar eine Suchfunktion anbietet.
Timetable Responsive Schedule
Um die Group-Fitness-Lektionen übersichtlich darzustellen wurden verschiedene Wege diskutiert und getestet. Schnell wurde jedoch klar, dass ein Plugin mehr Sinn macht und viel effizienter ist, als wenn die Mitarbeitenden bei jeder Änderung viel Arbeit investieren müssen. Ein geeignetes Plugin zu finden, welches sowohl mobile als auch für den Desktop eine übersichtliche und angenehme Darstellung bietet ereignete sich als sehr schwierig. Dadurch, dass es Group-Fitness-Lektionen am Morgen, über Mittag und am Abend gibt, entstehen „Leerstunden“, welche man bei den wenigsten Plugins entfernen kann. Dies gewährleistet aber eine kompakte Darstellung. “Timetable Responsive Schedule” beinhaltet alle benötigten Funktionen wie das Entfernen der „Leerstunden“ und der angepassten Darstellung für mobile und Desktop. Leider ist es designmässig aber nicht allzu sehr flexibel wie andere. Da aber die Übersichtlichkeit vor dem Aussehen stand wurde entschieden, dass dieses Plugin verwendet wird. Es dient nun als eine gute Übergangslösung, bis etwas besseres gefunden respektive von jemandem (weiter-)entwickelt wird.
Slider Revolution
Auf der Home-Seite wurde mit diesem Plugin der Einstieg in die Seite gestaltet. Es erlaubt die Gestaltung der durchlaufenden Slides für alle Displaygrössen individuell und besitzt eine Vielzahl an Möglichkeiten für Übergänge und Effekte. Obwohl das Plugin schon mit dem Theme mitgeliefert wurde, kaufte das Team eine Voll-Lizenz. Diese erlaubt im Gegensatz zur “OEM-Version” des Themes direkte Updates und unzählige Design-Templates, was die Arbeit damit sehr erleichtert.
Business Hours Lite
Für die Darstellung der Öffnungszeiten wurde dieses Gratis-Plugin verwendet. Ein nettes Feature dabei ist, dass der aktuelle Tag speziell markiert wird und die Besucher so schnell sehen, wie an diesem Tag die Öffnungszeiten sind.
Yoast SEO for WordPress plugin
Heutzutage ist der digitale Auftritt der meisten Unternehmen sehr wichtig. Damit sie über Suchmaschinen wie Google oder Bing gefunden werden können, muss eine sogenannte SEO (Abkürzung für search engine optimization) durchgeführt werden. Mit dieser Suchmaschinenoptimierung, meist unterstützt durch ein Tool/Plugin, werden die Webseiten besser (oder überhaupt) von Suchmaschinen gefunden und indexiert. Damit die Webseite von BODY PLAZA nicht nur toll aussieht, sondern auch im Internet gefunden wird, installierten wir das SEO-WordPress-Plugin von Yoast. Dieses ist sehr einfach zu bedienen und gibt den Autoren sehr nützliche Tipps, wie die SEO gemacht werden kann.
Advanced Responsive Video Embedder
Obwohl WordPress und das Plugin “Visual Composer” YouTube-Videos unterstützen, installierten wir einen zusätzlichen Video-Embedder. Der Grund dafür ist, dass dieses Plugin die Videos besser in die (responsive) Seite integriert.
Zusatzaufträge/Zusatzleistungen
- Beratung
- Beratung, wie in Zukunft mit und auf der Webseite sowie mit Social Media kommuniziert werden soll
- Empfehlungen, wie mehr Kunden über das Internet generiert werden können (Google , Telefonbuch, etc.)
- IT-Beratung für das Firmennetzwerk und Hosting-Beratung
- Server
- Umzug des Servers
- Einrichtung neuer E-Mail-Accounts für neue Mitarbeiter
- Fotos/Video/Grafik
- Teamfotos
- Fotos der Fitnesscenter-Räumlichkeiten
- Fotos von trainierenden Kunden
- Drohnen-Foto des Gebäudes
- Kurzfristige Gestaltung von Visitenkarten
- Imagefilm des BODY PLAZA für den Messestand an der HIGA in Chur (in Zusammenarbeit mit Fabio Coray)
- Anpassung des Linienplans des "Dr Bus vu Chur" an das CI von BODY PLAZA
- Erstellung eines vereinfachten Anfahrtsplans
- Texte
- Verfassen von Texten in der neu definierten Corporate Language
- Vorhandene Texte korrigieren und anpassen
Workflow
Für die Analyse haben wir uns entschieden, zusammen zu arbeiten, da dies für alle Teammitglieder gleichermassen wichtig ist. Die darauf folgenden Arbeiten haben wir uns nach Kompetenzen und Verfügbarkeit aufgeteilt. Für das Zusammenspiel der verschiedenen Zusatzauftäge in dieser Arbeit war wichtig, dass wir uns im Team und mit den Auftraggebern regelmässig trafen. Dazwischen kommunizierten wir hauptsächlich via E-Mail oder telefon. Innerhalb der Gruppe wurde jedoch ausscliesslich über WhatsApp kommuniziert und Notizen sowie Unterlagen über Google Drive bearbeitet.
Schwierigkeiten
Während des Projekts hatte das Team mit den unterschiedlichsten Schwierigkeiten zurecht zu kommen. So entstanden oftmals Herausforderungen durch unsere eigenen (hohen) Ansprüche an die neue Webseite.
Da mit einem ursprünglich englischen Theme gearbeitet wurde, musste vieles manuell übersetzt werden. Auch bei einigen Plugins, die zwar die gewünschten Anforderungen erfüllten, aber ebenfalls in Englisch programmiert waren, mussten wir übersetzen. Manche Plugins hatten die Möglichkeit der Übersetzung im Backend schon mitgeliefert, bei anderen musste im Code selbst der Text übersetzt werden. Dies erforderte oft viel Geduld und Zeit, bis die richtige Datei gefunden war.
Ebenso mussten im Template viele Anpassungen im CSS vorgenommen werden, um das Design zu individualisieren. Auch dies gestaltete sich nicht immer nur einfach, da auch hier die richtige Class angesprochen werden musste, damit die Änderungen “gegriffen” haben. Beispielsweise waren bei den Buttons vom Theme her nur eine bestimmte Anzahl an vorgegebenen Farben zur Auswahl vorhanden. Da die Webseite sich aber am Corporate Design anlehnen sollte, mussten diese Farben geändert werden. Für diese Anpassungen haben wir sehr viel Zeit und Neven investiert, das Ergebnis entschädigt aber alles.
Eine weitere Herausforderung war die übersichtliche Darstellung der Abonnements und Preise. Dies Ansicht sollte sich von den üblichen Darstellungen abheben und dennoch für mobile geeignet sein. Deshalb entschied sich das Team für eine vom BODY PLAZA gestellte und designorientierte Lösung, die responsive zu programmieren war.
Die Gestaltung einer vereinfachten “Anfahrtskarte”, die für Personenwagen und Personen, die mit dem ÖV anreisen wollen, war nicht schwierig für uns als MMP-Studierende. Da wir aber ein gutes und ansprechendes Ergebnis erzielen wollten, benötigte dies viel Zeit. Als Alternative könnte hier das Einbinden einer benutzerdefinierten Google-Maps-Karte überdacht werden.
Zusammenarbeit mit dem Kunden
Der Kunde zeigte sich sehr offen für das Projekt der neuen Webseite und war umso mehr begeistert, als er herausfand, dass auch noch weitere mediale Fähigkeiten im Team vorhanden sind. Durch das gewonnene Vertrauen fragte uns der Kunde nach weiteren Arbeiten, obwohl wir alle noch im Studium sind und noch wenig vergleichbare Referenzen aufzuweisen hatten.
Durch die Meetings mit dem Kunden wurde das Team immer wieder auf weitere Verbesserungs- und Vereinfachungsmöglichkeiten des täglichen Geschäfts von BODY PLAZA aufmerksam, die mit der Webseite gelöst werden könnten. Auch diese überliess uns der Kunde in grossem Vertrauen, was wir sehr schätzen. Dies ermöglichte uns, das Projekt mit sehr viel Freiheit umzusetzen.
Fazit
Wir waren selber überrascht, wie breit uns Wissen im Multimediastudium vermittelt wurde und immer noch wird. Wir haben viele unterschiedliche Fächer und uns war klar, das wir viele verschiedene Fähigkeiten lernen. Jedoch konnten wir an diesem Auftrag das erste Mal so viele dieser Fähigkeiten auf einmal einsetzen. Bis anhin waren diese trotz konvergentem Arbeiten nie so in einander verflochten und voneinander abhängig wie in diesem realen Auftrag des Fitnesscenters BODY PLAZA.
Dies hat uns auch nochmals aufgezeigt, welche wichtige Rolle Multimediaproducer spielen respektive in der Zukunft spielen werden; wir sind nun voller Freude auf unsere Zeit nach dem Studium.
Was wir gelernt haben ist, dass eine klare, ehrliche und protokollierte Kommunikation eine wichtige Rolle spielt und es sehr viel bringt Fähigkeiten und Kompetenzen von Teammitgliedern schon im Vorhinein zu kennen. Da dies nicht unser erstes Projekt in dieser Gruppe war, hatten wir den Vorteil schon sehr genau zu wissen, wer was am besten kann. Wir setzen uns für dieses Projekt das Ziel, für alle Multimedia-Arbeiten offen zu sein. In der Wirtschaft kann jedoch sehr selten so gearbeitet werden, da meistens eine Planung über Monate wenn nicht Jahre steht und Zusatzaufträge nicht immer rein passen.