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.

When you create UX for a company that makes products like these, you know you better not disappoint in the timeless quality-department

The problem

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 homepage with rudimentary customer journey and confusing category funeling strategy

A product line page had the same layout as the homepage and lacked engaging choreography

A content category page that had outgrown its page structure

The Tech Setup of the new system

Dornbracht chose comspace to implement a Sitecore CMS with a worldwide online-request management tool via SharePoint. It had an xml-integration to upload data from Dornbracht’s catalogue data management software. They also added a retailer search with connection to Dornbracht CRM software. 

The Workshops

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.

The simple beginning of a page template concept in the form of post-its “journey that list basic content elements. 

The first rudimentary sketch of one of the most important fork pages, channeling users either into the design collection or the shower solutions.

The strategy

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” module and the different “roles” it could take on. This is a page from the production documentation . The wireframes are made in Xd using brand design assets, real images and the brand font.

Wireframes of the product tile alone and embedded in core functional modules for menu, search result and category pages.

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.

The production

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”

Three sitemaps from inner sections of the site and also of an incorporated blog.

All modules and their place in the choreography of the template system. 

Some of the pages of the “UX/UI Bible”. In many places I added UX recommendations on individual items.

The results

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.”

Stefan Friedrich, Account Director
Big Sun, Düsseldorf

Get in touch

Let’s talk about your project. Or visit me on LinkedIn. Let’s make your digital product and service vision become a reality. 

How you can reach me