Back to Projects
  • UI/UX

    HABA – B2B & B2C E-Commerce Relaunch

    In 2022, the HABA Familygroup commissioned Medienwerft GmbH to support the final stages of migrating their e-commerce platforms HABA Pro (B2B), HABA Play (B2C), and JAKO-O (B2C) to SAP E-Commerce. As part of the design team, our task was to design all remaining components and provide them to the development team with clear documentation.

    To achieve this, we built three separate Atomic Design systems in Figma. In the first step, we defined all atoms and molecules, which formed the basis for all further components (organisms). Subsequently, we developed the missing components based on these foundations.

  • Laptop mit HABA Familygroup Logo und den Marken HABA Pro, HABA und JAKO-O als Symbolbild für den B2B & B2C E-Commerce Relaunch
  • Two laptops displaying the HABA and JAKO-O homepages representing a cross-platform B2B & B2C e-commerce system
  • Responsive view of the HABA Pro B2B checkout flow on smartphone and tablet with a focus on delivery address management
  • Mobile product detail page of the JAKO-O brand with variant selection and add-to-cart interaction in a B2C e-commerce context
  • HABA Pro B2B customer account with order overview shown on desktop and laptop as part of a scalable e-commerce platform
  • HABA Pro product detail page on tablet with cart overlay and cross-selling elements in a B2B e-commerce environment
  • Due to our efficient and high-quality work, the three e-commerce platforms were able to go live as scheduled. Medienwerft GmbH was subsequently commissioned to provide ongoing support to the client and to continuously optimize the various e-commerce platforms, both technically and in terms of UX and UI.

    For this purpose, we built upon the existing elements of the Atomic Design systems and expanded them step-by-step with additional components. By analyzing user data and user journeys via Contentsquare, we continuously optimized existing components, individual pages, and the various checkout processes. This allowed us to sustainably improve the user experience and implement identified optimization opportunities within the checkout flows.

What we achieved

Through the combination of strategic UI/UX design, a Figma-based Atomic Design system, and the targeted evaluation of real user data alongside the analysis of user journeys with Contentsquare, we succeeded in efficiently optimizing the HABA Familygroup's e-commerce platforms. The resulting iterations supported further improvements and laid the foundation for a long-term collaboration.

Other Projects

{{ project.category }}

{{ project.title.en }}

View Project
© {{ copyrightDate }} Kai Köhler