McAfee — VPN Experience

McAfee — VPN Experience

Rebuilding McAfee's VPN to make security clear & supportive.

With Susanna Huang, Nina Wang, Jeffrey Jose & Jen Barrell.

While McAfee's security suite evolved over time with regular updates, their VPN tool (a premium service) was left behind due to competing priorities. To address the amassed tech debt and user complaints, leadership greenlit a full redesign initiative.

I was brought onto the newly formed VPN team to assist with initial research, feature planning, and end-to-end design implementation.

With Susanna Huang, Nina Wang, Jeffrey Jose & Jen Barrell.

Role

Product Design

Workshop Facilitator

Prototyping

Timeline

Nov — Jan 2024

Tools

Figma + Figjam

VPNs won't prevent a virus, but they do encrypt your internet activities.

VPN's do more than help you
watch European Netflix.

VPNs won't prevent a virus, but they do encrypt your internet activities.

It's like driving a car with tinted windows.
By encrypting internet traffic and masking the users location, VPNs keeps online activity private from bad people that want to intercept your passwords, credit card details, or private messages.
By encrypting internet traffic and masking the users location, VPNs keeps online activity private from bad people that want to intercept your passwords, credit card details, or private messages.
By encrypting internet traffic and masking the users location, VPNs keeps online activity private from bad people that want to intercept your passwords, credit card details, or private messages.
And yes, it can also let you stream geo-blocked TV shows from other countries you normally can't see.
And yes, it can also let you stream geo-blocked TV shows from other countries you normally can't see.
And yes, it can also let you stream geo-blocked TV shows from other countries you normally can't see.
Internet providers can and do sell this info to advertisers.
Common tasks like banking online can result in your accounts being breached.

Name: Clayton Harding

IP Address: 2948JHDD387

Browsing history: Yep that too

VPN server

(scrambles the data)

UNKNOWN USER

Image

Simplified VPN description

Problem

McAfee users are confused about what their VPN tool does,
and don't know when to enable it on their device(s).

McAfee users are confused about what their VPN tool does,
and don't know when to enable it on their device(s).

McAfee users are confused about what their VPN tool does,
and don't know when to enable it on their device(s).

As part of their protection plan, users have access to various security tools, including a VPN. However, CSAT feedback showed low user confidence in their VPN. When activated, it wasn't clear if the VPN was working or how it was protecting them. The value of a premium service felt invisible, resulting in subscriptions lapsing for renewal.

Image

McAfee's Current VPN design

How did simplicity backfire? It's a normal ON/OFF switch.

How did simplicity backfire? It's a normal ON/OFF switch.

How did simplicity backfire? It's a normal ON/OFF switch.

"It’s like turning on a lamp with no lightbulb".
"It’s like turning on a lamp with no lightbulb".
"It’s like turning on a lamp with no lightbulb".
Unlike security software that shows what dangers they stopped, VPNs work by making you invisible to attackers, making it impossible to verify the value of protecting you.
By oversimplifying, we created more questions and only gave answers with a hyperlink to our websites Q&A page.

Image

McAfee's Current VPN design

Opportunity

We need to better communicate how our VPN is protecting the users privacy and make it feel situational - encouraging users to instinctively enable it whenever they feel unsafe on a network.

HMW better communicate what a VPN does and how it protects their privacy in different scenarios?

HMW better communicate what a VPN does and how it protects their privacy in different scenarios?

Roadblock

VPNs are new territory for our team, we need to educate ourselves.

HMW better communicate what a VPN does and how it protects their privacy in different scenarios?

HMW better communicate what a VPN does and how it protects their privacy in different scenarios?

We're the first team to touch VPN since it's launch. We don't know what's feasible, our limitations or past documentation. To better understand the scope, we planned our work into 3 phases.

Phase 1

Talk to subject matter experts and fill in the knowledge gaps we don’t have. Let's set up a workshop.

Phase 2

Break down our existing VPN flow with our new knowledge, what area's can we focus on improving.

Phase 3

Build an improved user journey that will serve as our blueprints that anchor our designs.

Phase 1 — Talking to experts

I sat down with TunnelBear, a lead VPN service, to get insight on who's using VPNs and their limitations.

I sat down with TunnelBear, a lead VPN service, to get insight on who's using VPNs and their limitations.

I sat down with TunnelBear, a lead VPN service, to get insight on who's using VPNs and their limitations.

If we overeducate users with technical VPN details, it builds skepticism among newcomers. We need to build trust with their VPN by showing immediate value allowing users to explore additional features as their confidence grows.
If we overeducate users with technical VPN details, it builds skepticism among newcomers. We need to build trust with their VPN by showing immediate value allowing users to explore additional features as their confidence grows.
If we overeducate users with technical VPN details, it builds skepticism among newcomers. We need to build trust with their VPN by showing immediate value allowing users to explore additional features as their confidence grows.

People need constant reassurance to know they're being protected. We accomplished this by animating our mascot bear to physically tunnel to a different VPN server and a big banner saying “You’re Safe”.

Visualize VPN working besides just being On?

Pulsing lights, timer, movement?

When VPNs get marketed they don't talk about all the tools capabilities, leading to a mismatch in what a person expects it to do, vs what it actually can do.

Provide better education to what VPN is capable of, without too much technical jargon

VPNs might sound like they do only 1 thing, ON or OFF, but there's a ton of customization you can add to a VPN, things even you can do."

Personalize the VPN to our users needs by making it easier to find advanced features like "split tunneling" or setting up trusted networks.

Phase 2 — User flow breakdown

Phase 2 — User flow breakdown

With our new insights, I hosted workshops to break down our current user journey and ideate where we can do better.

We're only educating about what a VPN can do before a purchase.

We're only educating about what a VPN can do before a purchase.

We're only educating about what a VPN can do before a purchase.

After we get your money, we ghost you.
After we get your money, we ghost you.
After we get your money, we ghost you.
This means there is no support for users who revisit VPN after they purchase, or had expected further guidance when setting up their VPN.
This means there is no support for users who revisit VPN after they purchase, or had expected further guidance when setting up their VPN.
This means there is no support for users who revisit VPN after they purchase, or had expected further guidance when setting up their VPN.
We quickly identified onboarding as needing the most improvements to solve for our North Star.
We quickly identified onboarding as needing the most improvements to solve for our North Star.
We quickly identified onboarding as needing the most improvements to solve for our North Star.

Image

Old: Showing information only before making a purchase

Phase 3 — Improving the flow

Phase 3 — Improving the flow

Rebuilding the flow to offer education early, and no longer hiding our advanced features.

Rebuilding the flow to offer education early, and no longer hiding our advanced features.

Additionally, we moved advanced tools from the settings page onto the home screen, making it easier for users to explore new features available without having to randomly come across them.
Additionally, we moved advanced tools from the settings page onto the home screen, making it easier for users to explore new features available without having to randomly come across them.
Additionally, we moved advanced tools from the settings page onto the home screen, making it easier for users to explore new features available without having to randomly come across them.

Image

New: Setup guides + spotlighting advanced features

Early design planning

Early design planning

Group sketching clarified our components and layout.

Group sketching clarified our components and layout.

Group sketching clarified our components and layout.

4 rounds of rapid sketches and ugly wireframes.
4 rounds of rapid sketches and ugly wireframes.
4 rounds of rapid sketches and ugly wireframes.
This was important when helping our team align on the overall look and feel. After each round we voted on ideas that made the most sense and discussed how to combine or tweak them into the end-build.
This was important when helping our team align on the overall look and feel. After each round we voted on ideas that made the most sense and discussed how to combine or tweak them into the end-build.
This was important when helping our team align on the overall look and feel. After each round we voted on ideas that made the most sense and discussed how to combine or tweak them into the end-build.

Image

A few sketches that drove discussion

Sketching isn't normally part of my workflow, but it proved valuable with clear influences visible in our final designs.
Sketching isn't normally part of my workflow, but it proved valuable with clear influences visible in our final designs.
Sketching isn't normally part of my workflow, but it proved valuable with clear influences visible in our final designs.

Interactive

V1 Sketch compared to final output

Our Solution

Our Solution

Fresh onboarding and core experience where help is always within reach.

Onboarding that caters to both power users and first-timers.

Onboarding that caters to both power users and first-timers.

Onboarding that caters to both power users and first-timers.

Setting context with motion to show it's working, and reassuring you're safe.

Setting context with motion to show it's working, and reassuring you're safe.

Setting context with motion to show it's working, and reassuring you're safe.

Unplanned small win (while we're at it) - Let's stop taking people out of the app when troubleshooting. Now everything stay in-app.

Unplanned small win (while we're at it) - Let's stop taking people out of the app when troubleshooting. Now everything stay in-app.

Unplanned small win (while we're at it) - Let's stop taking people out of the app when troubleshooting. Now everything stay in-app.

Testing with users

Clearing up confusion when picking a server for the first time.

Clearing up confusion when picking a server for the first time.

Clearing up confusion when picking a server for the first time.

"What does fastest mean? Where is this?"
"What does fastest mean? Where is this?"
"What does fastest mean? Where is this?"
On default new users are connected to the fastest server (typically the closest one) for the best possible first experience, but participants didn't associate the fastest connection with a physical location.
On default new users are connected to the fastest server (typically the closest one) for the best possible first experience, but participants didn't associate the fastest connection with a physical location.
On default new users are connected to the fastest server (typically the closest one) for the best possible first experience, but participants didn't associate the fastest connection with a physical location.
Users carried this uncertainty throughout onboarding, constantly second-guessing how they're connected, like a nagging "did I leave the stove on?" feeling.
Users carried this uncertainty throughout onboarding, constantly second-guessing how they're connected, like a nagging "did I leave the stove on?" feeling.
Users carried this uncertainty throughout onboarding, constantly second-guessing how they're connected, like a nagging "did I leave the stove on?" feeling.

Image

Old: Connect to fastest regardless of country

Image

New: Showing country + fastest indication

Personal reflection

Despite the hype, priorities changed and the revamp was shelved. But my learnings shipped.

Despite the hype, priorities changed and the revamp was shelved. But my learnings shipped.

Despite the hype, priorities changed and the revamp was shelved. But my learnings shipped.

People hate reading, but not if you speak like a friend and less like a business.
Balancing what we as a business want users to know V.S what a user actually wants to know is a difficult line. This project helped me learn how to use metaphors on boring language into legible content.
Balancing what we as a business want users to know V.S what a user actually wants to know is a difficult line. This project helped me learn how to use metaphors on boring language into legible content.
Balancing what we as a business want users to know V.S what a user actually wants to know is a difficult line. This project helped me learn how to use metaphors on boring language into legible content.
The value of sketching is to start a discussion, not to show a solution.
The value of sketching is to start a discussion, not to show a solution.
The value of sketching is to start a discussion, not to show a solution.
I typically jump into higher fidelity, but if I need to align a team on layout and abstract concepts, I’m now confident in running a workshop to rapid-fire ideas and align stakeholders from other teams.
I typically jump into higher fidelity, but if I need to align a team on layout and abstract concepts, I’m now confident in running a workshop to rapid-fire ideas and align stakeholders from other teams.
I typically jump into higher fidelity, but if I need to align a team on layout and abstract concepts, I’m now confident in running a workshop to rapid-fire ideas and align stakeholders from other teams.

Check out my other work!

Check out my other work!

Slackronyms →

Slackronyms →

Slackronyms →

Slackronyms

© 2025 Clayton Harding

Reading this was a test. You passed ツ