VPN Checkout Optimization

VPN Checkout Optimization

A hypothesis-driven redesign of a high-volume SaaS checkout flow. The goal was to minimize drop-off points on mobile devices by implementing a unified step architecture and reducing cognitive load.

"This project was developed as a design challenge for a potential role at Nord Security. Following the initial feedback, I further refined the UI and strategy to demonstrate a deeper understanding of Growth Design principles. This is a conceptual case study and is not affiliated with the official product."

"This project was developed as a design challenge for a potential role at Nord Security. Following the initial feedback, I further refined the UI and strategy to demonstrate a deeper understanding of Growth Design principles. This is a conceptual case study and is not affiliated with the official product."

the challenge

Lost in a Sea of Games

the challenge

Purchase Flow Optimization

The Context NordVPN is a market leader in cybersecurity, but even top-tier products suffer from cart abandonment. The existing mobile checkout flow was fragmented across multiple screens (Upsell → Account → Payment), creating unnecessary friction points.


The Goal To redesign the mobile purchase flow with a focus on Conversion Rate Optimization (CRO). The objective was to reduce the number of steps and cognitive load, thereby minimizing drop-off rates for mobile users without negatively impacting the Average Order Value (AOV).

my role

From Research to Reality

Role

Product Designer

Deliverables

Brand Identity, Mobile App Design, Onboarding Flow

Timeline

12 weeks

my role

Role

Product Designer

Deliverables

UX Research • CRO • Mobile Design

Timeline

1 week

Evaluation of the current live site.

Low-fidelity Wireframing & Prototyping.

High-fidelity UI Design

the Strategy

The Hypothesis Based on Baymard Institute’s findings on checkout optimization

the Strategy

The Hypothesis Based on Baymard Institute’s findings on checkout optimization

If we unify Account Creation and Payment into a single, cohesive step, we reduce cognitive load and perceived effort. This should result in a higher Conversion Rate on mobile devices without sacrificing the Average Order Value.

Design Exploration (Low-Fidelity)

We didn't just pick the first idea. We tested alternatives.

The Long Scroll (Rejected) Concept: All steps (Plans, Account, Payment) stacked on a single, continuous page.

Why it failed: While it keeps everything visible, the vertical length on mobile devices caused "Scroll Fatigue." Overwhelming the user with too much information at once violates the principle of Progressive Disclosure and increases bounce risk.

The Strict Accordion (Rejected) Concept: A sequential flow where Payment options are hidden until the Email step is completed.

Why it failed: This introduced high Interaction Cost. Hiding payment input fields behind an extra click adds friction. Furthermore, hiding payment logos (Trust Signals) until the end can make hesitant users feel insecure about the transaction.

Unified Compact View Concept: Merging Account and Payment into one cohesive visual block.

Why it won: It strikes the perfect balance. It reduces page loads (latency) while keeping critical Trust Signals (Payment Logos & Price) visible immediately.

Validation & Impact

The Solution

The Solution

We designed a detailed, multi-step onboarding flow. It guides the user through every step, gathering crucial data that allows the app to be fully personalized and valuable from the very first session.

Validation & Impact

How We Measure Success

Primary Metric Conversion Rate (CR)


Target:


Increase mobile checkout completion by +2.5%.

Secondary Metric Time to Task


Target:


Reduce average checkout time by 15 seconds.

Secondary Metric Time to Task


Target:


Reduce average checkout time by 15 seconds.

Rollout Strategy A/B Testing


Launch as a Challenger (Var B) against Control (Var A) with 10% traffic. Scale to 50% upon statistical significance (95%).

Rollout Strategy A/B Testing


Launch as a Challenger (Var B) against Control (Var A)
with 10% traffic. Scale to 50% upon statistical
significance (95%).

Outcome & Final

Thoughts & Personal Takeaway

Outcome & Final

Thoughts & Personal Takeaway

This project shifted my focus from just aesthetics to actual growth. I learned that a clean UI does not guarantee sales; every decision must be backed by a hypothesis about user behavior. In fintech, building trust with visible payment logos is just as important as reducing clicks. If this were a live project, my next step would be to launch an A/B test on 10% of traffic to validate that fewer steps truly lead to higher conversion.

This project shifted my focus from just aesthetics to actual growth. I learned that a clean UI does not guarantee sales; every decision must be backed by a hypothesis about user behavior. In fintech, building trust with visible payment logos is just as important as reducing clicks. If this were a live project, my next step would be to launch an A/B test on 10% of traffic to validate that fewer steps truly lead to higher conversion.

Thanks for reading! :)

remiswebdesign@gmail.com

remiswebdesign@gmail.com

@2025. All rights reserved