Entwicklung eines Video-Portals für Tiertraining.TV

Für den Online-Marktplatz tiertraining.tv hat PERIMETRIK® ein professionelles Video-Portal mit lizensierten Produktvideos, Online-Zahlungsabwicklung und Benutzer-Registrierung entwickelt.

Proof of Concept: WordPress statt TYPO3?

Tiertraining.tv ist eine Art Online-Marktplatz, auf dem sich Benutzer registrieren und kostenpflichtige Lizenzen zum Abspielen von Trainings-Videos für Haustiere, z.B. Hunde oder Katzen erwerben können. Da die ehemalige Installation mit TYPO3 technisch am Limit war, wurde PERIMETRIK® in einer ersten Phase zunächst damit beauftragt, das Konzept mit anderen technischen Mitteln nachzustellen und zu prüfen, ob die Anforderungen darin umgesetzt werden können.

PERIMETRIK® gelang es die Anforderungen für das gewünschte Video-Portal mit WordPress und WooCommerce umzusetzen und überzeugte die Betreiber von tiertraining.tv mit der Erstellung eines neuen, modernen Marktplatz.

Referenzen Bilder Template

Die ehemalige TYPO3-Seite tiertraining.tv war technisch an ihre Grenzen gestoßen. PERIMETRIK® führte ein Prüfungskonzept durch, mit dem getestet wurde, ob sich die Anforderungen ebenso mit WordPress umsetzen lassen.

Referenzen Bilder Template

PERIMETRIK® baute das Video-Portal in WordPress auf und testete die gewünschten Funktionen zunächst anhand von Beispiel-Inhalten. Die neue Installation überzeugte die Betreiber von tiertraining.tv und so fand in Phase 2 eine vollumfängliche Weiterentwicklung inkl. Designerstellung und Dynamisierung statt.

Moderne WordPress-Website mit komplexer Video-Verwaltung 

PERIMETRIK® richtete dazu eine WordPress-Installation ein und übernahm zunächst einige Beispiel-Inhalte aus der alten Seite.

Alle Trainings-Videos, die tiertraing.tv anbietet werden von ausgebildeten Tiertrainern erstellt und auf der Video-Plattform Vimeo hochgeladen. Dort sind sie nicht frei verfügbar, sondern werden geschützt und können nur über eine Verbindung zum tiertraining.tv-Server abgespielt werden. Das heißt, nur ein registrierte tiertraining.tv-User hat Zugriff darauf.

Da ein registrierter Benutzer jedoch keine Mitgliedsbeiträge zahlt, sondern jedes Online-Training einen individuellen Preis enthält, musste eine Benutzerverwaltung zum Abspielen der Videos mit individueller User-Historie geschaffen werden. PERIMETRIK® nutzte dazu das Tool Learndash, mit welchem eine benutzerdefinierte Verwaltung zum Abspielen der Videos umgesetzt werden kann. Für die Zahlungsabwicklung integrierte PERIMETRIK® außerdem WooCommerce.

WooCommerce für den Lizenzkauf und die Zahlungsabwicklung

Alle verfügbaren Kurse bzw. Onlinetrainings werden in WooCommerce analog zu den WordPress Inhalten als eigene Produkte angelegt, die zunächst in den Warenkorb gepackt und anschließend, z.B. via PayPal, bezahlt werden können. Um den Kauf abschließen zu können, muss eine Benutzerregistrierung stattfinden. Diese dient der späteren Verwaltung zum Abspielen der Videos in Lerndash. Nach abgeschlossenem Kauf eines Online-Trainings gelangt eine Information von WooCommerce an Learndash, dass für den jeweiligen User eine bestimmte Lizenz-ID vorliegt.

Meldet sich der Benutzer nun auf der WordPress-Seite tiertraining.tv mit seinem Nutzerdaten an, wird anhand der zugeordneten ID eines bestimmten Trainings-Videos von Learndash erkannt, dass er dazu berechtigt ist, das entsprechende Video anzusehen.

Referenzen Bilder Template

Jedes Online-Training wird als eigenes Produkt in WooCommerce angelegt. Auf diese Weise lassen sich Kaufprozess und Zahlungsabwicklung komfortabel organisieren.

Referenzen Bilder Template

Das neu entwickelte Design ist frisch und modern. Großflächige Key Visuals vermitteln Eindrücke in die Arbeit als Tiertrainer und die saubere Struktur und ein einheitlicher Look aller vorkommenden Layouts geben der neuen WordPress ein klares Erscheinungsbild.

Designentwicklung

Nachdem PERIMETRIK® gezeigt hat, dass das gewünschte Konzept erfolgreich in WordPress umgesetzt werden konnte, fand eine redaktionelle Einarbeitung durch den Kunden statt.

Anschließend begann für PERIMETRIK® eine zweite Bearbeitungsphase, in der zuerst die Designentwicklung anstand. Der Look der neuen tiertraing.tv-Website sollte aufgefrischt und modernisiert werden. PERIMETRIK® entwickelte ein übersichtliches Mega-Menü mit Menüpunkten für die verfügbaren Online-Kurse und Trainer. Die Anmeldung zum LogIn-Bereich sowie das Warenkorb-Symbol mit Produktanzeige wurden ebenfalls im Hauptmenü integriert.

Die Hintergrundfarben der Seite wurden in weiß und grau sehr dezent gehalten. Dadurch kommen Headlines und Buttons in orange und grasgrün besonders gut zum Vorschein. Neben großflächigen Key Visuals mit Tieren in Aktion sorgen weitere ansprechende Tierbilder im Verlauf der Seiten immer wieder für einen Hingucker.

Dynamisierung der Inhalte

In der ehemaligen TYPO3-Seite von tiertraing.tv waren alle Inhaltsarten statisch angelegt und konnten nicht miteinander in Bezug gesetzt werden. In der neuen WordPress-Installation erstellte PERIMETRIK® sinnvolle Taxonomien und Post Types, die einander zugeordnet und dynamisch an entsprechenden Stellen auf der Website ausgegeben werden können.

Zudem richtete PERIMETRIK® Verbindungen zwischen bestimmten Post Types ein. So lassen sich z.B. Kurse und News-Beiträge mit den entsprechenden Trainern verbinden. Ebenso können alle Kurse, Trainer oder Beiträge bestimmten Themen zugeordnet werden, nach denen der User spezifisch suchen kann.

Referenzen Bilder Template

PERIMETRIK® richtete für die Beitragstypen „Kurse“, „Trainer“ und „Podcats“ Verbindungen ein, sodass diese miteinander verknüpft werden können. Außerdem lasen sich alle Beitragstypen per Zuordnung zur den passenden Terms der Taxonomie Themen inhaltlich in Bezug setzen.

Referenzen Bilder Template

Auf den Trainer-Detailseiten werden dynamisch passende Kurse (Produkte), News-Beiträge und Podcasts ausgegeben. So entsteht automatisch eine SEO-relevante Landing Page für jeden Trainer.

SEO-relevante Landing Pages mit großer Inhaltsvielfalt

Die dynamische Inhaltsstruktur hat gleich mehrere große Vorteile: Zum einen werden dem User mehr für ihn relevante Inhalte geboten, da er nicht lange suchen muss, sondern ihm meist thematisch sinnvolle Produkte und Beiträge vorgeschlagen werden.

Zudem entstehen durch das Anlegen von Taxonomien und Post Types zahlreiche Archiv- und Detailseiten, die sich hervorragend als SEO-relevante Landing Pages nutzen lassen.

Zuletzt erleichtern dynamische Inhalte natürlich auch die redaktionelle Bearbeitung einer Website, da Inhalte trotz ihrer Vervielfältigung an zahlreichen Stellen nur einmal im System vorhanden und somit auch nur an einer Stelle angepasst bzw. bearbeitet werden müssen.

Integration von Podcasts

Neben den lizensierten und somit kostenpflichtigen Trainings-Videos werden auf der Seite tiertraining.tv auch kostenfreie Podcasts angeboten. PERIMETRIK® installierte dazu ein passendes Tool, mit dem sich die Audio-Beiträge an gewünschter Stelle auf der Website einbinden und abspielen lassen. Damit auch die Podcasts zur dynamischen Inhaltsausgabe genutzt werden können, legte PERIMETRIK® zudem eine eigene Beitragskategorie an. Auf diese Weise können auch die Podcasts einem bestimmten Thema zugeordnet oder mit einem bestimmten Trainer verbunden werden.

Anhand der entsprechenden Zuordnung oder Verbindung können die Podcast-Beiträge thematisch sinnvoll an passenden Stellen auf der Seite  ausgegeben werden. Für die dynamische Inhaltsausgabe erstellte PERIMETRIK® für alle Inhalte Loop Layouts, die optisch soweit möglich einander angeglichen wurden. Dadurch entsteht trotz der Vielfalt der verschiedenen Inhalte ein sauberes und einheitliches Bild.

Referenzen Bilder Template

Alle Podcasts werden als Beiträge der gleichnamigen Kategorie erstellt und können auf diese Weise dynamisch, z.B.auf der zuständigen Trainerseite ausgegeben werden.

Referenzen Bilder Template

Auf der Übersichtsseite „Kurse“ lässt sich die Kurssuche komfortabel nach vier verschiedenen Filtermerkmalen eingrenzen.

Entwicklung eines professionellen Such-Filters

Damit der Benutzer gezielt nach gewünschten Kursen und Trainings suchen kann, entwickelte PERIMETRIK® einen komplexen Suchfilter mit mehreren Suchebenen und band ihn auf der Übersichtsseite „Kurse“ ein. 

Anhand des Filters lässt sich zunächst nach den Taxonomien „Tierart“ (z.B. Hund) oder einem bestimmten Thema (z.B. „Clickertraining“) filtern zusätzlich kann auch direkt nach dem Post Type „Trainer“ oder einer vorliegenden Zertifizierung gefiltert werden. Der Filter funktioniert hierarchisch, d.h. bei getroffener Auswahl eines bestimmten Merkmals, wird die Auswahl der anderen Filtermöglichkeiten entsprechend angepasst und reduziert. Zudem werden dem Benutzer schon beim Filervorgang die Anzahl der verfügbaren Treffer in der Filterauswahl angezeigt und laufend aktualisiert. Per Klick auf den Button „Anwenden“ erscheinen dann alle Suchergebnisse (Kurse), die zur getroffenen Filtereinstellung passen. Per Klick auf den Button „zurücksetzen“ kann ein neuer Filtervorgang gestartet werden. 

Datenimport der Inhalte aus TYPO3

Nachdem Funktionalitäten, Design und Benutzerführung der neuen tiertraining.tv-Website stimmte, war es an der Zeit die alte TYPO3-Seite „abzuschalten“. Dabei sollten jedoch die registrierten Benutzer und ihre Käufer-Historien nicht verloren gehen. Um die vorliegenden Userdaten weiter nutzen zu können, führte PERIMETRIK® einen komplexen Ex- und Import aus TYPO3 in die WordPress-Datenbank durch.

Zunächst importierte PERIMETRIK® alle Benutzer aus TYPO3 inklusive ihrer TYPO3-IDs. In WordPress erhalten diese zusätzlich eine neue ID. Anschließend fand auch ein Import aller Kurse aus TYPO3 mit ID statt. Nachdem beide Datenbestände vollständig in WordPress vorlagen, importierte PERIMETRIK® anhand der entsprechenden IDs zuletzt die Verbindung der Benutzer zu ihren bereits gekauften Kursen.

Im Ergebnis konnten in die neue WordPress-Website alle registrierten Kunden mit korrekter Zuordnung zu den gekauften Kursen übernommen werden. So konnte PERIMETRIK® sicherstellen, dass keine Käufer-Historie beim Import verloren ging.

Referenzen Bilder Template

PERIMETRIK® importierte alle Benutzer und Kurse sowie deren Verbindung aus der ehemaligen TYPO3-Seite. So konnte die Käufer-Historie aller User in die neue WordPress-Installation übernommen werden.

Referenzen Bilder Template

Anhand der Benutzerregistrierung werden gekaufte Lizenzen zum Abspielen der Trainings-Videos verwaltet.

Benutzerregistrierung und Anmeldung zum LogIn-Bereich

Registrierte Benutzer können sich somit im neuen Video-Portal wie gewohnt mit ihren Nutzerdaten anmelden und haben Zugriff auf ihre gekauften Kurse bzw. Produkte im Warenkorb. Neue Benutzer bzw Kunden können sich einfach per Formular registrieren. PERIMETRIK® erstellte dazu sowohl ein gesichertes Anmelde- als auch Registrierungsformular mit verschlüsselter Datenübertragung und Google reCaptcha zum Schutz vor Robots.

Beide Formular sind auf der Seite „Mein Konto“ eingebunden, die unter dem gleichnamigen Menüpunkt im Hauptmenü zu erreichen ist.

Fazit:

Mit der neuen Kombination aus Website und Shop für tiertraining.tv hat PERIMETRIK® gezeigt, dass sich nahezu jede – noch so komplexe – Anforderung mit WordPress und WooCommerce umsetzen lässt. Der Ablauf vom Kaufprozess in WooCommerce bis zur Erkennung der entsprechenden Abspiel-Lizenzen am Benutzer spielen einwandfrei ineinander und ermöglichen einen reibungslosen, komfortablen und zugleich sicheren Betrieb des neuen Video-Portals. Dank des Datenimports aller Nutzerdaten inklusive ihrer Historie konnte der Betrieb des ehemaligen TYPO3-Portals sauber abgelöst und die neue moderne WordPress-Installation in Betrieb genommen werden. Der moderne Look und die klare Struktur führen den Benutzer sicher zum gewünschten Produkt. Der große Anteil an dynamischen Inhalten und sinnvollen Landing Pages sorgen für eine gute SEO-Relevanz und eine Reduzierung des redaktionellen Aufwands der neuen Website.

Weitere Projekte für Kunde: Dreh-Punkt GmbH, Würzburg

Unsere Lösungen für dieses Projekt:

In diesem Projekt konnten wir auf einige bewährte Lösungen zurückgreifen:

Anfrageformular

Sie brauchen ein sicheres, DSGVO-konformes Formular auf Ihrer Website? Wir erstellen Ihnen jede Art von Formular mit Google reCaptcha für Ihre WordPress Website oder Ihren WooCommerce Shop.

Benutzerdefinierte Beitragstypen

Mit Custom Post Types bzw. Benutzerdefinierten Beitragstypen können individuelle Inhalte verwaltet und dargestellt werden. Häufige benutzerdefinierte Beitragstypen sind z.B. Referenzen, Kunden, Kundenstimmen oder FAQ.

Benutzerdefinierte Taxonomien

Benutzerverwaltung und LogIn-Bereich für Benutzer

Mit einem LogIn-Bereich kann registrierten Mitgliedern – bei entsprechender Benutzerverwaltung – der Zugriff auf gewisse Website-Inhalte eingeräumt werden, der dem Standard Website-Benutzer verwehrt bleibt.
Wir integrieren einen geschützten Bereich in Ihre WordPress Website, in dem Sie registrierten Mitgliedern exklusive Inhalte zur Verfügung stellen können.

Call to Action

Wirksame CTAs für WordPress Websites, z.B. als Button mit Themenbezug, mit optisch ansprechendem Parallaxen-Effekt und/oder mit Kontakt-Formular.

Dynamische Inhalte

Dynamische Inhalte verringern den Pflegeaufwand, erhöhen den Mehrwert für den Nutzer und verbessern die Sichtbarkeit in Suchmaschinen massiv (SEO). PERIMETRIK® ist Experte für Dynamische Inhalte und setzt diese sinnvoll auf Ihrer WordPress Website ein.

Landing Page

Mehr Content, mehr Nutzen, mehr Relevanz – Wir erstellen Ihnen eine Website-Struktur für Ihre WordPress Seite, mit der einfach und schnell neue Landing Pages generiert werden können.

Produktfilter

Besserer Kundenservice mit einem komfortablen Produktfilter zur Eingrenzung von Kategorien und weiteren Produkteigenschaften: Wir entwickeln einen professionellen Filter für Ihr Sortiment und integrieren diesen an gewünschter Stelle in Ihren WooCommerce Shop.

Suchfilter

Mit präzisen Filtermöglichkeiten schnell zum gewünschten Ergebnis kommen: Wir erstellen Ihnen einen professionellen Suchfilter zur Eingrenzung der Suchergebnisse anhand verschiedener Merkmale und integrieren ihn in Ihre neue WordPress Website.

WooCommerce Erweiterte Produkt-Optionen

Fügen Sie erweiterte kostenpflichtige oder kostenlose Optionen auf Ihrer Produktseite hinzu, indem Sie Feldtypen wie Optionsfelder, Kontrollkästchen, Dropdown-Felder, benutzerdefinierte Texteingaben und mehr verwenden.

Sie wünschen ebenfalls ein Online-Portal mit Benutzerregistrierung und Kauffunktion?