ALL-IN-ONE Webpage für Rabbit Hole

von

Eine Webseite, auf der sich die User zurecht finden, sich einloggen, Kurse oder Produkte direkt kaufen und an Yoga-Online-Stunden teilnehmen können. All dies habe ich mit einem eigenen WordPress-Theme, zahlreichen Plugins und einer guten Portion Frust schliesslich hinbekommen. Beim Erstellen der Webseite habe ich auch einen Fokus auf die Usability gelegt. Ich bin sehr zufrieden mit dem Resultat und möchte meine Erfahrungen in diesem Beitrag mit euch teilen.

Hier kommst du zur finalen Webseite von Rabbit Hole Basel.

Ich habe jedoch auf meiner eigenen Webseite die WordPress-Seite von Rabbit Hole Basel dupliziert und mit exemplarischen Inhalten gefüllt. Zudem ist Rabbit Hole Basel noch nicht bereit, Angebote auf ihrer Webseite zu verkaufen und Leute einloggen zu lassen, da hierzu zum Beispiel noch die AGB’s fehlen. Hier kommst du zur duplizierten Beispielsseite.

Design Aspekte

Eines der wichtigsten Design-Elemente ist sicher die Navigationsbar auf der Webseite. Auf der Computer-Version sollte sie beim Runterscrollen am oberen Bildrand «sticky» sein, so dass sie in jeder Situation ersichtlich ist. In der Mobile-Version wollte ich sie unbedingt «sticky» am unteren Bildrand halten. Dies bringt zahlreiche Vorteile, denn wir navigieren sehr häufig mit dem Daumen und ein Hamburger-Menu in der oberen Handy-Ecke ist so eigentlich praktisch nicht zu bedienen, ohne die zweite Hand zur Hilfe zu nehmen. Oder wer kennt das nicht, dass einem das Handy fast aus der Hand fällt, weil man noch mit dem Daumen ganz oben auf dem Bildschirm etwas drücken muss?

Dies konnte ich mit meinem Design umgehen und dem User so ein einfacheres Navigieren auf der Seite erlauben.

Funktionalitäten

Mit der Webseite hat Rabbit Hole Basel folgende Fuktionalitäten abgedeckt:

  • Login-System
  • Notifications-System
  • Kurse verkaufen, Kurse online direkt auf der Seite durchführen, Tutorials verkaufen
  • Kurs-Management-System: Teilnehmer werden in Kursdatenbanken eingetragen
  • Produkte verkaufen
  • Inhalte verschiedenen Blog-Kategorien zuweisen und mit Hilfe eines eigenen Custom-Post-Types und eigenen WordPress-Feldgruppen einfach im Backend erfassen
  • Blogbeiträge als Slider auf der Seite anzeigen lassen
  • Den Instagram-Kanal von Rabbit Hole Basel direkt auf der Webseite spiegeln lassen

… und einiges mehr.

WordPress bietet viele verschiedene Plugins an. Das richtige Plugin zu finden, und dabei nicht immer viel Geld zu auszugeben, ist dabei sehr schwierig. Ich habe enorm viel Zeit investiert, die verschiedenen Tools abzuckecken und zu schauen, welche Lösung für Rabbit Hole Basel die Beste ist.

Dank dem Learning-Management-Plugin Tutor LMS konnte ich ein gutes Tool finden, was zwar in erster Linie für online Kurse gedacht ist, mit ein Paar Workarounds aber beispielsweise auch als Anmeldetool für Live-Events etc. gebraucht werden kann. Dieses Plugin (was jährlich auch etwas kostet) funktioniert mit dem kostenlosen eCommerce Plugin Woocommerce. Dies ist sehr hilfreich. Dank diesen beiden Plugins können Kurse als Produkte in Woocommerce erstellt werden und nach dem erfolgreichen Kauf freigeschaltet werden.

Auf der Webseite gibt es Slider für diverse Themen. Entweder um die bevorstehenden Events und Kurse, oder die aktuellen Blogbeiträge zu zeigen. Diese Slider konnte ich dank viel Recherche und eigenen Coding Anpassungen gratis in die Seite integrieren. Welche Inhalte in den jeweiligen Sliders angezeigt werden sollen, kann im Backend vo WordPress ganz einfach eingestellt werden.

Für die Anzeige von Instagram auf der Webseite habe ich das Plugin Spotlight verwendet. Dieses spiegelt die Inhalte von Instagram immer zeitnah und bietet so auch derjenigen Zielgruppe eine Möglichkeit die Beiträge zu lesen, die kein Instagram-Account hat.

Kosten

Alles in allem kostet Rabbit Hole Basel diese Webseite im Jahr rund 300 CHF (inkl. Hosting, Domain und diversen Plugins). Dafür sind dem Unternehmen nun praktisch keine Grenzen mehr gesetzt. Es kann ihre Kurse oder Produkte verkaufen, Anfragen entgegen nehmen und E-Mails automatisiert versenden. 300 CHF sind im Verhältnis zu den Möglichkeiten dabei sehr wenig.

Inhalte

Für die Webseite habe ich ein Titelvideo aufgenommen, das direkt auf der Front-Page (im Vollbild und geloopt) angezeigt wird. Zudem habe ich an vergangenen Events fotografiert. So hat sich einiges Material angestaut, das für das Erstellen der Webseite sehr nützlich war.

Titelvideo:

Bitte akzeptiere die statistik, Marketing Cookies um diesen Inhalt zu sehen.

Einige Beispielsfotos:

(dbo)

Motivation

Rabbit Hole Basel hat meine Schwester Gebbi und ihr Freund Niggi gemeinsam gegründet. Wie alle Startups, haben sie grosse finanzielle Möglichkeiten, jedoch glücklicherweise einen motivierten Bruder. Ich nahm das Projekt als Chance, viel zu lernen. Das Ziel war sehr hoch, doch trotz vieler Schiwerigkeiten kam ich am Ziel an. Digezz hat mir die Möglichkeit gegeben, ein so grosses Projekt in einem realen Beispiel durchzuführen, ohne einen Druck eines Kundes zu spüren. Ich habe viel gelernt.

 

Schwierigkeiten

Ich habe zuerst vorgehabt, das Projekt ganz selbst zu coden (ohne WordPress). Anfangs Sommer 2022 habe ich damit angefangen und auch ein Zahlungssystem mittels Stripe funktional bereits einbinden können. Dennoch habe ich nach ein paar Monaten realisiert, dass diese Umsetzung für mich so nicht realistisch ist (auch in Betracht auf die Sicherheit das Zahlungssystems etc.). Ich habe mich schliesslich entschieden auf WordPress nochmals neu anzufangen.

Ich verzweifelte sehr oft. WordPress war an gewissen Tagen mein grösster Freund, sehr oft aber auch der grösste Feind. Wer ein eigenes WordPress-Theme mit Integration verschiedener Plugins erstellt, hat grosses Konfliktpotential. So auch bei mir: Zum Teil hat es mir andere Templates übernommen (der Plugins) und mir die Seite komplett «zerrissen». Ich habe glücklicherweise immer Backups gemacht und konnte so wieder eine Stufe zurück gehen.

Eine der Hauptschwierigkeiten war, dass Rabbit Hole Basel einerseits online Kurse anbieten möchte (nur für 1 Person mit Login) andereseits jedoch auch Live Kurse mit einem direkten Anmeldesystem auf der Seite haben möchte (wo auch mehrere Plätze gleichzeitig reserviert werden können sollten). Das Plugin Tutor LMS ist hier nur für einzelne Käufe vorgesehen. Ich konnte das Plugin jedoch etwas «austricksen» und anpassen, dass eine mehrfache Anmeldung möglich ist und der User auch seinen Kollegen für den Live-Event innerhalb des gleichen Logins anmelden kann.

 

Learnings

Ich habe die Möglichkeiten und auch Grenzen des Arbeitens mit WordPress kennengelernt. WordPress kann sehr viel, ist jedoch für grosse Projekte, die viele verschiedene Funktionalitäten mitbringen sollten, auch sehr schwierig ztu handhaben, da die verschiednen Plugins oft ihre eigenen Stiles mitbringen und so zum Teil etwas «gebastelt» werden muss.

Man sollte die grösse eines Projektes nie unterschätzen. Das Erstellen der Webseite für Rabbit Hole Basel hat mich insgesamt sehr viel Zeit gekostet (mind. 200 Stunden). Ein weiteres Mal wäre ich sicher um ein Vielfaches schneller. Ich musste jedoch zuerst begreifen, dass das Selbst-Coden eines solch grossen Projektes mit Zahlungssystem für mich nicht realistisch ist. Zudem habe ich viel Recherchiert und kenne mich nun auch in Sachen Plugins und eigenen Themes gut aus, dass ich für zukünftige Projekte gewappnet bin.