McAfee VPN Revamp
Revamping McAfee's VPN to make invisible
protection feel clear and contextual.
McAfee's VPN is one of many security tools, often bundled in protection plans. Over time, the tool had fallen behind as updates rolled out to newer products, and was not being maintained by a dedicated team.
My role
To address long-standing pain points and it's outdated MVP, I assisted with early research, feature planning, and end-to-end designs.
TOOLS
Framer
Figma
TIMELINE
Nov—Jan 2024
Media
visit the website
Extra context
FYI, a VPN masks your location and keeps online activity private
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
First-time users found their VPN confusing and didn't know what it did
This led to low adoption-rate and lapsing subscriptions
To the general public, VPNs are still relatively unknown tech, so when anyone stumbles into the tool, it's likely their first time interacting with a VPN.
Since this is part of a bigger ecosystem, the time we have to educate, onboard and show immediate value proved to be our biggest challenge we faced.
Lapsing subscriptions
Without a clear purpose, we saw a decline in users renewing their VPN subscription
Old interface needed face lift
The old UI was made for an MVP and is using legacy assets
Lack of product education
We know from the flow that there is a lack of education on what a VPN does, when to use it etc.
We need to better communicate how our VPN is protecting the users privacy → contextual to when they use it.
Unlike security software that shows what dangers they stopped, VPNs work by making you invisible to threats, making it difficult to show their value.
Over time, we hypothesize users will instinctively turn on their VPN when a connection feels unsafe.
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 Research
I sat down with TunnelBear, a lead VPN service, to learn how they overcame a similar problem.
Narrowing our focus to 3 key insights
Through a partnership between TunnelBear and McAfee, I reached out to their leadership team to discuss past research and high-level findings. I 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.
Early Research
I looked at where we could best adopt our new insights
Dude, where's my onboarding?
After upgrading your plan to include VPN, you get no additional setup or help understanding how to use the VPN, even if it's just a button, if you don't know what it's doing when you turn it on, it's worthless.
This is where the past minimalist approach failed, assuming users knew what the product did and expected that a toggle button was self explanatory.
Rebuilt for both power users and newbies with personalized onboarding, and spotlighting previously hidden 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.
Early design planning
Group sketching clarified our components and layout.
I challenged my negative bias against sketching.
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
4 rounds of rapid sketches and 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 those concepts into the final deliverable.
In the end, It clearly influenced our final designs. (compare below)
Interactive
V1 Sketch compared to final output
How do you visualize something that you can't prove?
Unlike security software that shows what dangers they stopped, VPNs work by making you invisible to threats, making it difficult to show their value.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Unlike security software that shows what dangers they stopped
1/3
How we tightened up the motion, spotlight the fun features in these sections
Unlike security software that shows what dangers they stopped, VPNs work by making you invisible to threats, making it difficult to show their value. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur.
2/3
This is when I talk about how we put more of a spotlight on the education
Unlike security software that shows what dangers they stopped, VPNs work by making you invisible to threats, making it difficult to show their value. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur.
2/3
This is all about the extra features, finally showing the hidden gems
Unlike security software that shows what dangers they stopped, VPNs work by making you invisible to threats, making it difficult to show their value. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur.
User Testing
Qualitative reactions were overall positive, except for 1 constant confusion- server selection
Is this my country or is this a setting?
Through a partnership between TunnelBear and McAfee, I reached out to their leadership team to discuss past research and high-level findings. I 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.
REFLECTION
Despite the internal hype, priorities changed and the revamp was shelved. But my learnings shipped.
Everyone hates reading, but they love conversations.
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 ツ