Tags: UX Design · Analytics · A/B Testing · E-commerce
Context: Okazje.info, 2015-2017
Type: Individual Contributor, full cycle
Okazje.info was one of Poland's top three price-comparison platforms, serving millions of users each month. When analytics flagged a drop in mobile conversion across product listing pages, I was tasked with diagnosing the cause and shipping a fix.
The challenge had two layers: identify what was actually happening for mobile users, then design a solution precise enough to confirm improvement through a statistically valid A/B test.
I owned the problem end-to-end, from data analysis and user behavior research through to design, specification and post-launch measurement. No handoffs.
The issue surfaced through the automated KPI monitoring system I had built for the team: a daily GA data pull with threshold-based alerts. When mobile conversion dropped below the threshold, the alert triggered before anyone noticed it manually. This gave us a head start on the problem.
I dug into the session data using Google Analytics, HotJar heatmaps and Yandex Metrica recordings. The pattern became clear: the product listing grid was built with fixed pixel dimensions. On smaller screens, this caused uncontrolled margins and dead space around images. Product thumbnails did not fill their containers, leaving irregular gaps that broke visual rhythm and made the page feel broken rather than intentional. Users were bouncing before they could engage with product details.
The fix required rethinking the grid mechanic entirely, not just adjusting a few values.
The core mechanic I designed was a fluid scaling system: product tiles would expand to fill all available screen space, up to a maximum tile width of 220px. Once tiles hit that maximum, a new column would appear and the scaling would restart from the minimum tile width of 145px. This created a smooth, continuous reflow with no dead space at any viewport width.
Breakpoints and column counts were defined explicitly in the specification: