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