Webdesign, Frontend Development, WordPress Development, WooCommerce Shop
Für unsere langjährige Kundin, die photomundo GmbH, durften wir zum 10-jährigen Jubiläum den Website-Relaunch inklusive einem neuem WooCommerce Online-Store umsetzen.
Ausgangslage
Die bisherige Website wurde 2014 entwickelt und war technisch wie auch optisch etwas in die Jahre gekommen.
Neben der Auffrischung des Erscheinungsbildes, welches teilweise vom Kunden inhouse erstellt wurde, war es an der Zeit, direkt über die Website Umsatz zu generieren und Fotokurse direkt verkaufen zu können. Zudem sollten interne Abläufe automatisiert werden, so dass das photomundo Team seine Zeit in die Entwicklung neuer Angebote stecken kann.
Neben den direkten Anforderungen des Kunden, setzen wir uns selbst bei jedem neuen Projekt einige interne Ziele. In diesem Falle wollten wir auf jeden Fall die Performance spürbar verbessern und im besten Fall auch bezüglich Barrierefreiheit und Suchmaschinenoptimierung Verbesserungen erzielen.
Die Ziele waren also grob umrissen wie folgt:
- Auffrischung des Erscheinungsbildes
- Entwicklung eines Online-Shops
- Vereinfachung der internen Abläufe für den Kunden
- Performance optimieren
- SEO und Accessibility optimieren
Design
Ein leicht überarbeitetes Logo sowie einige neue Vorgaben zum CI/CD wurden von photomundo intern entwickelt und uns zur Verfügung gestellt. Ausgehend davon entwickelten wir in einem ersten Schritt ein Designkonzept, das uns als Vorlage für die gesamte Website diente.
[Screenshot: Logo]
Als neue Hausschrift kommt Proxima Nova zum Einsatz. Das Logo erhielt eine sanfte Überarbeitung und es wurde ein Farbsystem eingeführt, um die verschiedenen Bereiche klar voneinander abzugrenzen.
[Screenshot: Farbwelt]
Da die Umsetzung relativ schnell erfolgen musste, um termingerecht zum Jubiläum live zu sein, entwickelten wir parallel zu den ersten Entwurfsrunden bereits den technischen Unterbau des Shops. So konnten wir sehr schnell einendynamischen, klickbaren Prototyp umsetzen, der anschliessend direkt mit realen Daten aus dem Store befüllt werden konnte.
Technische Umsetzung
E-Commerce
Für uns war schnell klar, dass wir für den Onlineshop auf WooCommerce setzen werden. Mit im Rennen war zuerst noch Easy Digital Downloads, welches wir für den Verkauf unseres eigenen Plugins picu verwenden. Da photomundo neben Kursen und eBooks in Zukunft auch physikalische Produkte anbieten möchten, war sehr schnell klar, dass WooCommerce uns hier die flexibleren Möglichkeiten bietet.
Individuelle Entwicklungen
WooCommerce bietet bereits “out-of-the-box” die nötigen Funktionalitäten, um Varianten eines Produktes (sog. Product Variations) anzulegen. Dies ist ein mächtiges Tool, erwies sich aber für einfachere Varianten in der Pflege etwas umständlich.
Wir nutzten Advanced Custom Fields Pro, um für den Kunden eine sehr einfache Oberfläche zu erstellen, über die Kursdaten eingetragen werden. Im Hintergrund entwickelten wir ein Script, welches bei jedem Speichern des Produktes die Daten aus ACF mit den WooCommerce-Variationen synchronisiert, so dass der Kunde diese nicht mehr direkt bearbeiten muss.
Checkout Anpassungen
photomundo bietet neben Fotokursen und -Reisen, die einen oder mehrere Tage dauern, auch kurze und günstigere Abend-Workshops an. Da sich für diese eine Rechnung kaum lohnt, sollte bei diesen Produkten nur die Kreditkartenzahlung angeboten ewrden. Hier nutzen wir (ebenfalls über das oben genannte Interface) Checkboxes im Backend, mit denen Zahlungsart komfortabel gesteuert werden kann.
Für die Standardfelder des WooCommerce-Checkouts veränderten wir zunächst die Reihenfolge und erweiterten dasFormular um einige zusätzliche Felder, die dem Kunden bei der Bestellung abgefragt werden sollen. Wenn ein Kurs von einem Kunden mehr als einmal gebucht wird, werden zudem automatisch alle Teilnehmerdaten wie Vorname, Nachname etc. für den zusätzlichen Teilnehmer abgefragt.
Filterfunktionalität
Die Angebot von photomundo umfassen Fotokurse, Fotoreisen, Events sowie auch digitale und phyische Produkte. Damit diese auch mit steigendem Angebot noch einfach gefunden werden können, entwickelten wir eine dynamische Filterfunktion.
Diese lässt eine Filterung aufgrund der Kategorien, Themen oder Stichworten zu. Zudem können die FotoKurse und -Reisen nach Datum gefiltert werden.
Für die Filter-Funktionalität setzten wir auf FacetWP, welches den Grossteil der Funktionalität bereitstellte und uns die nötigen Schnittstellen für Anpassungen, im Speziellen zur Datumsfilterung, zur Verfügung stellte.