Personal Protection

McAfee2020–2021

Designing the service meant to succeed McAfee’s flagship antivirus product, built around privacy and identity for a younger audience without losing the one it already had.

The dark web check in onboarding, finding an address in three breaches before the app is set up. Illustrations by Sabrina Smelko.

Antivirus was losing the customers McAfee needed next

McAfee built its business on antivirus, and the ground under it was moving. Closed operating systems like macOS, ChromeOS, and Windows 10 S made device protection less necessary, people did most of their browsing on their phones, and the risks they actually worried about had shifted to privacy, identity theft, and data breaches. COVID pushed more of life online and increased risks rapidly.

Personal Protection was the company’s answer: a service meant to become its next flagship platform, protecting people’s identity and privacy rather than a single device. It had to win younger customers, who saw antivirus as optional insurance, without alienating an existing base that skewed older and less technical. And it had to do that as the company best known for pop-ups.

The first release was two services, identity monitoring and a VPN, across iOS, Android, and Windows. Everything we designed also had to hold a growing list of McAfee services nobody could fully specify yet.

Earning attention instead of demanding it

I joined a team of five designers, including our design lead, which grew to eight by the beta. I worked across the experience end to end: onboarding, authentication, dark web monitoring, the VPN, settings, and product messaging. Three decisions did the most to shape the initial product.

Prove value before the first screen

Onboarding used the email someone registered with to show which known breaches they were already part of, before they ever saw the interface. The VPN was the other candidate, but its value was most notable on an unsafe network, so it couldn’t make the case up front. The breach check meant asking for authentication earlier, and it tested well enough to become the core of onboarding.

One contextual dashboard that every service plugs into

Instead of a screen per feature, I designed a card-based dashboard that surfaces whatever is most relevant to someone’s situation in the real world, with templates any current or future service could adopt. The cost was committing to patterns before every requirement existed, so we went back to older flows as the product grew.

Ship the safe visual direction, then come back for the right one

Our early visual exploration was cut short by delivery commitments. Rather than stall the build, we shipped the conservative option on the understanding that we would revisit it, and I kept the case for a new direction alive until it was sponsored.

Protection that shows up when it matters

Our principles came from paper wireframes we tested with strangers in the coffee shop downstairs: be contextual but unobtrusive, build trust and educate, demonstrate value up front, and celebrate wins along the way. My group’s concept, a VPN that secures you automatically when it detects an unsafe network, went into the product.

Setting up the VPN the first time unsafe Wi-Fi is detected, from the lock screen warning to the VPN button on the Dashboard. Illustrations by Sabrina Smelko.

The dashboard, services page, and settings I designed became the product’s foundation, built mobile first and scaled up to desktop. The VPN was where the platforms diverged most: Windows needed little, while iOS privacy rules and Android location permissions each demanded their own flow. I leaned on our engineers to map those differences and wrote them into the documentation.

Mobile flow map
Desktop flow map
Every path into VPN setup, mapped for mobile and desktop.
Mobile flow map
Desktop flow map
Identity protection setup and the breach list, on mobile and desktop. The full maps also cover six remediation paths and adding a phone number.

Later in the cycle I participated in a ground-up visual redesign with three other designers, sponsored by our VP of Product. In six weeks we redesigned the UI of every flow, simplified the card types, built service tiles that could scale, and set spacing rules for every screen template. I storyboarded an illustration system and tested it with users, which showed that the right illustration lifted comprehension in onboarding and the wrong one hurt it. It shipped as a branched UI library with a style guide the team could build from.

The app intro, turned by the handle on each slide. Illustrations by Sabrina Smelko.
Style guide
The style guide I wrote for the redesign, from app structure and layout rules to buttons and common patterns.

A 91 usability score, and a direction the company adopted

Before the beta, our research team ran a System Usability Scale study on a realistic prototype I built. It scored 91 out of 100 against a B2C software average of 74, and held within 6 points 95% of the time across 13 replications. The same study found our biggest friction point, adding a second device, and showed that content strategy drove much of the score.

The public beta reached about 8,000 installs with little marketing. 80% of people finished onboarding against a 90% goal, around 60% enrolled in identity protection, and 80% of survey respondents said they felt more protected after a week. Three-day churn was still 54%, down from 75% at launch, with parts of the experience yet to ship.

The visual direction outlasted my time on the team. It became the foundation for new McAfee products, and existing apps began adopting it too.

One thing I’d change: letting people jump from onboarding straight into fixing a breach felt empowering, but it left them at a dead end with no path back to the dashboard. I’d design the way back before the shortcut.