I was responsible for the responsive redesign of the entire online shop Thomann.de including mobile and app for iOS/Android. In this article I show a tiny extract of solved problems in the header area of the desktop shop.

Attention, Beta Alert! This page is currently under development. :)

Context and General Conditions

  • The header consists of elements such as logo, search, USP, main categories, customer center and wish list.
  • All customizations must work in 16 different languages.
  • Changes to the header have to be made with great care. They have a huge impact on the perception of the brand. Adjustments are visible at the most prominent point within the entire browsing and selling process.
  • Careless changes can cause a loss of existing customers.
  • The desktop shop covers devices from small tablets (e.g. iPad Mini) to large screens. It is used by users with PCs, laptops, phablets and tablets.
  • For technical reasons, a full-responsive solution is excluded. However, this restriction is unproblematic from the customer's perspective, as a mobile-optimized site for small displays is delivered.
  • Vertical space is particularly valuable in e-commerce. The header pushes important content such as product pages down. This can lead to page exits.



Rough Overview of Various Problems

  1. No visual highlighting of conversion-relevant elements such as shopping cart or wish list.
  2. Categories are hidden behind a tab "weitere..." (German for "more...") to save space.
  3. The logo appears unstable and the branding suffers from missing typographic white space.
  4. No possibility to flexibly choose country of delivery, language and currency.
  5. No reference to the customer centre.
  6. Missing references to guarantees and shipping conditions.
  7. High space demand of the search feature with an unfavourable small input form.
  8. Dozens of others that would go beyond the scope of this page. :)



The Solution

In the following subsections the process from thesis to technical implementation is described. For this purpose, I choose point 2 from the list above.


Thesis and Causes

Because not all categories are directly visible in the header, we do not show the entire product range to the user. That's why there are fewer additional sales within these categories.

This thesis arises from my observation of Thomann's shop and the the competition. To find out if the statement is true or false it should be checked later. For this purpose it's helpful to identify possible causes:

  1. Three categories (cases, cables & accessories) are hidden behind the tab element "weitere..." (German for "more...").
  2. The browser width is narrower than the screen width for some users. For example, when two browser windows are positioned side by side.
  3. In some foreign languages even more categories are hidden within "weitere...". Finnish sometimes requires more letters and is therefore wider for the same content.


Thesis Verification

Do we really have a problem? These steps have been taken for verification:

  1. The measurement is based on this hypothetical cause: The browser width is narrower than the screen width for some users.
  2. The "Noten" (German for "Sheet Music") tab is selected for a quick comparison.
  3. Within Google Analytics I check whether users with browser widths below 790 px click "Noten" less frequently.
  4. Comparing whether the visibility of the tab "Noten" has a direct impact on sales.
  5. Points 3 and 4 are true: we have a significant hit.
  6. Therefore I decide to develop solutions to the problem in order to improve it sustainably.


Solutions

In the years 2013–2019 hundreds of scribbles, wireframes, final artwork and dynamic prototypes will be created.

Now the creative solution phase begins. What can be done to contain the problem while keeping the basic conditions (see above). The solutions have been defined over several project phases in wireframes, visual designs, prototypes and also Jira tickets. In retrospect, it's very clear which decisions contribute to the solution of the problem:

  1. A narrow running font needs less horizontal space.
  2. Plain text requires far less space than a tab element.
  3. The categories are given the full width of the page, meaning a complete line. This costs space but improves cross-selling in the previously hidden categories
  4. The "Home" tab is removed. It's redundant to the click on the logo.
  5. Dynamic width through a responsive design. Font sizes and elements adapt freely. The most important elements are always visible. Categories are only hidden on the right in very narrow views.
  6. The tab element "weitere..." (German for "more") costs a lot of horizontal real-estate and is replaced by a > icon.


Umsetzung und Erfolgsmessung

Screenshot des Online-Stores

Die oben genannten Lösungen sind neben hunderten Anderen alle umgesetzt. Das passiert Schritt für Schritt und aufeinander aufbauend also iterativ. So kann das Risiko minimiert werden Kunden zu verwirren, zu verlieren und damit Einbrüche im Umsatz zu riskieren. Beim Wechsel der Schriftart wurden Nutzer mit älteren Browsern im Blick behalten die Probleme mit der Darstellung von Webfonts haben. Wichtig sind generell die Auswirkungen auf die Verkaufs-Conversions. Micro-Conversions wie etwa der reine Klick auf eine Kategorie sind zweitrangig. Unter'm Strich sind sowohl die Verkäufe als auch die Klicks auf die jetzt sichtbaren Kategorien gestiegen.



Ausblick auf die Zukunft

Elemente wie Kategorien und Unterkategorien nehmen viel Platz in Anspruch. Dieser Platz ist immer begrenzt und sollte deshalb so effizient wie möglich genutzt werden. Ich stelle dazu eine Folgethese auf.

Dem Nutzer werden nicht immer die passendsten Kategorien im Header der Webseite präsentiert.

Hier könnte Personalisierung der Reihenfolge oder visuellen Priorisierung Abhilfe schaffen:

  • Vielleicht sind in Drittländern (China, Schweiz, USA) andere Kategorien beliebter als in den Kernmärkten (EU).
  • Man kennt die Lieblingskategorien von angemeldeten Kunden und könnte diese in den Vordergrund rücken.
  • Befindet sich ein Nutzer auf einer Produktseite (z. B. einer bestimmten Gitarre) sind in diesem Kontext Kabel und Cases vielleicht wichtiger als Drums.
  • Vielleicht gibt es Situationen in denen man die Kategorien komplett ausblenden kann weil sie nie von Nutzern aufgerufen werden.