Bruker
Die Bruker Corporation ist ein weltweit operierendes Unternehmen und bekannter Hersteller von wissenschaftlichen Instrumenten für die Molekular- und Materialforschung sowie für die industrielle und angewandte Analyse. Kunden sind vor allem Hochschulen, Forschungslabore und Industriezweige, wie die Chemie und Pharmazie.
Produktverständnis als Designstrategie
Zum Projektstart analysierten wir in Workshops die hochgradig spezialisierte Bruker-Produktstruktur – mit dem Ziel, ein tiefes Verständnis für die Anforderungen im B2B-Vertrieb wissenschaftlicher Präzisionsgeräte zu entwickeln. Der künftige Shopify Plus Store sollte eine breite Zubehörpalette für komplexe Technologien wie Diffraktometer, Massenspektrometer, Magnetresonanzsysteme und weitere Forschungsinstrumente abbilden – inhaltlich klar strukturiert, technisch präzise und visuell konsistent.
In Figma entstand ein komponentenbasiertes UI-System, das funktionale Commerce-Elemente mit einer klaren, wissenschaftsnahen Gestaltung vereint. Der responsive, interaktive Prototyp – ausgelegt für Mobile und Desktop – bildete die Grundlage für ein stringentes User Interface und fungierte als verbindlicher Rahmen für die weitere technische Umsetzung.
Von Vision zu Code
Mit der finalen Designfreigabe begann die Implementierung der Storefront im Headless Techstack. Die zuvor in Figma entwickelten Commerce-Komponenten wurden systematisch in eine modulare Frontend-Architektur überführt. Zum Einsatz kam Remix, ein modernes React-Framework, das serverseitiges Rendering, maximale Performance und flexible Routing-Strukturen vereint. Die gewählte Architektur erlaubt es, selbst komplexe Produktinformationen performant darzustellen und schafft die Grundlage für ein konsistentes, schnelles und skalierbares Nutzererlebnis – optimiert für den internationalen B2B-Einsatz.
Content-Governance mit System
Die inhaltliche Verwaltung des Stores basiert auf einem hybriden CMS-Ansatz. Für klassische Inhaltsseiten wie Support oder rechtliche Informationen wird der Shopify Customizer verwendet. Für die tiefere Anreicherung von Produktdetailseiten – insbesondere in einem wissenschaftlich-technischen Kontext – wurde Sanity CMS integriert.
Mittels Headless CMS werden strukturierte Produktinhalte gepflegt, die für den internationalen Vertrieb essenziell sind: von technischen Anforderungen über Lieferumfang und Ressourcen bis hin zu Kompatibilitätsinformationen zwischen einzelnen Zubehörartikeln und Bruker-Geräten. Auch Spezifikationen wie Technical Data oder verlinkte Dokumentationen werden über Sanity modular verwaltet.
Das strukturierte Datenmodell erlaubt eine effiziente Pflege hochkomplexer Produktinformationen durch das Bruker-Team selbst – unabhängig von Shopstruktur oder Frontendlogik. Gleichzeitig eröffnet es Skalierungsmöglichkeiten für mehrsprachige Inhalte, Filterlogiken und mögliche Integrationen in bestehende Backend-Systeme.
Weitere Requirements für die Umsetzung waren unter anderem:
- Price Visibility: Preise bestimmter Produkte sollen nur Kunden angezeigt werden, die sich zuvor mittels SSO verifiziert haben.
- Serial Number: Bei bestimmten Produkten soll die Eingabe einer Seriennummern vor dem Kauf eine Pflichtangabe sein.
- Purchase Option: unabhängig vom Produkt-Bestand soll es möglich sein, einzelne Varianten vom Verkauf auszuschließen.
Single-Sign On
Für den Kunden-Login zum Bruker Shopify Plus Shop wurde die Single Sign-On (SSO) Lösung auf Basis von Keycloak implementiert. Damit können sich Benutzer mit Ihren gewohnten Bruker-Zugangsdaten zentral authentifizieren, ohne separate Zugangsdaten für den Shop verwalten zu müssen.
Nach erfolgreicher Anmeldung wird der Benutzer nahtlos in den Shopify-Shop zurückgeführt. Bestehende Unternehmens-Identitäten (z. B. aus Active Directory oder einem anderen Identity Provider) können dabei problemlos angebunden werden.
Purchase & Quote Orders
Kunden von Bruker sind nicht nur Unternehmen, sondern auch Forschungseinrichtungen und Kliniken. Online-Bestellungen durchlaufen deshalb oft Freigabeprozesse, denen Angebote und Bestellungen zu Grunde liegen müssen.
Insgesamt ergaben sich dadurch folgende Anforderungen an den Store:
- Purchase Orders: der Käufer kann einen Purchase Order (Bestellauftrag), also ein offizielles, verbindliches Dokument anhängen und an den Verkäufer (Bruker) senden, um eine Bestellung aufzugeben. Es enthält Details wie Artikel, Mengen, Preise, Liefer- und Zahlungsbedingungen.
- Quote Orders: der Kunde soll aus dem Frontend heraus in Shopify einen Draft Orders erstellen können. Diese können später von Bruker in eine reguläre Bestellung umgewandelt werden und gelten als Angebot bzw. individuelle Preisvereinbarung.
- Zahlung auf Rechnung: der Kunde soll in der Lage sein, in unterschiedlichen Währungen auf Rechnung zu zahlen.
Im folgenden sehen wir den den Split-Checkout, welchen wir zur Lösung dem Shopify Checkout nachempfunden haben. Dieser läuft zusätzlich zum regulären Shopify Checkout unter einer separaten Domain.
Der Quote Cart ermöglicht dem Kunden das erstellen von Quote Orders.
“Für die Aufgabe unseren bestehenden Shop zu Shopify Plus zu migrieren, brauchten wir einen erfahrene Shopify Agentur und Technologiepartner, der Anforderungen und Prozesse eines internationalen Konzerns versteht und auch umsetzen kann. Wir sind sehr glücklich bei unserer Recherche auf die Moving Primates gestoßen zu sein.”
Senior Manager Digital User Experience, Bruker BioSpin GmbH
Suchlösung von Battery Included
Komplexe Produkte mit zahlreichen Produktattributen und Produkbeschreibungen wollen gefunden werden. Moving Primates hat deshalb für Bruker die professionelle Suchlösung von Battery Included implementiert und an die Kundenanforderungen angepasst.