An Ecommerce Experience That Finally Makes Sense

Philip Wallage

Completed work

UX Designer

Responsive Design

Web Designer

Figma

Healthcare

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, meaning there was nothing but upside.

That’s where I came in.

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? A full Baymard Institute-based UX audit. It confirmed what they already suspected — and gave us the language and structure to fix it. Quickly. Properly.

Design Highlights

From an auto-rotating carousel no one waited for to static banners that deliver the message instantly.

01. 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 #3

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

02. Navigation: A Realisation That Changed Everything

One of the biggest breakthroughs was redefining the difference between MAIN and SUB categories.

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)

Now, users can scan, browse, or dive deep — without ever feeling lost.

03. Sub-Category Page: Smarter Filters, SEO Juice & Product Highlights

This was due for an upgrade:

We introduced tooltips to explain filters

Allowed banners inside product listings

Added modular content blocks for SEO (FAQs, featured products, related reads)

Optimised spacing and layout — especially on mobile

Side-by-side, the difference is striking. Old design: chaotic. New design: calm, focused, and 100x more shoppable.

04. Blog Article Layout: Content Meets Commerce

We redesigned the article template to do more than just look good.

Now, whenever a product is mentioned in the copy, it shows up directly in the sidebar.

On desktop, the sidebar is sticky — always in view

Products are contextually linked — no need to scroll up or go hunting

Modular layout allows for rich formatting, tips, or cross-links

This bridges the gap between content and commerce. One of those small changes that makes a big difference.

05. Design System: Less Noise, More Flow

There was already a brand in place. Good news. But the execution? Inconsistent spacing. Random margins. UI components that didn’t talk to each other.

So I gave the entire UI a polish pass:

Consistent sizing, spacing, paddings

Modular cards and floating layouts

Cohesive styles across banners, forms, and product displays

It’s not flashy. But it’s essential. And in a platform this size, it creates calm where there used to be clutter.

06. Mobile: More Products, Less Scroll Fatigue

The mobile sub-category pages were suffering from spacing bloat. In the old version, you’d scroll forever before hitting product #2.

I tightened everything up:

Clean typography

Compact filters

More products visible above the fold

Less friction, more flow

Side-by-side, it’s night and day.

Reflection

This wasn’t a full rebrand. It wasn’t a dramatic reinvention. It was a long-overdue spring cleaning — rooted in best practices, design consistency, and common sense.

The result? A cleaner, sharper, more intuitive experience across the board. Less noise. More action. And finally, a UX that reflects the scale of the business behind it.