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

Statt auf Standard-Shopsysteme setzen wir bei WOLFF & MÜLLER Quarzsande auf Composable Commerce, um eine personalisierte Einkaufserfahrung zu bieten und die Plattform schnell an individuelle Anforderungen anzupassen. Mit UX- und UI-Design sowie technischer Entwicklung aus einer Hand garantieren wir eine nahtlose Integration und Skalierbarkeit der Plattform, was zu einem effektiven E-Commerce-Erlebnis führt.

Zu Beginn des Projekts starteten wir mit mehreren Workshops, um uns intensiv mit dem Kunden auszutauschen und die spezifischen Anforderungen und Bedürfnisse zu verstehen. Dabei wurden mögliche Herausforderungen und Chancen diskutiert, für konkrete Probleme präsentierten wir direkt Lösungsmöglichkeiten. Fokus dabei war eine weitestmögliche Automatisierung im Hintergrund des Shops, um die Bedienung zu vereinfachen und den Zeitaufwand für das Shop-Handling zu reduzieren.

Composable Commerce für WOLFF & MÜLLER Quarzsande

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

Die Lösung lag schnell auf der Hand: Composable Commerce. Mit einer intuitiven User Experience, einem ansprechenden Shop-Design und dem am besten passenden Tech-Stack konnten wir WOLFF & MÜLLER Quarzsande eine optimale Lösung präsentieren. Das Ergebnis? Ein Sand-Shop, der vollends überzeugt und sich visuell komplett von der Konkurrenz abhebt.

Prozess

Gemeinsam ans Ziel

Eine sehr enge Zusammenarbeit mit unserem Kunden WOLFF & MÜLLER Quarzsande ermöglichte es, eine maßgeschneiderte Lösung zu entwickeln, die den Anforderungen des Unternehmens entspricht und gleichzeitig eine nahtlose Einkaufserfahrung für die Kunden bietet.

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

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

Auf Basis des ersten Workshops definierten wir Requirements, die der Shop zu erfüllen hat.

03 Review Requirements

03 Review Requirements

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

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

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

Entwicklung des Looks: grundlegender Stil, Typografie, Farben, ...

07: Wireframing

07: Wireframing

UX-Design: Darstellung der Struktur und Funktionen in einem Clickdummy.

08: Ausgestaltung UI-Design

08: Ausgestaltung UI-Design

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


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

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
Produktdetail - faktengetrieben und strukturiert

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
Anwendungsdetail - emotional und locker

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

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

Produktdetail vorher:

Keine Produktwahl, da jede Körnung und Verpackungseinheit eine eigene Seite hatte; textlastig; keine schnelle Übersicht

Gekauft!

Intuitiver Check-out für registriere User und Gäste.

Der übersichtliche Check-out bietet eine Vielzahl an Versandmöglichkeiten. Dank eines Gast-Check-outs kann man Produkte auch ohne Registrierung bestellen.

Warenkorb: Ansicht aller Produkte im Warenkorb mit Editiermöglichkeiten, Preis und Zahlungsmöglichkeiten, Angebot Support-Chat

Check-out: Adressauswahl & neue Adresse, vielfältige Versandoptionen, Telefonnummer für Spedition, Abstellwunsch, Gutscheincode

Anmeldescreen für nicht-eingeloggte Nutzer: Einfacher passwordless Login via magic link, als Alternative traditionelle Anmeldung mit Passwort, Angebot Gast-Check-out, Direktlink Registrierung

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

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?

Dann schauen Sie vorbei!

Sie möchten noch mehr sehen?
Weitere Referenzen
Alle Disziplinen
Website / Digital
Schubert Karriere-Website

Schubert Karriere-Website

Gemeinsam haben wir eine Plattform entwickelt und gestaltet, die nicht nur informative Karriereinformationen vermittelt, sondern auch die Leidenschaft und den Innovationsgeist widerspiegelt, die den Verpackungsmaschinenhersteller antreiben.

Website / Digital
Das Foto zeigt ein Mitarbeiter von dem BIM-Cluster sitzend an einem Schreibtisch zu dem Thema Webdesign barrierefrei.

BIM-Cluster Webdesign barrierefrei

Für das BIM-Cluster Bayerns wurde eine moderne, barrierefreie und übersichtliche Microsite geschaffen, die die Sichtbarkeit des BIM-Clusters nach außen wirksam steigert.