P. Jentschura - Referenz

Wie wir P. Jentschura halfen, die Conversion Rate zu erhöhen, neue Interessenten zu gewinnen und eine Erfolgsmessbarkeit einführten

Website besuchen

Die Aufgabe

Die bisherige Website der Marke P. Jentschura war nicht für Mobilgeräte und Tablets geeignet und somit mussten Benutzer unschön auf der Seite umherscrollen und zoomen. Zudem waren Informationen oftmals unübersichtlich und schwer zu finden, da der Seitenumfang über die Jahre stark gewachsen ist.

Die optische Umsetzung entsprach auch nicht mehr dem aktuellen Corporate Design und brauchte somit auch eine Aktualisierung.

Es galt eine neue, moderne und responsive Website zu erstellen welche die Interaktion mit den Besuchern der Seite erhöhen sollte. Gleichzeitig musste die hohe Masse an qualitativen Informationen für alle Besucher schnell und einfach zu erfassen und auffindbar sein.

Weiterhin sollten automatisierte Prozesse eingeführt werden, da oft Anfragen zu Bezugsquellen für die Produkte oder Anfragen für Produktproben per E-Mail aufliefen und dies erhebliche Aufwände bei der Bearbeitung bedeutete.

Eine sehr hohe Priorität hatte auch die Einführung einer Messbarkeit für Aktionen. Somit kann ausgewertet werden, wie effektiv bestimmte Maßnahmen wie Anzeigen oder Kontaktanfragen waren.

Das eingesetzte CMS war in einer veralteten Version installiert und durch viele Anpassungen unübersichtlich und langsam.

Der Kunde

Unser langjähriger Partner, die Jentschura International GmbH beauftragte uns mit dem Relaunch für die Website ihrer Marke „P. Jentschura“.

Das Sortiment umfasst basische Körperpflegeprodukte, basenüberschüssige Lebensmittel und regenerative Sauerstoffanwendungen.

Die Jentschura International GmbH ist ein international agierendes Unternehmen mit Dependancen in der Schweiz und in Mexiko.

Entwicklung eines Konzepts für den Relaunch

Zum Start wurde ein über 40-seitiges Konzept erstellt, in welchem die Zielgruppe der Seite und die strategischen Ziele verankert sind.

Wir entwickelten eine neue optimierte Seitenstruktur und ein neues Navigationskonzept. Für jeden Seitentyp definierten wir, welche Inhalte und Felder vorkommen und welche besonderen Funktionen zum Einsatz kommen.

Das neue CMS ist aktuell, zukunftssicher und leicht zu aktualisieren. Es wurden viele spezielle Funktionen und eigene Felder im CMS eingebaut. Aus diesem Grund kommt unser Lieblings-CMS, welches auch von unseren Kunden geliebt wird, ProcessWire zum Einsatz.

Lesenswert dazu ist unser Artikel „Warum ProcessWire die beste Wahl für Ihre Website ist (nicht immer, aber in den meisten Fällen)“.

Die finale Website wird in mehreren Sprachen präsentiert, um den internationalen Kundenstamm zu bedienen und kann bei Bedarf um weitere Sprachen erweitert werden.

Entwicklung einer responsiven Darstellung

Bei der neu gelaunchten Website wurde eine responsive Darstellung ermöglicht, welche auf allen Geräten optimal dargestellt wird. Zusätzlich kommen responsive Bilder zum Einsatz, die für die jeweilige Auflösung berechnet werden, und nur geladen werden, wenn sie im sichtbaren Bereich der Website sind. Somit wird wertvolle Ladezeit gespart und die Besucher sehen die Inhalte schneller.

Für verschiedene Seiten wie zum Beispiel die Produktübersicht wurden mehrere Breakpoints gesetzt, so dass bei unterschiedlichen Auflösungen auch unterschiedliche Darstellungsweisen erscheinen.

Das Layout der Seite wurde größtenteils im Haus Jentschura erstellt und in enger Abstimmung mit uns optimiert. Die Gestaltung für kleine Auflösungen (Mobilgeräte) wurde größtenteils durch uns vorgenommen.

Besonderheiten

  • Inhaltlich wurden über 180 Seiten angelegt und in das CMS übernommen.
  • Auf den Hauptproduktseiten wurden anspruchsvolle Headervideos für das jeweilige Produkt eingesetzt.
  • Jede Seite kann ein eigenes Headerbild haben, welches vom Standardbild abweicht.
  • Das Backend ist hochflexibel und beinhaltet viele benutzerdefinierte Felder. Die Inhalte der Website werden über das CMS ProcessWire gepflegt.

Einfache Seitengestaltung im CMS durch modulare Inhaltsblöcke (Sektionen)

Die Autoren bei P. Jentschura können auf diversen Seiten selbst beliebig viele Sektionen anlegen und dabei kreativ sein wie die Sektionen dargestellt werden.
Sie haben dabei die Wahlmöglichkeit einer Sektion folgende Attribute zu geben.

  • Bild links, Text rechts
  • Bild rechts, Text links
  • Text zentriert mit oder ohne Bild
  • Bildergalerie
  • Art der Überschrift

Kundenbindung durch Interaktionen erhöht

Für eine bessere Kundenbindung wurden Methoden gewählt um die Interaktion der Kunden mit der Website zu erhöhen.

Aktivitätsstream

Auf der Startseite gibt es einen Aktivitätsstream – er zeigt in chronologischer Reihenfolge, was auf der Website passiert ist, zum Beispiel wenn neue News, Rezepte, Produkte oder Termine hinzugefügt worden sind.

Voting für Rezepte

Um die Userinteraktion zu erhöhen und um einen Indikator zu bekommen, welche Rezepte bei der Community besonders beliebt sind, haben wir ein Voting für die Rezeptideen integriert.

Einsatz einer besseren Navigation als dem Hamburger Menü

Wir entwickelten eine spezielle Navigation (Priority+ Navigation), welche immer die maximal anzeigbaren Menüpunkte darstellt. Menüpunkte die nicht mehr in die Navigation passen, werden automatisch in ein Untermenü verschoben. Diese Menüart bietet die folgenden Vorteile:

  • Die wichtigsten Navigationspunkte sind so lange wie möglich sichtbar
  • Setzt eine durchdachte Navigationsstruktur voraus, da die Priorität der Menüpunkte von links nach rechts abnimmt
     

Auf ein Hamburger-Menü haben wir aus gutem Grund verzichtet. Warum, erfahren Sie in vielen Artikeln im Internet zum Beispiel The hamburger menu doesn’t work.

Vollbild Live-Suche

Die Vollbild Live-Suche legt den Fokus komplett auf die Suchmaske und die Suchergebnisse, indem der Rest der Seite überlagert wird. Somit gelangen Seitenbesucher schnell zu den gewünschten Informationen.

Formulare die automatisiert Aktionen ausführen

Wir integrierten diverse Formulare welche E-Mails verschicken oder Daten in eine Datenbank speichern, welche automatisiert weiterverarbeitet werden. Somit werden viel Zeit und Kosten für die manuelle Bearbeitung eingespart.

Einsatz von Filter- und Sortierfunktionen

Produkte, News, Downloads, Rezepte und Themenwelten können gefiltert und/oder sortiert werden ohne die Seite neu zu laden. So ist eine schnelle Navigation und ein schnelles finden der gewünschten Informationen möglich.

Cachen der Inhalte

Damit Bilder, CSS und JavaScripts nicht immer wieder neu abgerufen werden müssen bei erneutem Aufruf der Website, wurde für diese Dateiarten eine lange Cache-Zeit eingebaut. 
Wenn sich nun eine dieser Dateien ändert, wird durch ein spezielles Skript die neue Version dieser Datei in die Website integriert und automatisch neu geladen, so dass der Besucher der Website auch die neue Version zu sehen bekommt.

Eventuell ist Ihnen das Problem bekannt, dass man zum Beispiel ein Bild geändert hat und ein Besucher der Website sieht immer noch das alte Bild, was natürlich nicht gewollt ist. Dies wird durch das Cache busting script verhindert.

Weiterleitungen mit Kurz-URLs

Es wurde ein Modul integriert um diverse URL-Aliase für verschiedene Seiten einzurichten. Dadurch werden zum Beispiel Kurz-URLs wie https://www.p-jentschura.com/anzeige1 ermöglicht durch welche die Effektivität einer Anzeige gemessen werden kann.

Automatische Verlinkung von Produktnamen

Produktnamen werden automatisch vom CMS verlinkt und brauchen somit nicht von Hand verlinkt werden. Dies spart eine Menge Zeit und Arbeit.

Entwicklung eigener angepasster Module

Es kommen auf der Website diverse eigene Module zum Einsatz, die zum Beispiel Ersetzungen im Text vornehmen (sogenannte Textformatter).
Eines sorgt zum Beispiel dafür, dass der Markenname P. Jentschura nicht getrennt wird.

Anstatt dafür auf das Modul Hanna Code zu setzen, wurde auch für einfache Ersetzungen eines Platzhalters innerhalb eines Textfeldes ein eigenes Modul für diese Aufgabe erstellt. Der Grund ist, dass diese eigenen Module auch per Git versioniert werden können.

Unterschiedliche Bildausschnitte für Übersichtsseiten und Detailseiten

Eine Anforderung war es, dass für die News-Übersichtsseite ein eigener Bildausschnitt gewählt werden kann, da manchmal der automatisch generierte Ausschnitt den Inhalt des Bildes nicht gut wiedergibt. Zum Beispiel wurden bei manchen Bildern die Gesichter ungünstig abgeschnitten.
Hierzu haben wir eine Möglichkeit geschaffen, das Jentschura selbst einen Bildausschnitt für diese Sonderfälle anlegen kann. Dieses Feature wurde später in der ProcessWire Core eingebaut, sodass wir auf die native Art von ProcessWire umsteigen konnten.

Tools

Folgende Tools wurden zur Umsetzung eingesetzt

  • ProcessWire 3.0.90
  • Foundation for sites 6 framework
  • Eigenes Formluar-Script für automatisierte Antworten
  • SCSS + eigene Mixins
  • Webpack
  • Gulp
  • GIT
  • Eigenes Upload Script via rsync, das nur geänderte Dateien hochlädt
     

Unsere Leistungen für dieses Projekt:

  • Konzepterstellung
  • UX Strategie
  • CMS Anpassung
  • ProcessWire
  • Individualsoftware