Revamping VPNMentor PPC Pages
ux/ui
ux/ui
ux/ui
CRO
CRO
CRO
About VPNMentor
About VPNMentor
About VPNMentor
Established in 2014, VPNMentor is a top online resource for VPN reviews and comparisons. Owned by Webselenese, it helps users navigate online privacy through expert analysis, user feedback, and up-to-date provider data.
PPC advertising is key to VPNMentor's traffic strategy. The PPC comparison pages act as landing pages for paid traffic, offering side-by-side VPN evaluations to support informed decisions. Because these pages receive paid traffic, clarity and fast decision-making directly affect conversions.
TL;DR
TL;DR
TL;DR
TL;DR
Goal:
Redesign VPNMentor's PPC comparison pages to improve clarity, usability, and conversion performance.
Key problems:
Cluttered layout with no clear visual hierarchy
Vendor cards looked similar, making comparison difficult
Weak CTAs that didn't drive action
Inconsistent branding with mixed icon styles and dated visual
Results:
Bounce rate decreased by 35%
Conversion rate increased by 50%
Mobile engagement (session duration) increased by 40%
User satisfaction increased by 25%
Role:
UX/UI lead. Conducted a CRO design audit, developed a new layout system, led visual revamp, and coordinated rollout with product and SEO teams
What shipped:
Simplified page structure with clear scan path
Redesigned vendor cards with numbered rankings, badges, and prominent CTAs
Standardized visual hierarchy across all comparison pages
Unified branding kit with consistent icons and modern styling
Timeline:
6 weeks total (1 week design and iterations, 1 week development, 4-week A/B test)
Goal:
Redesign VPNMentor's PPC comparison pages to improve clarity, usability, and conversion performance.
Key problems:
Cluttered layout with no clear visual hierarchy
Vendor cards looked similar, making comparison difficult
Weak CTAs that didn't drive action
Inconsistent branding with mixed icon styles and dated visual
Results:
Bounce rate decreased by 35%
Conversion rate increased by 50%
Mobile engagement (session duration) increased by 40%
User satisfaction increased by 25%
Role:
UX/UI lead. Conducted a CRO design audit, developed a new layout system, led visual revamp, and coordinated rollout with product and SEO teams
What shipped:
Simplified page structure with clear scan path
Redesigned vendor cards with numbered rankings, badges, and prominent CTAs
Standardized visual hierarchy across all comparison pages
Unified branding kit with consistent icons and modern styling
Timeline:
6 weeks total (1 week design and iterations, 1 week development, 4-week A/B test)
Goal:
Redesign VPNMentor's PPC comparison pages to improve clarity, usability, and conversion performance.
Key problems:
Cluttered layout with no clear visual hierarchy
Vendor cards looked similar, making comparison difficult
Weak CTAs that didn't drive action
Inconsistent branding with mixed icon styles and dated visual
Results:
Bounce rate decreased by 35%
Conversion rate increased by 50%
Mobile engagement (session duration) increased by 40%
User satisfaction increased by 25%
Role:
UX/UI lead. Conducted a CRO design audit, developed a new layout system, led visual revamp, and coordinated rollout with product and SEO teams
What shipped:
Simplified page structure with clear scan path
Redesigned vendor cards with numbered rankings, badges, and prominent CTAs
Standardized visual hierarchy across all comparison pages
Unified branding kit with consistent icons and modern styling
Timeline:
6 weeks total (1 week design and iterations, 1 week development, 4-week A/B test)
Goal:
Redesign VPNMentor's PPC comparison pages to improve clarity, usability, and conversion performance.
Key problems:
Cluttered layout with no clear visual hierarchy
Vendor cards looked similar, making comparison difficult
Weak CTAs that didn't drive action
Inconsistent branding with mixed icon styles and dated visual
Results:
Bounce rate decreased by 35%
Conversion rate increased by 50%
Mobile engagement (session duration) increased by 40%
User satisfaction increased by 25%
Role:
UX/UI lead. Conducted a CRO design audit, developed a new layout system, led visual revamp, and coordinated rollout with product and SEO teams
What shipped:
Simplified page structure with clear scan path
Redesigned vendor cards with numbered rankings, badges, and prominent CTAs
Standardized visual hierarchy across all comparison pages
Unified branding kit with consistent icons and modern styling
Timeline:
6 weeks total (1 week design and iterations, 1 week development, 4-week A/B test)
Project Goal
Project Goal
Project Goal
Project Goal
I led the redesign of VPNMentor's high-traffic PPC comparison template to modernize the layout, strengthen hierarchy, and lift conversions.
The existing page had not been updated in several years. It exhibited an outdated design with no clear UX strategy, a cluttered layout lacking visual hierarchy, and weak call-to-action elements. My objective was to modernize the page's aesthetics, improve key performance metrics, and align the visual identity with contemporary standards.
As UX/UI lead, I:
Conducted a comprehensive audit of the existing design and performance metrics
Developed a new layout with updated visual language and redesigned components
Collaborated with internal stakeholders on testing and rollout strategies
Delivered responsive layouts, new visual components, and a refreshed brand kit
I led the redesign of VPNMentor's high-traffic PPC comparison template to modernize the layout, strengthen hierarchy, and lift conversions.
The existing page had not been updated in several years. It exhibited an outdated design with no clear UX strategy, a cluttered layout lacking visual hierarchy, and weak call-to-action elements. My objective was to modernize the page's aesthetics, improve key performance metrics, and align the visual identity with contemporary standards.
As UX/UI lead, I:
Conducted a comprehensive audit of the existing design and performance metrics
Developed a new layout with updated visual language and redesigned components
Collaborated with internal stakeholders on testing and rollout strategies
Delivered responsive layouts, new visual components, and a refreshed brand kit
I led the redesign of VPNMentor's high-traffic PPC comparison template to modernize the layout, strengthen hierarchy, and lift conversions.
The existing page had not been updated in several years. It exhibited an outdated design with no clear UX strategy, a cluttered layout lacking visual hierarchy, and weak call-to-action elements. My objective was to modernize the page's aesthetics, improve key performance metrics, and align the visual identity with contemporary standards.
As UX/UI lead, I:
Conducted a comprehensive audit of the existing design and performance metrics
Developed a new layout with updated visual language and redesigned components
Collaborated with internal stakeholders on testing and rollout strategies
Delivered responsive layouts, new visual components, and a refreshed brand kit
I led the redesign of VPNMentor's high-traffic PPC comparison template to modernize the layout, strengthen hierarchy, and lift conversions.
The existing page had not been updated in several years. It exhibited an outdated design with no clear UX strategy, a cluttered layout lacking visual hierarchy, and weak call-to-action elements. My objective was to modernize the page's aesthetics, improve key performance metrics, and align the visual identity with contemporary standards.
As UX/UI lead, I:
Conducted a comprehensive audit of the existing design and performance metrics
Developed a new layout with updated visual language and redesigned components
Collaborated with internal stakeholders on testing and rollout strategies
Delivered responsive layouts, new visual components, and a refreshed brand kit
Research Approach
Research Approach
Research Approach
Research Approach
To inform the redesign, I audited the live PPC template and its performance data. I reviewed Google Analytics to identify where visitors dropped off, where bounce rates were highest, and where paths to conversion broke down.
I paired this with heatmap analysis to understand attention patterns, click focus, and how users interacted with CTAs and the comparison table.
Key findings:
Users scrolled past vendor cards without engaging
CTAs received minimal click focus
The comparison table got shallow engagement
Mobile users had significantly shorter sessions
These findings shaped clear design decisions aimed at faster scanning, clearer differentiation between vendors, and stronger conversion paths.
Identified UX/UI Pain Points
Identified UX/UI Pain Points
Identified UX/UI Pain Points
Identified UX/UI Pain Points
Cluttered layout with weak hierarchy
The existing page presented seven VPN providers in dense, similar-looking cards. Mixed typography, small text, and inconsistent spacing made scanning difficult. Users couldn't quickly identify the top recommendation or differentiate between options. Heatmaps showed shallow engagement with vendor cards and weak CTA focus.
Vendor cards failed to differentiate options
Each vendor card had the same visual weight. Logos, feature lists, and ratings blended together without clear ranking signals. Users had to read dense text to understand differences, slowing decision-making and increasing bounce rates.
Weak call-to-action design
The "VISIT WEBSITE" buttons were small, visually subdued, and easy to overlook. Low contrast against the surrounding content made them blend into the card rather than stand out as the primary action. Heatmaps showed minimal click focus on CTAs.
Inconsistent branding undermined trust
The page used mixed icon styles (filled, outline, and mixed weights), dated illustrations, and inconsistent visual treatments. This fragmented appearance weakened the professional credibility needed to drive conversions on a paid traffic landing page.
Cluttered layout with weak hierarchy
The existing page presented seven VPN providers in dense, similar-looking cards. Mixed typography, small text, and inconsistent spacing made scanning difficult. Users couldn't quickly identify the top recommendation or differentiate between options. Heatmaps showed shallow engagement with vendor cards and weak CTA focus.
Vendor cards failed to differentiate options
Each vendor card had the same visual weight. Logos, feature lists, and ratings blended together without clear ranking signals. Users had to read dense text to understand differences, slowing decision-making and increasing bounce rates.
Weak call-to-action design
The "VISIT WEBSITE" buttons were small, visually subdued, and easy to overlook. Low contrast against the surrounding content made them blend into the card rather than stand out as the primary action. Heatmaps showed minimal click focus on CTAs.
Inconsistent branding undermined trust
The page used mixed icon styles (filled, outline, and mixed weights), dated illustrations, and inconsistent visual treatments. This fragmented appearance weakened the professional credibility needed to drive conversions on a paid traffic landing page.
Cluttered layout with weak hierarchy
The existing page presented seven VPN providers in dense, similar-looking cards. Mixed typography, small text, and inconsistent spacing made scanning difficult. Users couldn't quickly identify the top recommendation or differentiate between options. Heatmaps showed shallow engagement with vendor cards and weak CTA focus.
Vendor cards failed to differentiate options
Each vendor card had the same visual weight. Logos, feature lists, and ratings blended together without clear ranking signals. Users had to read dense text to understand differences, slowing decision-making and increasing bounce rates.
Weak call-to-action design
The "VISIT WEBSITE" buttons were small, visually subdued, and easy to overlook. Low contrast against the surrounding content made them blend into the card rather than stand out as the primary action. Heatmaps showed minimal click focus on CTAs.
Inconsistent branding undermined trust
The page used mixed icon styles (filled, outline, and mixed weights), dated illustrations, and inconsistent visual treatments. This fragmented appearance weakened the professional credibility needed to drive conversions on a paid traffic landing page.
Cluttered layout with weak hierarchy
The existing page presented seven VPN providers in dense, similar-looking cards. Mixed typography, small text, and inconsistent spacing made scanning difficult. Users couldn't quickly identify the top recommendation or differentiate between options. Heatmaps showed shallow engagement with vendor cards and weak CTA focus.
Vendor cards failed to differentiate options
Each vendor card had the same visual weight. Logos, feature lists, and ratings blended together without clear ranking signals. Users had to read dense text to understand differences, slowing decision-making and increasing bounce rates.
Weak call-to-action design
The "VISIT WEBSITE" buttons were small, visually subdued, and easy to overlook. Low contrast against the surrounding content made them blend into the card rather than stand out as the primary action. Heatmaps showed minimal click focus on CTAs.
Inconsistent branding undermined trust
The page used mixed icon styles (filled, outline, and mixed weights), dated illustrations, and inconsistent visual treatments. This fragmented appearance weakened the professional credibility needed to drive conversions on a paid traffic landing page.
Implemented Solutions
Implemented Solutions
Implemented Solutions
Implemented Solutions
Simplified layout with clear hierarchy
Problem:
Cluttered page structure with no clear scan path. Users couldn't quickly identify the top recommendation.
Solution:
Restructured the page with a clear visual hierarchy. The #1 recommendation now leads with prominent badges ("Fastest VPN," "Best VPN of 2021"). Numbered ranking badges (1, 2, 3, 4) create an obvious order. Increased whitespace between cards reduces visual noise and guides the eye down the page.
Simplified layout with clear hierarchy
Problem:
Cluttered page structure with no clear scan path. Users couldn't quickly identify the top recommendation.
Solution:
Restructured the page with a clear visual hierarchy. The #1 recommendation now leads with prominent badges ("Fastest VPN," "Best VPN of 2021"). Numbered ranking badges (1, 2, 3, 4) create an obvious order. Increased whitespace between cards reduces visual noise and guides the eye down the page.
Simplified layout with clear hierarchy
Problem:
Cluttered page structure with no clear scan path. Users couldn't quickly identify the top recommendation.
Solution:
Restructured the page with a clear visual hierarchy. The #1 recommendation now leads with prominent badges ("Fastest VPN," "Best VPN of 2021"). Numbered ranking badges (1, 2, 3, 4) create an obvious order. Increased whitespace between cards reduces visual noise and guides the eye down the page.
Simplified layout with clear hierarchy
Problem:
Cluttered page structure with no clear scan path. Users couldn't quickly identify the top recommendation.
Solution:
Restructured the page with a clear visual hierarchy. The #1 recommendation now leads with prominent badges ("Fastest VPN," "Best VPN of 2021"). Numbered ranking badges (1, 2, 3, 4) create an obvious order. Increased whitespace between cards reduces visual noise and guides the eye down the page.
Redesigned vendor cards for faster comparison
Problem:
All vendor cards looked the same, making differentiation difficult and slowing decision-making.
Solution
Created a consistent card structure with clear visual differentiation:
Numbered ranking badges with color-coded labels for top performers
Logo and brief description on the left
Checkmark bullet points for scannable feature lists
Large circular rating scores (9.8, 9.2, 9.0) with context labels ("OUTSTANDING!", "SUPERB!", "VERY GOOD!")
Platform compatibility icons (Windows, Mac, iOS, Android, Linux, Router)
Direct vendor URL displayed for transparency
The top-ranked vendor gets additional visual prominence with award badges, making the recommendation immediately clear.
Redesigned vendor cards for faster comparison
Problem:
All vendor cards looked the same, making differentiation difficult and slowing decision-making.
Solution
Created a consistent card structure with clear visual differentiation:
Numbered ranking badges with color-coded labels for top performers
Logo and brief description on the left
Checkmark bullet points for scannable feature lists
Large circular rating scores (9.8, 9.2, 9.0) with context labels ("OUTSTANDING!", "SUPERB!", "VERY GOOD!")
Platform compatibility icons (Windows, Mac, iOS, Android, Linux, Router)
Direct vendor URL displayed for transparency
The top-ranked vendor gets additional visual prominence with award badges, making the recommendation immediately clear.
Redesigned vendor cards for faster comparison
Problem:
All vendor cards looked the same, making differentiation difficult and slowing decision-making.
Solution
Created a consistent card structure with clear visual differentiation:
Numbered ranking badges with color-coded labels for top performers
Logo and brief description on the left
Checkmark bullet points for scannable feature lists
Large circular rating scores (9.8, 9.2, 9.0) with context labels ("OUTSTANDING!", "SUPERB!", "VERY GOOD!")
Platform compatibility icons (Windows, Mac, iOS, Android, Linux, Router)
Direct vendor URL displayed for transparency
The top-ranked vendor gets additional visual prominence with award badges, making the recommendation immediately clear.
Redesigned vendor cards for faster comparison
Problem:
All vendor cards looked the same, making differentiation difficult and slowing decision-making.
Solution
Created a consistent card structure with clear visual differentiation:
Numbered ranking badges with color-coded labels for top performers
Logo and brief description on the left
Checkmark bullet points for scannable feature lists
Large circular rating scores (9.8, 9.2, 9.0) with context labels ("OUTSTANDING!", "SUPERB!", "VERY GOOD!")
Platform compatibility icons (Windows, Mac, iOS, Android, Linux, Router)
Direct vendor URL displayed for transparency
The top-ranked vendor gets additional visual prominence with award badges, making the recommendation immediately clear.
Prominent CTAs that drive action
Problem:
Small, subdued "VISIT WEBSITE" buttons received minimal click focus.
Solution:
Redesigned CTAs as large, full-width green buttons with clear action text ("Visit Website >"). High contrast against white card backgrounds ensures visibility. Consistent placement on every card creates predictable interaction patterns. Mobile layout uses full-width buttons for easy tap targets.
Prominent CTAs that drive action
Problem:
Small, subdued "VISIT WEBSITE" buttons received minimal click focus.
Solution:
Redesigned CTAs as large, full-width green buttons with clear action text ("Visit Website >"). High contrast against white card backgrounds ensures visibility. Consistent placement on every card creates predictable interaction patterns. Mobile layout uses full-width buttons for easy tap targets.
Prominent CTAs that drive action
Problem:
Small, subdued "VISIT WEBSITE" buttons received minimal click focus.
Solution:
Redesigned CTAs as large, full-width green buttons with clear action text ("Visit Website >"). High contrast against white card backgrounds ensures visibility. Consistent placement on every card creates predictable interaction patterns. Mobile layout uses full-width buttons for easy tap targets.
Prominent CTAs that drive action
Problem:
Small, subdued "VISIT WEBSITE" buttons received minimal click focus.
Solution:
Redesigned CTAs as large, full-width green buttons with clear action text ("Visit Website >"). High contrast against white card backgrounds ensures visibility. Consistent placement on every card creates predictable interaction patterns. Mobile layout uses full-width buttons for easy tap targets.
Unified branding for trust and consistency
Problem:
Mixed icon styles and dated illustrations created a fragmented, unprofessional appearance.
Solution:
Developed a standardized PPC kit including:
Consistent icon set with unified visual weight
Modern color palette aligned with VPNMentor brand
Standardized typography and spacing rules
Hero section redesigned to lead with value proposition
Applied the kit across all PPC comparison pages to create a cohesive experience that builds trust with paid traffic visitors.
Unified branding for trust and consistency
Problem:
Mixed icon styles and dated illustrations created a fragmented, unprofessional appearance.
Solution:
Developed a standardized PPC kit including:
Consistent icon set with unified visual weight
Modern color palette aligned with VPNMentor brand
Standardized typography and spacing rules
Hero section redesigned to lead with value proposition
Applied the kit across all PPC comparison pages to create a cohesive experience that builds trust with paid traffic visitors.
Unified branding for trust and consistency
Problem:
Mixed icon styles and dated illustrations created a fragmented, unprofessional appearance.
Solution:
Developed a standardized PPC kit including:
Consistent icon set with unified visual weight
Modern color palette aligned with VPNMentor brand
Standardized typography and spacing rules
Hero section redesigned to lead with value proposition
Applied the kit across all PPC comparison pages to create a cohesive experience that builds trust with paid traffic visitors.
Unified branding for trust and consistency
Problem:
Mixed icon styles and dated illustrations created a fragmented, unprofessional appearance.
Solution:
Developed a standardized PPC kit including:
Consistent icon set with unified visual weight
Modern color palette aligned with VPNMentor brand
Standardized typography and spacing rules
Hero section redesigned to lead with value proposition
Applied the kit across all PPC comparison pages to create a cohesive experience that builds trust with paid traffic visitors.
Mobile-optimized layout
Problem:
Mobile users had shorter sessions and higher bounce rates than desktop.
Solution:
Created a condensed mobile card design that maintains hierarchy. Key elements preserved: ranking badges, scores, feature highlights with bold text, and full-width CTA buttons.
Mobile-optimized layout
Problem:
Mobile users had shorter sessions and higher bounce rates than desktop.
Solution:
Created a condensed mobile card design that maintains hierarchy. Key elements preserved: ranking badges, scores, feature highlights with bold text, and full-width CTA buttons.
Mobile-optimized layout
Problem:
Mobile users had shorter sessions and higher bounce rates than desktop.
Solution:
Created a condensed mobile card design that maintains hierarchy. Key elements preserved: ranking badges, scores, feature highlights with bold text, and full-width CTA buttons.
Mobile-optimized layout
Problem:
Mobile users had shorter sessions and higher bounce rates than desktop.
Solution:
Created a condensed mobile card design that maintains hierarchy. Key elements preserved: ranking badges, scores, feature highlights with bold text, and full-width CTA buttons.
Results
Results
Results
Results
Post-launch results from a 4-week A/B test across the PPC template
(source: Google Analytics and heatmaps, sample: A/B on Google Ads traffic):
Bounce rate decreased by 35%, indicating higher user engagement
Conversion rate increased by 50%, demonstrating more effective CTAs and user flow (conversion = click to vendor site from comparison page)
Mobile engagement increased by 40% (session duration), reflecting improved mobile UX
User satisfaction increased by 25% based on post-launch survey scores related to page usability and clarity
Post-launch results from a 4-week A/B test across the PPC template
(source: Google Analytics and heatmaps, sample: A/B on Google Ads traffic):
Bounce rate decreased by 35%, indicating higher user engagement
Conversion rate increased by 50%, demonstrating more effective CTAs and user flow (conversion = click to vendor site from comparison page)
Mobile engagement increased by 40% (session duration), reflecting improved mobile UX
User satisfaction increased by 25% based on post-launch survey scores related to page usability and clarity
Post-launch results from a 4-week A/B test across the PPC template
(source: Google Analytics and heatmaps, sample: A/B on Google Ads traffic):
Bounce rate decreased by 35%, indicating higher user engagement
Conversion rate increased by 50%, demonstrating more effective CTAs and user flow (conversion = click to vendor site from comparison page)
Mobile engagement increased by 40% (session duration), reflecting improved mobile UX
User satisfaction increased by 25% based on post-launch survey scores related to page usability and clarity
Post-launch results from a 4-week A/B test across the PPC template
(source: Google Analytics and heatmaps, sample: A/B on Google Ads traffic):
Bounce rate decreased by 35%, indicating higher user engagement
Conversion rate increased by 50%, demonstrating more effective CTAs and user flow (conversion = click to vendor site from comparison page)
Mobile engagement increased by 40% (session duration), reflecting improved mobile UX
User satisfaction increased by 25% based on post-launch survey scores related to page usability and clarity
Conclusion
Conclusion
Conclusion
Conclusion
The redesign addressed core issues with a user-first layout and clear hierarchy. By simplifying the page structure, redesigning vendor cards for faster comparison, strengthening CTAs, and unifying the visual language, the PPC comparison pages now convert paid traffic more effectively.
The improvements led to measurable gains in engagement, trust, and conversion rates, directly supporting VPNMentor's business objectives for paid acquisition.
The redesign addressed core issues with a user-first layout and clear hierarchy. By simplifying the page structure, redesigning vendor cards for faster comparison, strengthening CTAs, and unifying the visual language, the PPC comparison pages now convert paid traffic more effectively.
The improvements led to measurable gains in engagement, trust, and conversion rates, directly supporting VPNMentor's business objectives for paid acquisition.
The redesign addressed core issues with a user-first layout and clear hierarchy. By simplifying the page structure, redesigning vendor cards for faster comparison, strengthening CTAs, and unifying the visual language, the PPC comparison pages now convert paid traffic more effectively.
The improvements led to measurable gains in engagement, trust, and conversion rates, directly supporting VPNMentor's business objectives for paid acquisition.
The redesign addressed core issues with a user-first layout and clear hierarchy. By simplifying the page structure, redesigning vendor cards for faster comparison, strengthening CTAs, and unifying the visual language, the PPC comparison pages now convert paid traffic more effectively.
The improvements led to measurable gains in engagement, trust, and conversion rates, directly supporting VPNMentor's business objectives for paid acquisition.
Alex Dihel | Design Leader | Product & Marketing Design | Design Operations www.alexdihel.com ©
Alex Dihel | Design Leader | Product & Marketing Design | Design Operations www.alexdihel.com ©
Alex Dihel | Design Leader | Product & Marketing Design | Design Operations www.alexdihel.com ©
Alex Dihel | Design Leader | Product & Marketing Design | Design Operations www.alexdihel.com ©