CarCom electronics AG Shop & Schnittstellen

UX & Frontend

Im Zuge der Entwicklung des Brodit- und CarCom-Shops und der Schnittstellen haben wir das gesamte Frontend von Grund auf neu gestaltet. Im Gegensatz zur bisherigen Template Lösung bietet die neue Umsetzung volle gestalterische und technische Flexibilität und ermöglicht es uns, den Shop gezielt an die Anforderungen der CarCom electronics AG und deren Kunden anzupassen. Auf dieser Basis haben wir ein durchgängiges Design System entwickelt, das alle Bereiche des Shops abdeckt, von der Produktübersicht über die Filterung bis hin zum Checkout.

Damit sich das System auch über mehrere Marken hinweg einsetzen lässt, haben wir die Plattform so aufgebaut, dass UX Struktur für den Brodit- und CarCom-Shop identisch bleiben, während sich das Theming pro Shop individuell anpassen lässt. Farben, Branding Elemente und visuelle Details lassen sich so flexibel auf die jeweilige Marke ausrichten. Dieser Ansatz erlaubt es, künftig weitere Shops mit minimalem Aufwand auf derselben Basis zu realisieren, wobei jeder Shop sein eigenes visuelles Erscheinungsbild erhält.

Ein besonderer Fokus lag dabei auf der Performance. Da schnelle Ladezeiten einen direkten Einfluss auf Nutzererlebnis und Conversion haben, wurde das Interface bewusst schlank gehalten und jeder Schritt im Nutzerprozess kritisch hinterfragt. Das Ergebnis ist eine moderne Plattform, die sich schnell und intuitiv bedienen lässt.

Die Zusammenarbeit mit Neovo war von Anfang an sehr angenehm, unkompliziert und lösungsorientiert. Unsere Anforderungen wurden verstanden und gemeinsam in eine Lösung umgesetzt, die nicht nur unsere heutigen Bedürfnisse abdeckt, sondern uns auch für die weitere digitale Entwicklung viel Flexibilität bietet. Besonders schätzen wir den direkten Austausch, die pragmatische Herangehensweise und die partnerschaftliche Zusammenarbeit.

Backend Vendure

Für das Shop-Backend nutzen wir Vendure, ein Open Source Headless E-Commerce Framework. Ein entscheidender Vorteil von Vendure ist seine hohe Erweiterbarkeit. Da das Framework eine solide Basis für die grundlegenden Shop Funktionen bietet, konnten wir die individuellen Anforderungen der CarCom electronics AG darauf aufbauen. Dazu zählen Rabattlogiken wie Gutscheincodes sowie kundenspezifische Rabatte mit individuellen Konditionen für einzelne Kunden oder Kundengruppen. Weiter können Produkte, die auslaufen oder abverkauft werden, mit dem regulären und dem reduzierten Preis parallel ausgegeben werden, sodass eine transparente Abverkaufs-Preislogik im Shop abgebildet wird.

Für die elektronische Zahlungsabwicklung wurde der Shop an Saferpay angebunden. Dadurch kann im Shop sicher und mit den bekannten Zahlungsmethoden bezahlt werden.

Ein zentraler Baustein ist zudem die Anbindung an das Comatic ERP (Enterprise Resource Planning-System). Dies erlaubt es, Produkte sowie Kundendaten zwischen Shop und ERP zu synchronisieren. Bestellungen aus dem Shop werden automatisiert an Comatic übergeben, inklusive Rechnungserstellung im ERP, wodurch manuelle Erfassungen entfallen und der administrative Aufwand minimiert wird.
Darüber hinaus werden die Produktdaten beim Import in Vendure automatisiert mit Informationen aus verschiedenen externen APIs, wie der Brodit API, sowie weiteren Datenquellen, wie CSV-Dateien, angereichert. Dadurch stehen Produktinformationen automatisiert zur Verfügung, ohne dass diese manuell gepflegt werden müssen.

Dank der Mandantenfähigket von Vendure können mehrere Shops auf einer gemeinsamen Plattform betrieben und gepflegt werden. Diese wurde für die Umsetzung dieses Projektes konsequent eingesetzt, da sich die beiden Shops brodit-shop.ch sowie dem CarCom-Shop lediglich durch den Produktkatalog unterscheiden. Dadurch wird der Aufwand für die Pflege der Produkte sowie der Wartung und der Weiterentwicklung minimiert und neue Shops können bei Bedarf einfach integriert werden.

Durch die Anforderung, dass die Produkt-Daten an verschiedene Markplätze wie Digitec/Galaxus, Brack, MediaMarkt sowie TCS ausgespielt werden sollen, wurde Vendure so erweitert, das die grosse Menge an nötigen Zusatzinformationen der Produkte einfach und übersichtlich direkt in Vendure gepflegt werden können. Dafür werden den Produktmanager pro Produkt jeweils nur die Attribute angezeigt, welche für die dazugehörige Produktfamilie nötig sind. Damit übernimmt Vendure neben dem Shop auch die Rolle des PIMs (Product Information Management-System) wodurch zusätzliche Lizenz-Kosten eingespart werden konnten.

Als Datenbank kommt PostgreSQL zum Einsatz. Die schlanke und wartungsarme OpenSource-Lösung bietet für die Anforderungen des Projekts eine performante und zuverlässige Grundlage. Betrieben werden die Shops auf einem Jelastic-Cloud-Hosting bei Infomaniak, welches eine flexible und skalierbare Infrastruktur für die verschiedenen Umgebungen bereitstellt.

Damit haben wir ein Shop Backend geschaffen, das nebst den klassischen E-Commerce-Anforderungen durch seine Erweiterbarkeit auch künftige Anforderungen der CarCom electronics AG flexibel aufnehmen kann.