React.js
/
Meteor.js
/
Shopify Liquid
/
HTML 5 + CSS3
Shopify-Shop & Headless B2B-Katalog für einen Kunstverlag
Moderne Technik trifft auf moderne Kunst
Projektübersicht
Im Jahr 2018 stand PGM ArtWorld vor der Herausforderung, ihren veralteten Online-Shop zu modernisieren. Als ihr Partner entwickelten wir ein völlig neues E-Commerce-Erlebnis, das sowohl B2C- als auch B2B-Kunden gerecht wird.
Kunde
PGM ArtWorlD
Dienstleistungen
Technische Beratung
/
UX-Design
/
UI-Design
/
Webentwicklung
/
App-Entwicklung
Projektdauer
5 Monate
Das Team
1 Tech Consultant
/
1 Projektleiter
/
2 Frontend
Entwickler
/
2 Backend
Entwickler
/
1 UX Designer
/
1 UI Designer
Herausforderungen & Ziele
PGM nutzte seit Jahren Shopware 4, ein System, dessen Support bald eingestellt werden sollte. Dieses System enthielt individuelle Features wie einen Bildkonfigurator und einen B2B-Modus für zahlreiche Partner. Die Herausforderung bestand darin, diese umfangreichen und wichtigen Funktionalitäten und Daten zu migrieren und sicherzustellen, dass die neue Website alle bisherigen Funktionen – und mehr – bietet.
Unser Ansatz
Wir entschieden uns für eine Multichannel-Strategie, um sowohl B2C- als auch B2B-Kunden optimal zu bedienen. Für die B2C-Kunden implementierten wir einen modernen, cloudbasierten Shopify Shop. Für die B2B-Geschäftspartner von PGM entwickelten wir daneben einen hochgradig individualisierten Online-Katalog. Diese Trennung gewährleistet, dass beide Kundengruppen ein maßgeschneidertes Benutzererlebnis erhalten, ohne den Verwaltungsaufwand für PGM zu erhöhen.
53.000+
Besucher im B2C-Shop nach dem Relaunch
8.000+
Produkte erfolgreich migriert
8
Mitarbeiter im Especial Team
0
Geplante Wartungsstunden im Monat
Roadmap - Der Weg zum Ziel
Um den Anforderungen von PGM gerecht zu werden, haben wir das Projekt in vier klar strukturierte Phasen unterteilt. So konnten wir strategisch vorgehen, flexibel auf neue Erkenntnisse reagieren und gemeinsam mit dem Kunden kontinuierlich fundierte Entscheidungen treffen. Der folgende Fahrplan zeigt, wie aus einer Idee ein leistungsfähiges, maßgeschneidertes E-Commerce-Setup wurde.
Technische Beratung
Konzept & UX-Design
UI-Design
Coding
→ Technische Beratung -
Während der ersten Beratung wurde schnell klar, dass die Anforderungen an einen Online-Shop für Endverbraucher und einen Online-Shop für die B2B-Partner von PGM sehr unterschiedlich sind. Klassische Shopsysteme der Zeit boten PGM aufgrund der einzigartigen Verkaufsstrategie und Anforderungen keine gute Lösung.
Deshalb entschieden wir, die Kundengruppen über verschiedene Kanäle anzusprechen. Endverbraucher würden einen modernen, cloudbasierten Shopify-Shop nutzen. B2B-Partner erhalten ihr eigenes, hochgradig individualisiertes Einkaufserlebnis als Teil eines Online-B2B-Katalogs auf Headless-Basis.
Diese Strategie stellt sicher, dass beide Kundengruppen das gewünschte Benutzererlebnis erhalten, ohne zusätzlichen Aufwand für PGM.
Dank der separaten Vertriebskanäle sind Endverbraucher nicht mehr durch Informationen verwirrt, die für Wiederverkäufer bestimmt sind, und haben ihr eigenes Online-Erlebnis, während die B2B-Partner einzigartige Funktionen wie kundenspezifische Wunschlisten und eine White-Label-Funktion für die Kundenpräsentation im Geschäft erhalten.
→ Konzept, UX- & UI-Design
01 Individueller Bildkonfigurator
PGM bietet hochwertige Drucke in verschiedenen Formaten und Materialien an. Wir modernisierten den Bildkonfigurator, um sowohl Endverbrauchern als auch B2B-Partnern eine intuitive Anpassung der Produkte zu ermöglichen.
02 Gut für PGM, gut für die Umwelt
PGM verschickte vor der Modernisierung jährlich einen Katalog mit ihrem aktuellen Sortiment an alle ihre Partner. Wir haben einen stilvollen Online-Kunstkatalog entworfen und entwickelt, der viele dieser Kataloge ersetzen konnte und damit Papierverbrauch und Kosten massiv reduziert. Da das Portal auch über einen White-Label-Modus verfügt, können die Wiederverkäufer es sogar zur direkten Kundenpräsentation in ihren Ladengeschäften verwenden.
03 B2B2C-Funktionen
PGM-Partner können den Online-Kunstkatalog nutzen, um Wunschlisten für ihre Kunden zu erstellen. Mit einem temporären Zugang können Kunden die Bildauswahl sogar mit nach Hause nehmen und von dort aus bestellen. Die Bestellungen werden automatisch über ihre Partner an PGM weitergeleitet.
04 Benutzerfreundlich für alle
Durch iterative Tests und Feedbackrunden stellten wir sicher, dass die Benutzeroberfläche performant ist und den Bedürfnissen beider Kundengruppen entspricht.
→ UI-Design - Wie
ein Besuch im Museum
Die Motivauswahl von PGM spricht für sich. Unsere Aufgabe war es, ein Designlayout zu schaffen, das es den Kunstwerken ermöglicht, so zu glänzen, wie sie sollten, während gleichzeitig erstklassige Shopping-Funktionen beibehalten werden und die Technik nicht von der Kunst ablenkt.
Wir ließen uns von Museen, Kunstbüchern und der Kunstgeschichte inspirieren – deshalb hielten wir das Layout einfach und elegant.
Auf den Produktseiten lassen wir die Bilder den Großteil des Viewports einnehmen, damit auch kleine Details klar erkannt werden können. Für die bekannten Künstler im Sortiment werden zudem Informationen über ihre Karrieren online bereitgestellt. Über die Anzeige von weiteren Bildern aus dem gleichen Kunstgenre laden wir die Besucher zum Stöbern ein.
Der B2B-Katalog bietet mehr Funktionalität, da die Wiederverkäufer mit dem PGM-Sortiment vertraut sind und weniger Navigationshilfen benötigen. Dafür gibt es detaillierte Preisinformationen und hilfreiche Features für den Verkauf, sowie einen Präsentationsmodus, der dafür sorgt, dass die beeindruckenden Kunstwerke im Vordergrund stehen.
→ Coding
Der B2C-Shop wurde als Shopify-Shop mit einem individuellen Theme und einem leistungsstarken Produktkonfigurator umgesetzt. Der B2B-Katalog hingegen ist ein Headless-Frontend. Dieses bezieht seine Inhalte von Shopify und reichert sie mit B2B-Daten aus anderen Systemen an.
Frontend
Backend
GraphQL
/
Node.js
/
MongoDB
/
Meteor.jsh
/
AWS
Ergebnis & Ausblick
Der Relaunch des PGM Online-Shops und die Einführung des B2B-Katalogs haben die Online-Präsenz von PGM erheblich verbessert. Die Trennung der Vertriebskanäle ermöglicht es, beide Kundengruppen gezielt anzusprechen und ein optimales Nutzererlebnis zu bieten. Die moderne technische Basis reduziert den Wartungsaufwand und bietet Flexibilität für zukünftige Erweiterungen.
53.000+
Besucher im B2C-Shop nach dem Relaunch
8.000+
Produkte erfolgreich migriert
8
Mitarbeiter im Especial Team
0
Geplante Wartungsstunden im Monat
Kundenreferenz -
Mit guten Ideen neu aufgestellt
„Especial hatte großartige Ideen, um unseren B2C- und B2B-E-Commerce neu zu organisieren. Der B2B-Katalog verschafft uns einen Vorteil gegenüber der Konkurrenz und zieht sogar neue Partnerschaften an!“
- Jörg Kühn-Thomas, Owner
+28%
Mehr Bestellungen von PGM B2B-Partnern
Neuer USP
PGM verfügt über die modernsten digitalen Vertriebswerkzeuge in der deutschen Kunstverlagswelt
