Dornbracht premium bathroom and kitchen design have won numerous international awards and are a driving force for the trends of an entire industry. I had the opportunity to bring their success story online.
As UX Consultant for Big Sun I created a UX concept for the worldwide relaunch of the global Dornbracht site for 24 markets on 3 sites. My aim was to create a UX concept that would match the company’s high level of quality and craftsmanship, be appropriate to the brand design by Meiré and Meiré and text design by Wortsport, and makes full use of SEO to drive sales on the platform.
The existing website way years old. It had limited CMS capabilities, navigation and usability were outdated and the site lacked dynamic or localised content. The biggest problem was that it did not effectively sell the product catalog to an international audience.
The Tech Setup of the new system
Going back to basic storytelling and branding techniques in full day client workshops was my starting point to create user journeys for the sensually motivated design enthusiast as well as the goal-oriented construction partner.
I prepared brainstorming techniques and structure charts to enable decisions on difficult content issues. One of the biggest challenges was to find the right balance between picture-driven product enjoyment and information-driven product explanation. A modular CMS system that allowed to construct pages with any combination of content modules didn’t help here. By leading the client back to simple storytelling, we could nail down page structures for all user types.
I created a high-level strategy in form of a customer journey sitemap and a template system that orchestrated content around a sales pitch.
Social media, SEO landing page strategies and constantly changing flyout menus have eliminated the tree-shaped web architecture with the homepage as main entrance. A customer journey now has multiple entry points into a site and trees are now streams.
I created a template strategy sitemap around the client’s customer journey stages “reach – leads – sales – fans” that functioned like a sales pitch. It provided a grid with templates for all stages of lead generation and placed customer journey entries at numerous points within the architecture. Then I placed all pages the client had requested inside that grid. It became apparent which customer journey section had too many or too little pages, and also if the content fit to the requirements of the particular sales pitch stage.
A high level SEO optimised sitemap constructed around the client’s user journey stages. Pages could be set in this grid to see if they worked in placement and content in the new journey structure.
A template system to catch all pre-existing page variations without clear role, function or purpose in the user journey. A unified and standardised choreography gave each page a place, a purpose and a structure.
The UX system
Hundreds of automated search result landingpages, thousands of product and accessory detail pages and more than 50 category and content fork pages required the underlying UX system to be seamlessly flexible.
A versatile module set for both marketing and sales purposes within a structural page template system achieved this goal.
Adobe Xd Wireframes of some of the marketing modules. I always set real headlines and images whenever possible so that we can all realistically see how the module would actually perform.
Xd Wireframes of some of the page templates. They assemble the modules in a choreographic sequence enabling the sales goal of that page.
Dornbracht products are found in 3 ways: as individual items (e.g. a faucet), as part of a line (a faucet and particular handles) and through a thematic feature (e.g. touchless controls). I created a responsive module called “product tile” in light and dark color mode that would fit for each case with slightly alternative content structure.
The product tile could be nested in menus, search results, headers and galleries. The consistent shape created an organised and modular look closely resembling the existing brand design while dramatically reducing responsive development cost and CMS page assembly effort.
After creating the concept with all modules and templates, I created all important functions, flows and UI standards and documented them in a “UX/UI Bible”
Dornbracht now owns a state-of-the art site that orchestrates content around user journey, sales pitches and SEO, offers modular search result galleries and landingpages, manages local communication in several languages, serves localized content and gives clients control over their data in a modern dashboard.
As the only UX designer on the team I wore several hats during the process. The “standard” UX hat for creating all modules, wireframes, flows, sitemaps and feature UX, that of a digital brand strategist, a consultant on Branding/SEO/CMS content optimisation, Information Architect, and production controller. But the biggest challenge was getting up at 4 every Tuesday to fly to Düsseldorf for the weekly 2-day workshops.
“Petra supported us in the area of User Experience with a large Website-Relaunch Project. Thanks to her fast perception and her targeted way to work, an encompassing UX concept was created in very short time. It exactly matched the User Journey. “
“Petra hat uns im Bereich User Experience bei einem großen Website-Relaunch Projekt unterstützt. Dank ihrer sehr schnellen Auffassungsgabe und der zielgerichteten Arbeitsweise wurde in kurzer Zeit ein umfassendes UX-Konzpet erstellt, welches die einzelnen Schritte der User Journey exakt abbildete.”