Overview
Letting AI figure out your tax needs
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.
I assisted with early research, feature planning, contributing new components to our design system, collaborating with inside and outside stakeholders, and built functioning prototypes and demos for leadership shareouts.
Timeline
Nov—Jan 2024
Device
Mobile
Desktop
Credits
Susanna Huang
Nina Wang
Jeffrey Jose
Jen Barrell
Problem
"It's on, but nothing happened,
is it even working?"
When users turned on our VPN for the first time and saw no immediate value, they abandon the tool
The general population aren't familiar with VPNs yet, so they fill in the gaps with their own assumptions about what it should do. When it doesn't match those assumptions, they feel cheated and opt not to renew their subscription.
Being 1 of 13 tools in the ecosystem we only get a short window to educate, onboard, and prove it's value. This is how it felt
Research
How did simplicity backfire?
Reading through 200+ support tickets and my own experience using the tool, I grouped the most common pain points that we could realistically take on.
Lack of product education
We explain what a VPN does only before purchase. After that, it's unclear how to select a server, what to do after turning it on and when you should turn it off.
How do I troubleshoot?
Your connection could be blocked for many reasons, and when coming back to the app, your only option is to turn it off and on again.
Hidden features
Advanced customization options are hidden several layers deep in settings.
Poor visual feedback
When turned on, there's no visual change to the browsing experience, which makes it feel like you're no safer than you were without it.
Make this flow shrunk, and add screens on the 2 highlighted bits with highlights on the problematic stuff. Maybe split into 2 flows, "education / purchase" and In product issues.
OR show the same flow, but highlighting different parts with the primary screen under it with the pain points called out again pointing to the issue.
I sat down with TunnelBear to see how they resolved similar issues
VPNs applications are all pretty similar, basically being a big button,so I looked at unique ways TunnelBear built a memorable experience.
WHAT I LEARNED:
Language matters, put it in words a human can understand
How to show proof, without hard metrics (motion, reinforcing the idea of safety)
Information is always availible on website, youtube and in app
Hypothesis + design principles
Over time, we anticipate users will instinctively recognize when to turn on their VPN when they feel unsafe. "This airport WI-FI seems sketchy, I should turn on my VPN, just in case"
Principles
Since knowledge is low, education should be present everywhere, holding their hand at every step from intro, to setup, to their first activation.
Proactive notifications not only catch problems before they happens, but train the users awareness of safe vs unsafe networks. Also can fix broken connections or troubleshoot when a site blocks it.
Motion shows activity, we can't prove its working through metrics, but we can show it's working through movement.
Hypothesis
Over time, we hypothesize users will instinctively turn on their VPN when a connection feels unsafe. "This airport WI-FI seems sketchy, I should turn on my VPN, just in case"
From what we have
Lack of product education
Ideal state
Education should be present everywhere, holding their hand at every step from intro, to setup, to their first activation.
Early Designs
Group sketching clarified our components and layout.
I challenged my negative bias against sketching.
Sketching isn't normally part of my workflow, but I found it to be a great vehicle to work collaboratively with non-designers who aren't comfortable with Figma, letting everyone contribute their ideas and align on ideas early.
An unusually short iteration process
After each round of sketching we would present ideas with our rational that let us build off each-others ideas in the next round. You can see how little changed when the team was satisfied with the early wireframe.
Design decisions
Step 1: Education at every step
With the new onboarding, the first time a user connects it's a perfect success
Step 2: Detecting danger first, and training behavior
Sending notifications the moment we detect unfamiliar wi-fi. 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
Motion makes it feel alive
Before it was just a light switch like an option in settings. But with a little motion it gives a totally different vibe
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore .
Testing
Micro-copy matters
It wasn't clear what "fastest" meant. But we did see people complete onboarding and retain info, matching our model
The general public don't fully understand VPNs yet, so they fill in the gaps with their own assumptions about what it should do. When it doesn't match those assumptions, they feel cheated and opt not to renew their subscription.
Being 1 of 13 tools in the ecosystem we only get a short window to educate, onboard, and prove it's value. This is how it felt
"This is a customer quote that explains what they thought fastest meant and assumed incorrectly"
Reflection
Despite the internal hype, priorities changed and the revamp was shelved.
In my research, ETC Missing parts, hidden features and an oversimplified UI that killed engagement that all contributed to the product failure
Write like a human, not a business
Balancing what we as a business want users to know V.S what a user actually retains is a difficult line. This project helped me learn how to use metaphors on boring language into legible content.
Sketching isn't a waste of time
If I find myself needing to align a team on layout and abstract concepts, I feel confident that I can use sketch workshops now confident in sketching to rapid-fire ideas and align stakeholders from other teams.
Building for trust
I recognize that designing to earn trust is a slow process and cannot be tracked via a single metric but rather by a combination of design empathy and user vulnerability.
Up next
Teaching Slack your work lingo
© 2025 Clayton Harding
Reading this was a test. You passed ツ