Client
Lilly Drogerie
Role
Lead Designer
Year
2024 - 2026
Focus
UI/UX, Information architecture, Behaviour analytics, Checkout
Lilly Drogerie
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

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.

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.

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.

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.

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
Send me an email



