Projects / Dornbracht

Intro

Dornbracht's premium bathroom & kitchen design have won numerous international awards and are a driving force for the trends of an entire industry. I had the opportunity to continue 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 and be appropriate to the extraordinary brand design by Meiré and Meiré and text design by Wortsport.

01

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

02

Even if you work with out-of-this-world products, there is the everyday reality of UX office work.This is the team office (My space is the one with the suitcase. I traveled Munich-Düsseldorf once a week for two days of client meetings and on-site teamwork)

Problem

The previous website used limited CMS, navigation and usability were outdated, the site lacked dynamic or localised content and had no concept on how to present the product catalog for an international audience

01

The homepage with rudimentary customer journey and confusing category funeling strategy

02

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

03

A content category page that had outgrown its page structure

Solution

The new technical setup chosen by the client was as luxurious as the products themselves. Would my UX system live up to it? ( no pressure...)

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 list of technical features was impressive.

Template modules floating on a defined (invisible) grid

Flexible content sorting with masonry

Use of high definition pictures

Facebook and Youtube integration

GeoIP Tracking and target group specific delivery of assets 

GeoIP Tracking in combination with google maps

Related content modules with content reuse and context related delivery

Onpage SEO optimisation, Off Page SEO with external link building

Google and Sitecore analytics dashboard

Translation workflows with xml-export of content

Translation workflows with xml-export of content

Automatic criteria based search result landing pages

The new tech setup offering everything a UX designer could dream of.

Going back to basic storytelling 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

During the first weeks I conducted full day user journey and digital branding workshops with client stakeholders. 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.

01

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

02

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

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 eroded 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. IIt 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 the client requested could be placed in this grid to see if they worked in placement and content.

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.

Hundreds of automated search result landingpages, thousands of product and accessory detail pages and more than 50 category and content fork pages required the UX system to be seamlessly flexible in automated as well as manual assembly.

A versatile module set for both marketing and sales purposes within a structural page template system achieved this goal.

Module wireframes

Adobe Xd Wireframes of some of the marketing modules. I always set real headlines and images whenever possible so that we can all see how the module would actually perform.

Template wireframes

Xd Wireframes of some of the page templates. They assemble the modules in a choreographic sequence enabling the sales goal of that page. 

Detail example

The "product tile" module

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.

The "product tile" module nested in other modules

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 and CMS page assembly.

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

Modules within flows, detail functions and usability standards

After creating the high-fidelity strategic concept with all modules and templates, I created all important functions, flows and UI standards and documented them in a “UX/UI Bible”

  • Search and search result page with multistep filtering and pagination
  • menu and in-page catalog browsing
  • Showroom finder map in two versions, large and small
  • 3 different Up- and Download routines
  • Contact and live chat
  • Placement of Pinterest, Instragram and Youtube
  • Login & Sign up routines
  • My personal dashboard
  • Adding a product to favorites and managing my favorites
  • Adding a product to specifications and managing my specifications

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

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

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

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, and production controller. But that was not the biggest challenge. The biggest challenge was getting up at 4 every Tuesday to fly to Düsseldorf for the weekly 2-day workshops. 


Here is what Stefan Friedrich, Account Director on the project says about my contribution:

"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

For more project samples or information, get in touch. Or visit the LinkedIn profile.

Futher sources and related links