Multimedia Producer: Das All-in-One-Paket

Man gebe den Auftrag für eine Website an einen 0815-Webdesigner und bekommt: Eine 0815-Webseite. Man gebe den Auftrag für eine Website an drei Multimedia-Studenten und bekommt: Eine neue Website, einen Imagefilm, neue Fotos für den Webauftritt, neue Visitenkarten, Texte in der Corporate Language, eine IT- sowie eine Kommunikationsberatung. Obendrauf gabs natürlich bei jedem Meeting ein freundliches Lächeln.

Der typische Multimedia-Student ist eine Spezies, die man in der normalen Welt als willige Allesverbesserer bezeichnen würde. Vor allem dann, wenn es um Webseiten-Aufträge geht. Denn sobald sich Multimedia-Studenten an die Arbeit machen und ein neues Konzept für eine Webseite ausarbeiten, fallen ihnen endlose Verbesserungsmöglichkeiten in weiteren Bereichen auf. Es wäre doch zu schade, wenn auf der frisch programmierten Webseite die alten Fotos oder völlig verstaubte Texte erscheinen würden. Und generell würde doch der Firma ein frischer Auftritt mit einem Video gut tun. Wie gut, dass der Multimedia-Student all diese Fähigkeiten mit sich bringt und daher oftmals für eine Rundumlösung sorgen kann.
So bleibt für einen Multimedia-Studenten ein einfacher medialer Auftrag oftmals nicht nur ein einfacher Auftrag, sondern bringt multimediale «Folgen» mit sich. Deshalb heisst es auch MULTI-Media Student und nicht nur Medienstudent.

Auftrag von BODY PLAZA
So begann auch der Auftrag des Fitnesscenters BODY PLAZA in Chur mit dem einfachen Wunsch nach einem neuen Webauftritt: Nach einer ersten Analyse des bestehenden Web-Auftritts stellte sich jedoch schnell heraus, dass nicht nur das Webseiten-Design veraltet, sondern auch der Inhalt nicht mehr aktuell war. Die Fotos zeigten beispielsweise Räumlichkeiten, aus denen das Fitnesscenter seit über zwei Jahren ausgezogen war. Unter gewissen Menüpunkten war sogar nicht einmal mehr ein Inhalt zu finden. Ein Hauptgrund dafür war, dass die Seite nur von den damaligen Entwicklern bearbeitet werden konnte und Änderungen sich so über mehrere Tage (wenn nicht Wochen) hinauszögerten.
Die Webseite war auch funktionell an den heutigen Standard nicht angepasst und war nicht «mobiletauglich». Da das Fitnesscenter beim Umzug auch sein Angebot umstrukturierte, kam nun der Zeitpunkt für «frischen Wind» im Unternehmen, sprich einen von Grund auf neuen Webauftritt:
Screenshot BODY PLAZA Neue SeiteLink: https://bodyplaza.ch

Zum Vergleich der alte Web-Auftritt des BODY PLAZA:
Screenshot BODY PLAZA Alte Seite
Über den gesamten Zeitraum des Semesterprojekts entstanden mehrere «Auftragsfolgen» vom BODY PLAZA. Diese ergaben sich aus den Meetings, bei denen die Notwendigkeit dafür ersichtlich wurde und beruhten auf dem gewonnenen Vertrauen der Mitarbeiter in die Fähigkeiten der Studierenden.
Dazu gehörten allgemeine Beratungen im Bezug auf die neue Webseite, der Umzug des Servers von einem ausländischen zu einem Schweizer Hoster, die Einrichtung neuer E-Mail-Accounts für neue Mitarbeiter sowie die Kommunikation über Social Media und andere Kanäle wie beispielsweise Google. Zusätzlich wurde für den Auftritt an der HIGA Messe in Chur ein Video gewünscht, welches auch auf der Homepage einen Platz finden sollte. Für die Webseite wurden auch neue Fotos von den Mitarbeitenden, vom Studio und von trainierenden Kunden gewünscht. Weiter wurden nahezu alle Webseiten-Texte in der Corporate Language des BODY PLAZA neu verfasst und neue Visitenkarten per Eilauftrag realisiert.

Visitenkarte BODY PLAZA

(fs)

Kritik
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.

Analyse Fitness-Websites

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:
Strukturierung Website BODY PLAZA

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.

Keine Kommentare

Schreibe einen Kommentar