MCAFEE VPN
Revamping McAfee's VPN to make invisible protection feel clear and contextual.
With Susanna Huang, Nina Wang, Jeffrey Jose & Jen Barrell.
CONTRIBUTIONS
Design Documentation Component Creation
Prototyping
Workshop Facilitator
TIMELINE
Nov — Jan 2024
TOOLS
Figma + Figjam
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 steal passwords, credit card details, or private messages.
And yes, it can also let you stream European Netflix…
Name: Clayton Harding
IP Address: 2948JHDD387
Browsing history: Yep that too
UNKNOWN USER
PROBLEM
"It's on, but I don't know what changed, is it doing something, I'm so confused?"
Unlike security software that shows what dangers they stopped, VPNs work by making you invisible to threats, making it difficult to show their value.
Without a clear purpose, we saw a decline in users renewing their VPN subscription
Image
McAfee's Current VPN design
"trust us, we'll keep you safe" was not enough.
People need to see the protection to feel protected.
Image
McAfee's Current VPN design
OPPORTUNITTY
We need to better communicate how our VPN is protecting the users privacy → contextual to when they use it.
LONG TERM GOAL
We hypothesize that with proper context, users will instinctively
activate their VPN when a network feels unsafe
→
"This airport WI-FI seems sketchy,
I should turn on my VPN just in case"
EARLY APPROACH
Step 1
Fill our knowledge gap talking to subject matter experts.
and fill in the knowledge gaps we don’t have, back it with qual/quant data.
Step 1
Audit our existing flow, where can we do better?
and fill in the knowledge gaps we don’t have, back it with qual/quant data.
Step 1
Build around new flow, rapid fire prototyping.
and fill in the knowledge gaps we don’t have, back it with qual/quant data.
TALKING TO EXPERTS
We narrowed our scope based on 3 key insights.
TunnelBear is partnered with McAfee, allowing us to draw on past explorations and high-level findings. We took note of shared problems and dived deeper into what explorations were abandoned and why, so we don't repeat the same mistake.
Our intention wasn't to imitate their product, but break down their approach into high-level themes we can explore when we design.
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.
Many think it's just for watching geo blocked Netflix…
Provide better education to what VPN is capable of, without too much technical jargon
VPNs do more than flip ON/OFF. Server selection, Split tunneling, Kill switch, Auto-connect, DNS customization. Even if it's only popular for power users we need to make it accessible for them.
Personalize the VPN to our users needs (newbies and power users) by making it easier to find and set up advanced features like "split tunneling" or choosing trusted networks.
User flow breakdown
I hosted workshops to see where we can best implement our new insights, this was our "AHA! moment"
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.
Image
Old: Showing information only before making a purchase
Improving the flow
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
Sketching isn't normally part of my workflow, but it's a great tool to work more collaboratively with non-designers who aren't comfortable with Figma, letting everyone contribute their ideas.
Image
A few sketches that drove discussion
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 those concepts into the final deliverable.
In the end, It clearly influenced our final designs. (compare below)
Interactive
V1 Sketch compared to final output
Our Solution
Fresh onboarding and core experience where help is always within reach.
Testing with users
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.
Image
Old: Connect to fastest regardless of country
Image
New: Showing country + fastest indication
REFLECTION
Despite the internal hype, priorities changed and the revamp was shelved. But my learnings shipped.
Everyone hates reading, but love conversational writing.
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.
Sketching is for starting discussions, not beauty contests.
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.
© 2025 Clayton Harding
Reading this was a test. You passed ツ