The story
What was broken
The audit told a consistent story. Heatmaps showed users scrolling past vendor cards without engaging, CTAs receiving minimal click focus, and mobile sessions cutting off well before the comparison table. The pages were getting the traffic - they just weren't converting enough of it.
The cards were the structural problem. Seven vendors presented with mostly the same visual weight - color and banners had been used to try to differentiate them, but not successfully. Oversized logos dominated without telling the product story. Oversized order numbers took up space without serving any function. The feature highlights were cramped against the brand section. A mixed design style had accumulated over time - inconsistent treatments, mismatched graphics, dated illustrations - with low contrast throughout creating accessibility issues on top of everything else.
The CTAs compounded it. Buttons that blended into the page's general color scheme rather than pulling the eye toward the one action the page existed to drive.
What I decided and why
The card layout was the most contested decision. Product proposed placing the feature highlights under the vendor logo in the left column. The logos were vertical, spanning the full card height - fitting the highlights in would have required shrinking them below readability. I switched to horizontal logo variants instead, preserving brand presence while freeing the space for the description beneath.
A second proposal put the ranking indicator directly above the CTA. My concern was clustering - two high-attention elements competing for the same space, with a real risk of the ranking pulling focus away from the click. Dismissed.
The layout I landed on followed a clear hierarchy: brand identity, description, social proof where it existed, feature highlights, ranking with both numeral and verbal label, then the CTA with vendor URL. Each element builds on the last, moving the user naturally toward the decision.
The page speed requirement came in as a non-negotiable. Raster graphics replaced with vector banners and blocks designed to be built in code, typefaces limited to system fonts. More work upfront, cleaner result.
Product later considered replacing the decimal ranking system with 5-stars used elsewhere on their sites. The A/B test settled it - decimal scoring was perceived as more credible in a tech comparison context.
As a small addition, I brought in a cosmetic update to the website logo as part of the refreshed color scheme.
What shipped
A redesigned card system with a clear scan path - brand, description, social proof, feature highlights, ranking, CTA - with large orange buttons with accessible target areas, full-width on mobile. A unified branding kit applied across all PPC comparison pages. A fully responsive mobile layout. And a page built to load fast: vectors throughout, banners in code, no raster images.
