VPNMentor
2024
Optimizing PPC Comparison Pages
Making VPN comparisons easier to scan, understand, and act on.
Overview
A comparison page needs to help people choose
VPNMentor is a review and comparison site for VPNs. Its PPC pages are landing pages for paid search traffic: people arrive ready to choose, and every bounce costs money.
The pages hadn’t been updated in a while and weren’t meeting their conversion targets. Webselenese, the company behind VPNMentor, had the traffic and the product knowledge, but no designer with CRO experience. When it joined the Kape group, our team was brought in to help.
I was responsible for all the design work, with our design team lead reviewing and approving the designs. My work included auditing the existing pages and redesigning the card structure, mobile layout, and visual kit. We worked directly with a stakeholder at Webselenese, who provided the research findings, analytics data, and heatmaps.
Results
Source: Google Analytics and on-site measurement, 4-week A/B test
Bounce rate: −35%
Conversion rate: +50% (click-through to vendor site)
Mobile engagement: +40% (session duration)
User satisfaction: +25%
The project led to a longer design collaboration between Kape and Webselenese.
Problem
The pages got the traffic, but not the clicks
Heatmaps showed people scrolling past the vendor cards without interacting. Click zones on the buttons were small, and on mobile, sessions often ended before visitors reached the comparison table.
Research
What the audit showed
I went through the existing pages card by card. Most of the problems came from structure, not from content:
Seven vendors had almost the same visual weight. Colours and banners were used to set them apart, but it didn’t work.
Oversized logos took up most of each card without telling people anything about the product.
Large ranking numbers used space without helping anyone decide.
Feature highlights were squeezed in next to the brand area.
Over time the pages had collected mixed styles: inconsistent treatments, mismatched graphics, dated illustrations, and low contrast that also caused accessibility issues.
The buttons blended into the page colours instead of pointing to the one action the page existed for.
Design approach
One reading order for every card
I built the card around a fixed hierarchy: brand, description, social proof where it exists, feature highlights, rating, and a button to the vendor’s site. Each part leads to the next, so people move through the card toward the decision without having to search for it.
Horizontal logos instead of vertical ones
The vertical logos ran the full height of the card. The product team suggested placing the feature highlights under the logo in the left column, but fitting them there would have meant shrinking the text below a readable size. I switched to the horizontal versions of the logos instead. The brand stays visible, and the space below opens up for the description.
Keeping the rating away from the button
Another suggestion was to put the ranking right above the button. I was worried about two high-attention elements competing for the same spot, with the rating pulling focus away from the click. We kept them apart.
Decimal rating instead of stars
Later, the product team considered replacing the decimal score with the 5-star system used on their other sites. The A/B test answered this one: people saw the decimal score as more credible for comparing tech products. The score is shown with both the number and a word, so it has context.
Built for page speed
Page speed was a fixed requirement. I replaced raster graphics with vector graphics, designed banners and blocks so they could be built in code, and limited typefaces to system fonts. It meant more work upfront, but the pages load faster.
Designs
Make comparison easier
01 — Make comparison easier
Each card follows the same reading pattern. The top recommendation has a stronger visual treatment, while the other options remain easy to scan. The decimal score appears with a written rating, giving the number context.
02 — Keep the action clear on mobile
Mobile cards keep the vendor, key benefits, rating, and a full-width button. Longer descriptions stay in the desktop layout. The primary recommendation uses an orange button; other options use dark buttons.
03 — Keep the rest of the page consistent
The comparison section, FAQs, reviews, and rating explanation use the same visual language. Visitors can explore more detail without learning a new layout in every section.
Outcome & lessons
A clearer system for the whole page
What shipped: a card system with a clear scan path, larger buttons with accessible target areas (full-width on mobile), a responsive mobile layout, and one visual kit applied across all the PPC comparison pages: icons, colours, type and an updated logo.
The main lesson for me was that most of the clarity came from removing things. Many elements on the old page were repeating the same message. Giving each detail one job did more than adding new elements would have.
