Client

Lilly Drogerie

Role

Lead Designer

Year

2024 - 2026

Focus

UI/UX, Information architecture, Behaviour analytics, Checkout

How do you make 5,000+ products easy to find and quick to buy?

5

3

checkout steps

5,000+

products made easy to find

1st screen

price and buy button, no scrolling

Lilly Drogerie homepage

CONTEXT

Lilly Drogerie is a Serbian drugstore chain with more than 5,000 products online, from cosmetics to shampoo and everyday personal care. Most of its customers are women.

I led the redesign of the online store, from finding a product to paying for it.

CHALLENGE

Lilly ran two sites: its main site and a separate shop on a "shop." subdomain. The main site tried to tell visitors everything at once, and the shop made simple tasks hard. Checkout took five steps, and product pages put the price and the buy button below the fold. None of these problems was big on its own, but together they got in the way of buying.

The store runs on Magento, and every change had to work within what the platform supports. A design Magento couldn't build would mean custom development the project didn't need, so I treated the platform as part of the brief.

To find where people actually struggled, I used Microsoft Clarity to watch how they moved through the site: where they rage-clicked, where they got stuck, and which paths they took to checkout. The biggest surprise was how often something I thought was clear had only been clear in my head. Watching real sessions put me in the customer's shoes and showed me pain points I would have missed.

Clarity's data cuts both ways, though. It once flagged a burst of rage clicks that looked like a broken page. It was a customer whose browser had frozen, clicking until something happened. After that I treated Clarity's flags as leads to check, and fixed the problems that were real and that the platform let us fix.

APPROACH

Filters built on Magento's own tools

With more than 5,000 products, filters do a lot of the work of finding things. Magento already has a built-in smart filter.

I could have designed a custom filter and asked the developers to build it. That would have meant custom code to build and maintain on a platform that already solved the problem. So I designed the filtering around Magento's own filter. Customers get a simpler way to narrow down the catalogue, and the developers built on what the platform already had.

Category page with price and brand filters
A shorter checkout

By the time someone reaches checkout, they've already decided to buy, and every extra step is another chance to give up.

The old checkout took five steps, and two of them weren't needed. I removed them, so checkout now takes three.

Shortened checkout
Price and buy button above the fold

Product pages put the price and the buy button below the fold, so customers had to scroll to find the two things they needed to make a decision.

I restructured the page so both are visible without scrolling, and reordered the rest of the product information around them.

Product page with price and buy button above the fold
Navigation through the mega menu and search

The main site tried to tell visitors everything at once, which made it harder to find the thing they came for. I removed what customers didn't need, so the parts they did need were easier to see.

I reorganised the categories in the mega menu and redesigned search. People who like to browse get clearer categories, and people who already know what they want can search for it directly.

Mega menu with product categories

OUTCOME

The redesigned store is live. Checkout takes three steps instead of five, the price and buy button are visible as soon as a product page opens, and the filtering runs on what Magento already supports.

CONTACT