Composable Commerce für WOLFF & MÜLLER Quarzsande
Kunde
WOLFF & MÜLLER Quarzsande GmbH
Branche
Baustoffindustrie
Technologie
Remix.run, Firebase, Crystallize, Algolia, Google Cloud Platform, Firebase, Brevo, Plentymarkets
Sprachen
Deutsch
Zeitbedarf
6 Monate
Seitenanzahl
650 Seiten, rund 100 Produkte
Frequenz
21.000 Seitenaufrufe/Monat
![Composable Commerce für WOLFF & MÜLLER Quarzsande](https://images.prismic.io/ruess-website/ZikRQPPdc1huKvN4_MacBook-Mockup-V2.png?auto=format%2Ccompress&rect=0%2C249%2C1620%2C810&w=1824&h=912)
Der Kunde
Die WOLFF & MÜLLER Quarzsande GmbH zählt zu den bedeutendsten Herstellern von mineralischen Rohstoffen in Deutschland. Mit den Werken Haida und Quedlinburg ist das Unternehmen zudem einer der größten Produzenten von hochwertigem Quarzsand für Wasseraufbereitung, Gießereien, Bauchemie, Lokbremssand und Quarzsand für Sport- und Freizeitanlagen.
Die Aufgabe
Das Ziel war eine technologisch performante Lösung mit zwei Dimensionen zu entwickeln: Im Backoffice sollten die Quarzsandshop-Mitarbeitenden möglichst automatisiert arbeiten können. Dabei sollte der Webshop UX-seitig und damit aus der Kundenperspektive überzeugen und sich visuell von der Konkurrenz abheben.
Die Leistungen
- Beratung
- Workshops
- Data Flows & Content Mapping
- Strukturelles Konzept
- Lookentwicklung
- UX- und UI-Design
- Illustrationen
- Technische Entwicklung
Best choice: Composable Commerce für Quarzsand-Shop
Prozess
Gemeinsam ans Ziel
Mit Beratung, Workshops, UX- und UI-Design und technischer Entwicklung haben wir einen modernen und erfolgreichen Quarzsand-Shop aufgebaut, der dem Unternehmen dabei hilft, seine Produkte effektiver zu verkaufen und zu verwalten. Unsere enge Zusammenarbeit hat dazu beigetragen, dass wir ohne Korrekturphasen offen und authentisch gemeinsam das optimale Ergebnis erreichen konnten. Aktuell ist auch eine Anbindung des E-Shops an weitere Online-Marktplätze wie Kaufland oder ebay erfolgt.
01 Gemeinsame Workshops
![01 Gemeinsame Workshops](https://images.prismic.io/ruess-website/66a022fc-8d74-4e9e-813d-fda9833694eb_wmq-workshop-prozess-ruess-group.webp?auto=compress,format&rect=0,0,2016,1342&w=760&h=506)
In einem ersten gemeinsamen Workshop schauten wir uns die Funktionen des aktuellen Shops an. Was kann davon automatisiert werden, welche Potentiale sehen wir und was können wir uns zukünftig vorstellen?
02 Definition Requirements
![02 Definition Requirements](https://images.prismic.io/ruess-website/df1372b4-95f4-4306-a3d4-73534b097971_wmq-requirements-prozess-ruess-group.webp?auto=compress,format&rect=0,0,2016,1342&w=760&h=506)
Auf Basis des ersten Workshops definierten wir Requirements, die der Shop zu erfüllen hat.
03 Review Requirements
![03 Review Requirements](https://images.prismic.io/ruess-website/60377fea-2cbd-46b6-ad43-63234a612c97_wmq-review-requirements-prozess-ruess-group.webp?auto=compress,format&rect=0,0,2016,1342&w=760&h=506)
Da die Vertragsfindung etwas mehr Zeit in Anspruch genommen hat, fanden wir uns wieder zusammen und reviewten die Requirements. Dabei definierten wir sie gleich tiefergehender.
04 User Flows
![04 User Flows](https://images.prismic.io/ruess-website/b6c25da2-8a29-4f05-a54a-f3f48f7c68b1_wmq-user-flows-prozess-ruess-group.webp?auto=compress,format&rect=0,0,2016,1342&w=760&h=506)
Die User Flows für die verschiedenen Zielgruppen wurden definiert (B2B Nutzer, B2C Nutzer, uneingeloggte Nutzer, Gastnutzer).
05: Data Flow & Content Mapping
![05: Data Flow & Content Mapping](https://images.prismic.io/ruess-website/cb6588f6-f42f-4128-b8b2-3bbb9efc71d3_wmq-data-flow-prozess-ruess-group.webp?auto=compress,format&rect=0,0,2016,1342&w=760&h=506)
Ein Shop-Relaunch ist eine gute Gelegenheit, um das Erscheinungsbild und die Funktionalität Ihres Online-Shops zu verbessern.
Data Flow bezieht sich auf den Weg, den Ihre Daten während des Relaunchs nehmen. Dies umfasst die Migration von Produktinformationen, Kundenkonten, Bestellhistorien und anderen relevanten Daten.
Content Mapping bezieht sich auf die Zuordnung von Inhalten zu den entsprechenden Bereichen in Ihrem neuen Shop.
06: Moodboard / Styleentwicklung
![06: Moodboard / Styleentwicklung](https://images.prismic.io/ruess-website/ba5e15be-8eb6-4aad-bb7e-2b4d7d9b3b9e_wmq-moodboard-prozess-ruess-group.webp?auto=compress,format&rect=0,0,2016,1342&w=760&h=506)
Entwicklung des Looks: grundlegender Stil, Typografie, Farben, ...
07: Wireframing
![07: Wireframing](https://images.prismic.io/ruess-website/5869bf4f-227b-4d0a-b176-e6ea0532ed12_wmq-wireframes-prozess-ruess-group.webp?auto=compress,format&rect=0,0,2016,1342&w=760&h=506)
UX-Design: Darstellung der Struktur und Funktionen in einem Clickdummy.
08: Ausgestaltung UI-Design
![08: Ausgestaltung UI-Design](https://images.prismic.io/ruess-website/65df3fbe9c42d04f7d96911a_W%26Q-Pool%26Teich-Still.png?auto=format%2Ccompress&rect=112%2C0%2C1622%2C1080&w=760&h=506)
Finale Ausgestaltung des User Interface Designs für desktop und mobile.
Produktübersicht
Schnell ans Ziel
Die Produktübersicht ist darauf optimiert, dass Nutzer einfach und intuitiv die gewünschten Informationen finden.
Die Produkte sind nach 8 Anwendungen geclustert und einfach filterbar. Die Produktkacheln geben wichtige Hinweise zu verfügbaren Verpackungsgrößen und Körnungen.
![Produktübersicht heute: Produkte auf einer Seite nach Anwendungen geclustert; Filter- und Sortierungsoptionen; Produktkacheln mit Illustration, Preis/Kilo und Verpackungseinheiten](https://images.prismic.io/ruess-website/65df42ee9c42d04f7d969181_W%26Q-SpielSportFreizeit-Still.png?auto=format%2Ccompress&rect=0%2C0%2C1920%2C1079&w=1820&h=1023)
Produktübersicht heute:
Produkte auf einer Seite nach Anwendungen geclustert; Filter- und Sortierungsoptionen; Produktkacheln mit Illustration, Preis/Kilo und Verpackungseinheiten
![Produktübersicht vorher: Keine singuläre Übersicht, Produkte über mehrere Seiten verteilt; keine Filtermöglichkeiten; Produktbilder nicht aussagekräftig](https://images.prismic.io/ruess-website/65bcb179615e73009ec43904_Ruess_Group_WMQ_08_1820x1020px.jpg?auto=format%2Ccompress&rect=0%2C0%2C1815%2C1020&w=1820&h=1023)
Produktübersicht vorher:
Keine singuläre Übersicht, Produkte über mehrere Seiten verteilt; keine Filtermöglichkeiten; Produktbilder nicht aussagekräftig
Produktdetail - faktengetrieben und strukturiert
![Produktdetail - faktengetrieben und strukturiert](https://images.prismic.io/ruess-website/ZmAbppm069VX1d6s_MacBook-Sofa_be.png?auto=format%2Ccompress&rect=0%2C183%2C5000%2C3333&w=1824&h=1216)
![Produktdetail - faktengetrieben und strukturiert](https://images.prismic.io/ruess-website/ZmAbppm069VX1d6s_MacBook-Sofa_be.png?auto=format%2Ccompress&rect=0%2C183%2C5000%2C3333&w=1824&h=1216)
Der Fokus liegt hier auf der verständlichen Darstellung von Produktdaten und einer einfachen Auswahl der geeigneten Produktvariante, unterstützt von einem geordneten Layout und einer einfachen Lesbarkeit.
Anwendungsdetail - emotional und locker
![Anwendungsdetail - emotional und locker](https://images.prismic.io/ruess-website/65df40d79c42d04f7d96915c_SandlandshaftMitHandy-V4.png?auto=format%2Ccompress&rect=39%2C0%2C4850%2C7275&w=760&h=1140)
![Anwendungsdetail - emotional und locker](https://images.prismic.io/ruess-website/65df40889c42d04f7d96912b_SandlandshaftMitHandy-Breit_V4.png?auto=format%2Ccompress&rect=0%2C278%2C10079%2C6719&w=1824&h=1216)
Der Fokus liegt im Anwendungsbereich auf der emotionalen Kommunikation von interessanten Fakten zur jeweiligen Anwendung. Hier nutzen wir ein freieres, lockeres Layout und setzen vermehrt die WOLFF & MÜLLER Schrift ein. In den Anwendungen findet der User Links zu detaillierteren Blogposts und natürlich zu den Produkten für diese Anwendung.
Produktdetail
Informativ und einfach konfigurierbar
Die Produktdetailseite zeigt durch das klare Layout alle wesentlichen Details auf einen Blick.
Der Switch zwischen einzelnen Produktvarianten ist nun einfach möglich, sodass der User einfach an seine gewünschte Produktkonfiguration kommt. Für ausgewählte Produkte hilft ein Mengenrechner bei der Mengendefinition.
![Produktdetail heute: Top-Benefits am Anfang; einfache Produktwahl inklusive unterstützendem Mengenrechner; prägnanter Warenkorb-hinzufügen-Button](https://images.prismic.io/ruess-website/ZmAby5m069VX1d6u_W%26Q_Rasensand_be.png?auto=format%2Ccompress&rect=0%2C1%2C3840%2C2158&w=1820&h=1023)
Produktdetail heute:
Top-Benefits am Anfang; einfache Produktwahl inklusive unterstützendem Mengenrechner; prägnanter Warenkorb-hinzufügen-Button
![Produktdetail vorher: Keine Produktwahl, da jede Körnung und Verpackungseinheit eine eigene Seite hatte; textlastig; keine schnelle Übersicht](https://images.prismic.io/ruess-website/b878661c-9446-470b-90c5-224585664fa2_quarzsand-shop-produktdetail-vorher-ruess-group.webp?auto=compress,format&rect=0,134,2560,1439&w=1820&h=1023)
Produktdetail vorher:
Keine Produktwahl, da jede Körnung und Verpackungseinheit eine eigene Seite hatte; textlastig; keine schnelle Übersicht
Gekauft!
Der übersichtliche Check-out bietet eine Vielzahl an Versandmöglichkeiten. Dank eines Gast-Check-outs kann man Produkte auch ohne Registrierung bestellen.
![](https://images.prismic.io/ruess-website/ZmAcF5m069VX1d60_W%26Q_Warenkorb_be.png?auto=format%2Ccompress&rect=297%2C0%2C3244%2C2160&w=760&h=506)
Warenkorb: Ansicht aller Produkte im Warenkorb mit Editiermöglichkeiten, Preis und Zahlungsmöglichkeiten, Angebot Support-Chat
![](https://images.prismic.io/ruess-website/ZmAcipm069VX1d7B_W%26Q_VersanoptionKunde.png?auto=format%2Ccompress&rect=298%2C0%2C3244%2C2160&w=760&h=506)
Check-out: Adressauswahl & neue Adresse, vielfältige Versandoptionen, Telefonnummer für Spedition, Abstellwunsch, Gutscheincode
![](https://images.prismic.io/ruess-website/65df40249c42d04f7d969125_W%26Q_Kunde_Gast.png?auto=format%2Ccompress&rect=298%2C0%2C3244%2C2160&w=760&h=506)
Anmeldescreen für nicht-eingeloggte Nutzer: Einfacher passwordless Login via magic link, als Alternative traditionelle Anmeldung mit Passwort, Angebot Gast-Check-out, Direktlink Registrierung
![](https://images.prismic.io/ruess-website/ZmAcNJm069VX1d64_W%26Q_Versandoptionen_be.png?auto=format%2Ccompress&rect=298%2C0%2C3244%2C2160&w=760&h=506)
Gast-Check-out: E-Mail-Abfrage, persönliche Daten, vielfältige Versandoptionen, Telefonnummer für Spedition, Abstellwunsch, Gutscheincode
Technologie
Was ist Composable Commerce?
Composable Commerce bietet eine flexible und skalierbare Lösung, die Unternehmen in die Lage versetzt, ihre E-Commerce-Plattform an die individuellen Anforderungen anzupassen und eine nahtlose Einkaufserfahrung für die Kunden zu schaffen.
Die Integration von spezialisierten Services, zusätzlich zur unterliegenden standardisierten Technologie (Composable Architecture), ermöglicht es dem Kunden, schnell und einfach Produkte zu finden und zu kaufen. Gleichzeitig bietet Composable Commerce eine nahtlose Abwicklung des Einkaufsprozesses, indem alle notwendigen Funktionen wie Warenkorb, Zahlung und Versand in die Plattform integriert werden.
Für das Unternehmen bedeutet dies eine höhere Flexibilität bei der Anpassung der Plattform an individuelle Anforderungen und eine schnellere Markteinführung neuer Produkte. Die Verwendung von spezialisierten Services erhöht auch die Zuverlässigkeit und Skalierbarkeit der Plattform und trägt somit zur Effizienzsteigerung bei.
![Composable Commerce Tech-Stack für den WOLFF & MÜLLER Quarzsand-Shop](https://images.prismic.io/ruess-website/f9985af6-4738-4427-aad0-d07ee392b7f3_Tech-Stack-Wolff-Mueller-Quarzsand-Shop.png?auto=compress,format&rect=219,114,3444,1936&w=1820&h=1023)
Composable Commerce Tech-Stack für den WOLFF & MÜLLER Quarzsand-Shop
Sie möchten den Quarzsand-Shop live erleben?
![Sie möchten den Quarzsand-Shop live erleben?](https://images.prismic.io/ruess-website/65df44169c42d04f7d969198_MacBook-Mocup.png?auto=format%2Ccompress&rect=0%2C34%2C1620%2C1013&w=608&h=380)