Zurück zu den Projekten
  • UI/UX

    HABA – B2B & B2C E-Commerce Relaunch

    2022 wurde die Medienwerft GmbH von der HABA Familygroup beauftragt, sie bei den finalen Schritten der Migration ihrer E-Commerce-Plattformen HABA Pro (B2B), HABA Play (B2C) und JAKO-O (B2C) auf SAP E-Commerce zu unterstützen. Als Teil des Design-Teams war es unsere Aufgabe, alle noch fehlenden Komponenten zu gestalten und dem Entwicklungsteam klar dokumentiert bereitzustellen.

    Dazu bauten wir in Figma drei separate Atomic Design Systeme auf. Im ersten Schritt definierten wir sämtliche Atome und Moleküle, welche die Basis für alle weiteren Komponenten (Organismen) bildeten. Anschließend entwickelten wir daraus die jeweils noch fehlenden Komponenten.

  • Laptop mit HABA Familygroup Logo und den Marken HABA Pro, HABA und JAKO-O als Symbolbild für den B2B & B2C E-Commerce Relaunch
  • Zwei Laptops mit Startseiten der Marken HABA und JAKO-O als Visualisierung eines plattformübergreifenden B2B & B2C E-Commerce Systems
  • Responsive Ansicht des HABA Pro B2B Checkout Prozesses auf Smartphone und Tablet mit Fokus auf Lieferadressverwaltung
  • Mobile Produktdetailseite der Marke JAKO-O mit Variantenwahl und Warenkorbaktion im B2C E-Commerce
  • HABA Pro B2B Kundenkonto mit Bestellübersicht auf Desktop und Laptop als Teil einer skalierbaren E-Commerce Plattform
  • Produktdetailseite von HABA Pro auf Tablet mit Warenkorb Overlay und Cross-Selling Elementen im B2B E-Commerce
  • Aufgrund unserer schnellen und qualitativen Arbeit konnten die drei E-Commerce-Plattformen zum geplanten Zeitpunkt live gehen. Die Medienwerft GmbH wurde anschließend damit beauftragt, den Kunden fortlaufend zu betreuen und die verschiedenen E-Commerce-Plattformen sowohl technisch als auch hinsichtlich der UX und UI kontinuierlich zu optimieren.

    Hierfür bauten wir auf den bereits entwickelten Grundelementen der Atomic Design Systeme auf und erweiterten diese Schritt für Schritt um zusätzliche Komponenten. Mithilfe der Analyse von Nutzerdaten und User-Journeys über Contentsquare optimierten wir kontinuierlich bestehende Komponenten, einzelne Seiten sowie die unterschiedlichen Checkout-Prozesse. Dadurch gelang es uns, die User Experience nachhaltig zu verbessern und Optimierungspotenziale in den Checkout-Prozessen umzusetzen.

Was wir erreicht haben

Durch die Kombination aus strategischem UI/UX-Design, einem in Figma aufgebauten Atomic Design System und der gezielten Auswertung echter Nutzerdaten sowie der Analyse von User-Journeys mit Contentsquare gelang es uns, die E-Commerce-Plattformen der HABA Familygroup effizient zu optimieren. Die daraus resultierenden Weiterentwicklungen legten die Grundlage für eine langfristige Zusammenarbeit.

Weitere Projekte

{{ project.category }}

{{ project.title.de }}

Zum Projekt
© {{ copyrightDate }} Kai Köhler