KEUNE HAIRCOSMETICS
Replatforming & Redesign
Replatforming the Keune B2B webshop was all about moving to a fully online ordering system removing unnecessary human interactions. By creating a platform for both salon users as well as distributors, it facilitates all user types. The design work included: UX research, Redesign and setting up a Design System.
User research in the form of interviews was conducted to identify the end-users and their needs within a B2B webshop. This resulted in an extensive list of recommendations for the the design track & strategy of the webshop, looking at its key features. In addition, customer journeys were made for both the hair salons and the distributors.
UX Research
The design system is based on the Atomic Design Methodology and automatically uniforms all elements, components and templates (colors, icons, typography, spacing, visual language, illustrations, etc.) during updates, adjustments and expansions of the website. Next to that, it was key to align with development due to the (limitations of the) used CMS software.
Design System
For the B2B platform there are three different contexts which are also illustrated in the Product Detail Page: an open environment, logged-in as a salon and logged-in as a distibutor. While the open environment does not show a lot of details, the two logged-in environments show different features that are tailored to the two user types. For instance, distributors can only do bulk orders instead of ordering per product.
Product Detail Page
Specifically for distributors the total weight of the order was added to the shopping cart, next to the average weight per shipping container. This is to provide a simple tool to ship their order as efficient as possible and to reduce the shipping costs to the minimum.
Shopping Cart
The Figma design files served as a “single source of truth” regarding documentation for development and content managers. This includes how to use the designs, as well ass the CSS code through “dev mode”.
