Matt Bordey

Layout updates in the McAfee design system

McAfee

Helping McAfee's pages show what McAfee+ protects, and which plan fits

Role
Product designer
Industry
Cybersecurity
Contribution
Layout updates, components, localised pages
Platform
Web, display ads
Identity protection hero carousel: one product, one price, the features underneath

McAfee already had the designs, the brand and a design system. The pages needed new layouts: heroes, product pages, a plan comparison and banners, for the US, the UK, the Netherlands and Canada. Every change had to stay inside the system, using its type, colour and components. So how do you make a page clearer when the parts are already set?

We worked from the existing designs and changed the layout, not the look. The heroes put the protection on screen, a scan score or a blocked scam on a card over an everyday photo. The stat cards were laid out in a few styles, so each page could pick one. The product pages lead with one promise and a price, then the features. The pricing table lines the four plans up row by row, so the differences stand out. The same messages carry over into the display banners.

Scam protection heroes, one message per slide, each with a live stat
Stat card styles: donut, vertical and progress cards
Stat cards in three styles, so each page can pick one
McAfee+ Advanced product page
Product page, McAfee+ Advanced: the promise and the price first, then the features