Skip to content

Responsive E-Commerce Header Tabs While Eliminating Risks

Work  ✺  Music
Holding an iPad with two hands

I was responsible for the responsive redesign of the entire online shop 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.

Context and General Conditions

Rough Overview of Various Problems

Classic Thomann website with number badges
  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 option to flexibly choose the country of delivery, language, and currency.
  5. No reference to the customer center.
  6. Missing references to guarantees and shipping conditions.
  7. High space demand of the search feature with an unfavorable 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 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. More categories are hidden in other languages like Finnish.

Thesis Verification

Do we 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.

Therefore I decided to develop solutions to the problem to improve it sustainably.

Hundreds of scribbles, wireframes, final artwort, and prototypes were created

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

Now the creative phase begins. What can be done to contain the problem while keeping the basic conditions mentioned before? 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:

Thomann screenshots
  1. A narrow running font needs less horizontal space.
  2. Just 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.

Implementation and success measurement

2019 Thomann website header

Screenshot of the Online Store

The solutions mentioned above have all been implemented alongside hundreds of others. This happens step by step and building on each other iteratively. This minimizes the risk of confusing or losing customers and risking a drop in sales. When changing the font, users with older browsers were kept in mind who have problems displaying web fonts. The impact on sales conversions is generally important. Micro-conversions such as simply clicking on a category are secondary. The bottom line is that sales and clicks on the categories that are now visible have increased.

Future Outlook

Elements such as categories and subcategories take up a lot of space. This space is always limited and should be used as efficiently as possible. I am proposing a follow-up thesis:

The user is not provided with the most relevant categories within the header element.

Personalization of the order or visual prioritization could help here: