Tags: UX Design · Analytics · A/B Testing · E-commerce

Context: Okazje.info, 2015-2017

Type: Individual Contributor, End-to-End

The Challenge

Okazje.info was one of Poland's top three price-comparison platforms, serving millions of users each month. Following a major platform migration from separate codebases (m.okazje.info and desktop) into a unified Responsive Web Design (RWD) system, the mobile bounce rate skyrocketed to an alarming ~58%, triggering a severe drop in downstream mobile conversion rates across all product listing pages (PLP).The legacy dedicated mobile site had historically maintained a highly efficient mobile bounce rate of ~38%. The challenge was twofold: accurately diagnose what was causing a 20-percentage-point spike in user abandonment on a highly fragmented device matrix, and engineer a high-precision layout fix capable of restoring historical traffic performance in a rigorous A/B test environment.

My Role

I owned the entire lifecycle of the problem as an Individual Contributor. Spanning automated data detection, behavioral analysis, UX/UI design, technical specifications, and post-launch validation.

Process

1. Proactive Detection

The conversion drop didn't wait for a manual audit. It was caught immediately by an automated KPI monitoring system I had previously built for the team, a daily Google Analytics data pipeline with threshold-based alerts. The system triggered an alert the moment mobile metrics dipped, giving our team a critical head start before business stakeholders even noticed the anomaly.

2. Data-Driven Diagnosis

To uncover why mobile users were bouncing, I cross-referenced quantitative Google Analytics data with qualitative session recordings and heatmaps via HotJar.The diagnosis was clear: the newly deployed RWD grid relied on rigid, fixed-pixel dimensions. On non-standard mobile viewports, this caused erratic padding, asymmetrical margins, and unpredictable dead space around product images. Because thumbnails failed to fill their containers, the layout appeared broken and unprofessional. Frustrated by the poor visual rhythm, users bounced before interacting with the offers.

3. The Solution: A Zero-Waste Fluid Grid

Instead of applying quick CSS patches, I re-engineered the grid mechanics from the ground up by designing a continuous, mathematical fluid scaling system.

• The Core Logic: Product tiles dynamically expanded to utilize 100% of the available viewport width up to a maximum threshold of 220px. The exact pixel-threshold moment a viewport expanded past this limit, the system instantly triggered a new column, resetting the tiles back to their minimum width of 145px to restart the scaling loop.

**Responsive Breakpoint Matrix:**Every edge case, margin, and dimension was explicitly mapped out in the final development specification: