Spring cleaning a Dutch Top-50 Webshop with structure, sanity and backed by Baymard Institute Research

Spring cleaning a Dutch Top-50 Webshop with structure, sanity and backed by Baymard Institute Research

Client

DeOnlineDrogist

De Online Drogist is one of the largest e-commerce platforms in the Netherlands. Despite their scale and success, their digital experience was cluttered, inconsistent, and weighed down by years of UX debt.

When I first opened the site, I couldn’t believe my eyes. So much low-hanging fruit. So many quick wins. The best part? They were already performing well, which meant there was nothing but upside.

That’s where I came in.

‍

Putting the MEGA in Mega-Menu

Scope & Setup

Through my BTNG Unlimited subscription, I worked closely with their in-house team. Weekly check-ins. Ongoing Figma access. Comments flowing in real-time. It was a fluid setup designed for fast iteration and sharp focus.

The first step was a full UX audit based on Baymard Institute guidelines. It confirmed what they already suspected and gave us the structure to fix it. Quickly. Properly.

Design Highlights

Say farewell to your little friend. Plow! Banners looking so much more modern.

Homepage: Kill the Carousel

The old homepage had a slider. You know the kind:

  • Auto-rotates every few seconds
  • No pause on hover
  • No manual controls
  • Most users never even saw slide three

According to Baymard #242D, this is a classic UX fail.
We replaced it with static banners. Always visible. Always relevant. No waiting. No distractions.

‍

A simple concept but this gives us soooo many more options and freedom per category.

Navigation: A Realisation That Changed Everything

One of the biggest breakthroughs came when we redefined the difference between a main and sub-category.

The old nav mashed everything together.
Our redesign added clarity, depth, and control:

  • Mega menu with dedicated zones for promotions, top categories, and deals
  • Clickable headers (Baymard #266D)
  • Filter logic cleaned up (Baymard #253D, #261D)
  • Clear visual hierarchy (Baymard #263D)

Users can now scan, browse, or dive deep without ever feeling lost.

‍

Brand new filters and even... Banners inside the product listing!

Sub-Category Page: Smarter Filters, SEO Juice and Product Highlights

This section was overdue for an upgrade:

  • Introduced tooltips to explain filters
  • Allowed banners inside the product listing
  • Added modular content blocks for SEO like FAQs, featured products, and related articles
  • Optimised spacing and layout, especially on mobile

Side-by-side, the difference is clear. The old design was chaotic. The new one is calm, focused, and more shoppable.

‍

Say farewell to those boring, ugly BIG SEO text blocks at the bottom of a (sub)category page.

‍

An example of the UI elements that can be found in an article and hey! Product mentioned in the article get listed in the sidebar. Handy!

Blog Article Layout: Content Meets Commerce

We redesigned the article template to do more than just look good.
Now, whenever a product is mentioned, it shows up directly in the sidebar:

  • On desktop, the sidebar is sticky and always visible
  • Products are contextually linked with the content
  • Modular layout allows for rich formatting, tips, and cross-links

It’s a seamless bridge between content and commerce.

‍

Many tiny elements were cleaned up and to give it that polished look.

Design System: Less Noise, More Flow

There was already a brand in place. That helped. But the execution lacked consistency.
So I gave the entire UI a polish pass:

  • Unified spacing, sizing, and padding
  • Modular cards and floating layouts
  • Consistent styles across banners, forms, and product displays

Not flashy. But foundational. And in a platform this size, consistency builds trust.

‍

After polishing the vertical rhythm yo ucan see the level of detail a user now sees on that first product row. Also removing that floating Filters button is a huge win.

Mobile: More Products, Less Scroll Fatigue

The mobile sub-category pages had spacing issues. You had to scroll a lot just to see more than one or two products.

I cleaned that up:

  • Sharper layout
  • Tighter filters
  • More products above the fold
  • Smoother experience from first tap to checkout

Reflection

This wasn’t a rebrand or a total rebuild. It was a long-overdue spring cleaning. Grounded in usability best practices, applied with surgical precision.

The result is a more polished experience. Cleaner. Clearer. Easier to navigate. No dramatic redesign. Just a smart, steady evolution that finally reflects the scale and professionalism of the business.

‍