MCAFEE VPN
Rethinking how invisible protection should feel clear and personal.
McAfee's VPN is a standalone service that's often packaged with other security services in their protection plans. As the product lineup evolved with regular updates, VPN was falling behind. A full redesign was initiated to address long standing pain points and outdated UI.
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.
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 geo-blocked TV shows from other countries you normally can't see.
Name: Clayton Harding
IP Address: 2948JHDD387
Browsing history: Yep that too
UNKNOWN USER
PROBLEM
"Nothing changed, how do I know it's working?"
Unlike security software that shows what dangers they stopped, VPNs work by making you invisible to threats, making it impossible to verify their value. Without a clear reason to use their VPN, subscription renewals frequently lapsed.
Image
McAfee's Current VPN design
Image
McAfee's Current VPN design
OPPORTUNITTY
We need to better communicate how our VPN is protecting the users privacy, contextual to their situation.
LONG TERM GOAL
We hypothesize that proper context will lead users to instinctively activate their VPN whenever they feel unsafe on a network.
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
With our new insights, I hosted workshops to break down our current user journey and ideate where we can do better.
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
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
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
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
Personal reflection
Everyone hates reading, but they hate it less when you stop speaking 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.
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 ツ