Individuelle Webentwicklung: Relaunch und Programmierung DB-Messeshop

Bereits 2013 entwickelten wir im Auftrag der Deutschen Bahn AG ein individuelles Shop-System für die konzerninterne Organisation von Schulungen, Veranstaltungen und Messen: den DB-Messeshop. Etliche Jahre hat das Shopsystem auf Basis des Joomla-CMS gute Dienste geleistet. In einem umfangreichen Relaunch wurde es 2020/2021 von unseren Webentwicklern und Webdesignern auf den neusten technischen Stand gebracht.

Hierbei haben wir auch das Webdesign des Shops an die aktuellen Corporate Design-Richtlinien der Deutschen Bahn AG angepasst, so dass sich dieser nun wieder optisch passend in das konzerninterne Marketingportal einfügt.

Anlass und Anforderungen für einen Relaunch des Shop-Systems

Die im Jahr 2013 entwickelte erste Version des Messeshops wurde den aktuellen Anforderungen an ein modernes Shop-System nicht mehr gerecht. Es fehlte z.B. eine optimierte Darstellung und Bedienbarkeit für mobile Endgeräte, wie sie heute durch den „Mobile First-Ansatz“ während der Konzeption der User Interfaces und durch eine anschließende Programmierung als „Responsive Webdesign“ erreicht wird.

Das Design des alten Messeshops orientierte sich an den damaligen Design-Vorgaben der Deutschen Bahn. Hierdurch passte es nicht mehr zum modernen Erscheinungsbild. Auch die Bedienbarkeit des Shops war aus heutiger Sicht nicht mehr ideal. Klickbare Elemente waren recht klein und wurden in ihrer Funktion nicht mehr eindeutig wahrgenommen.

Darüber hinaus gab es nur eine rudimentäre Möglichkeit für die Verwaltung des Artikelbestands. Die Anbindung des damaligen Systems an die Warenwirtschaft erfolgte ausschließlich über einen XML-Import. Das direkte Bearbeiten von Artikeln und Artikeldetails im Shop war in der ersten Version nicht vorgesehen.

Lösungsansatz:

Da im bisherigen Shop-System bereits alle Artikel eingepflegt waren, sollte das neue Shop-System mit den vorhandenen Daten umgehen bzw. den Datenbestand weiterverwenden können.

Das bisherige Shop-System wurde mit Joomla! entwickelt. Es lag daher nahe, auch den neuen Shop auf Basis dieses sehr gut erweiterbaren Content Management Systems aufzubauen.

Damit das finale Erscheinungsbild des Messeshops alle Anforderungen an das Corporate Design erfüllt, musste ein geeignetes Joomla-Template entwickelt und programmiert werden. Natürlich war die Darstellung des Shops auch für mobilen Geräten zu optimieren.

Individuelle Webentwicklung mit Joomla: Umsetzung DB-Messeshop

Zunächst haben wir im Rahmen eines Workshops gemeinsam mit den zuständigen Ansprechpartnern der Bahn alle Anforderungen und die gewünschten Details ermittelt. Hierbei wurden die folgenden Bereiche erarbeitet und so die Basis für die Umsetzung der Design- und Programmierarbeiten geschaffen:

• Erstellen eines Konzepts für Usability und Benutzerführung im neuen Shop-System
• Entwurf eines Layout-Konzepts auf Basis der bestehenden Anforderungen an das Bahn-CI
• Erstellen des technischen Konzepts für das Shop-System für die Bereiche:
  • Artikelpräsentation Startseite
  • Darstellung Artikellisten in den einzelnen Warengruppen
  • Darstellung Artikel-Details
  • Prozess für Merklisten-Verwaltung
  • Prozess für Bestellvorgang
  • Prozess für die Ermittlung der Logistikpartner
  • Suchfunktion
• Erstellen eines Integrationskonzepts für die Anbindung des Shop-Systems an das Single-Sign-On-System des Intranets via SAML

Anschließend begannen wir mit der Umsetzung parallel in zwei Bereichen: Ein Team war zuständig für die Erstellung von Layout-Entwürfen und Webdesign sowie für die Abstimmung mit der Marketing-Abteilung der Bahn, während ein zweites Team bereits mit der Programmierung der grundlegenden Funktionen startete.

Das Design-Team erstellte zunächst diverse Mockups und Wireframes für die einzelnen Shop-Elemente und Ansichten. Diese wurden zusammen mit möglichen Anordnungen und Arrangements in kurzen Abstimmungszyklen persönlich mit den Ansprechpartnern der Bahn im Detail abgestimmt, verfeinert und schließlich freigegeben. So entstanden schrittweise alle Produkt- und Funktionsseiten des Shop-Systems für die verschiedenen Ansichten auf Mobile und Desktop.

Im Anschluss daran wurden das Joomla!-Template auf Basis der abgestimmten Layouts in HTML, CSS und JavaScript programmiert. Hierbei kommen Technologien und Frameworks wie SCSS/SASS, Materialize CSS und Bootstrap zum Einsatz.

Das Backend-Team entwickelte und programmierte währenddessen die grundlegenden Funktionen für die Anwendung. Da der Shop auf Basis des Joomla!-CMS erstellt wurde, entwickelten wir die gesamte Geschäftslogik des Shop-Systems für Frontend und Backend auf Basis einer Joomla!-Komponente

Diese individuelle Erweiterung für Joomla! besteht aus zwei Teilen:

• Die Backend-Komponente ist das passende Instrumente für die Shop-Administratoren bei der Bahn, um alle Prozesse rund um Artikelverwaltung sowie Bestellungen & Verwaltung der Logistikpartner direkt in Shop-System zu steuern.
• Die Frontend-Komponente ist zuständig für das Ausspielen der Artikel, Warengruppen und Merklisten, die Durchführung des Bestellprozesses sowie die Präsentation aller anderen funktionalen Bereiche des Shops (Suche, Navigation, Single-Sign-On).

Beide Teile wurden von unseren PHP-Programmierern als einzelne reguläre Joomla!-Komponente zusammengefasst. Über den integrierten Update-Mechanismus des Joomla!-CMS lassen sich geplante zukünftige Updates nun bequem direkt im Backend des CMS einspielen, nachdem diese von formativ.net entwickelt und getestet wurden.

Testing und Rollout

Nach der Umsetzung aller Entwicklungsphasen wurde das Shop-System auf einem Test-Server installiert und intensiv getestet. Sowohl von unseren Webentwicklern als auch von den zuständigen Ansprechpartnern bei der Bahn wurden hierzu zuvor definierte Test-Pläne durchlaufen und die Ergebnisse in Form von Feedback-Tickets erfasst. Nach der Bearbeitung aller Korrekturen und Anpassungen wurde das System letztendlich auf dem Live-Server installiert und das alte Shop-System abgeschaltet.

Dieser Vorgang verlief nahezu „geräuschlos“: Bereits kurz vor dem Launch wurde der gesamte Artikelbestand auf dem Test-System auf den aktuellen Stand des Live-Systems gebracht. Somit konnte beim Relaunch innerhalb weniger Minuten das alte Shop-System durch den neuen Messeshop ersetzt werden.

Pflege, Wartung und Erweiterung

Wie jedes EDV- und Software-System benötigt auch der Messeshop regelmäßige Pflege, um zuverlässig und sicher betrieben zu werden. Im Rahmen eines Wartungsvertrages kümmert sich formativ.net langfristig um die notwendigen Arbeiten. So implementieren wir zukünftige Änderungen, Erweiterungen und neue Detail-Anforderungen in das Shop-System. Hierbei werden auch die regelmäßig erscheinenden Updates des Joomla!-CMS eingespielt sowie neue Ideen und Konzepte erarbeitet.

Übersichtliche Darstellung einzelner Produkte in Kategorien mit Vorschaubild und direkter Möglichkeit des Speicherns auf einer Merkliste:

Einfach zu bedienende Merklisten-Verwaltung für die Organisation von Bestellungen und Vorlagen für wiederkehrende Veranstaltungen:

Über das Anfrage-Formular können die gewünschten Produkte auf der Merkliste angefragt und bestellt werden:

Auch auf mobilen Geräten wie Smartphones und Tablets ist der Shop einfach zu bedienen. Die Darstellung und Aufteilung der einzelnen Elemente ist je nach Bildschirmgröße unterschiedlich aufgebaut (Responsive Webdesign):