Online Security
Portal Experience

Redesigned an online security portal experience and created a multi-platform design system

The Problem

McAfee approached ZURB to redesign their online security portal. The original experience included disjointed applications with unorganized tasks that the user was asked to complete. This did not instil joy, trust, validation nor comprehension with users and led to an overall unpleasant experience.

The Solution

My team and I discovered users don’t want a dashboard nor do they want to have to manage a dashboard. I visualized an experience that encourages engagement and upgrades in the McAfee Security Portal through a product platform concept vision.

Industry
Online Security
Role
Designer
Timeline
12 Weeks
Methods
User Research
Opportunities
Ideation Sketching
Prototyping
UX Patterns
Design System
Visual Design
Animations
User Stories

#

User Research

Define Our Audiences

My team member and User Researcher built five audiences to give us a unique look at how people in our audiences view security. Throughout the project, I constantly collaborated with the User Researcher on what concepts and designs I wanted to test with users.

#

Busy Professionals

Does not have the time to invest in making sure their networks and devices are secure.

#

Family Worry-Warts

May want to be aware of emerging security threats and stay educated.

#

Loyal Old-Fashioned

Spends a lot of time on their home devices, browsing the internet.

#

Aging and Unsure

Looks for authority figures or educated people to advise them in security.

#

Every Day Gamers

Is often asked for advice when conserning IT related topics or security.

Understand the Product Roadblocks

Our User Researcher surveyed over 3,000 users within each of our audiences and collected around 100,000 answers on how users feel about online security and anti-virus software. Here’s what the User Researcher found to help me understand the current product roadblocks and the opportunities I can discover from this.

Opening up the Problem

Explore Opportunities

I dove into Opportunity sketches to frame the problem space and open up the project to potential solutions. I presented about 50 sketches to understand our client's perspective of the problem and grasp the client's reaction to potential solutions.

Breadcrumbs to Safety
Integrated News Feed
In-control vs. Automation

User Interface Design through Ideation Sketches & Lo-Fi Wireframes

These Ideation Sketches allowed me to move forward from the Opportunities into visualizing simple UI components in sketch form as to not get too caught up in details and draw the focus towards concept and experience.

Password Update | Ideation Sketch
Level of Security | Ideation Sketch
Sidebar Control Center | Lo-Fi Wireframe

Continued User Research

A Mindset Shift

From additional user surveying our team discovered users don’t want a dashboard nor do they want to have to manage a dashboard. The current McAfee experience is composed of devices and applications that users have to manage. My Design Team Lead and I discovered the solution is to shift the mindset into a service oriented experience where McAfee protects users’ rights.

#

Understand How Users Think

With the mindset shifted to treating the experience as protecting users’ rights, I linked each step, first to written copy, then applied the content to UI.

#

What We Learned from Users

Design Principles

From user research and surveying I learned what users want, and used these 7 Design Principles to inform the new design system for McAfee.

#

Our Solution

A Design System

I created a design system with a library of patterns, visual templates and components documented and released as tools for future designers to build and maintain the new platform. The system offers guidance on accessibility, page layout, and editorial and some branding, data visualization, UX patterns, and other tools.

Below are the 6 Design Patterns I built for the design system. I documented the rules each one of these has and how they all connect to each other to form one experience.

#

Build Scenario Flows with Hi-Fi Wireframes

Utilizing our Design System and patterns, I iterated through 5 rounds of Hi-Fi Wireframes to show the details of the everyday use of the McAfee experience. Each scenario is led with a pressor of the threat or reason why the user is engaging with McAfee. The user then enters into an action, where we are helping the user improve their security, and then a reaction from the experience, and rewarding the user for their actions.

#
#
#
#
#
#

Land on Creative Direction

I explored 4 variations of Creative Direction, including typography, icons, color palettes, styling of UI elements such as buttons and forms, and imagery style. I include elements of the McAfee branding and various intensities of the McAfee branding.

#

The Timeline Approach

I explored what an experience looks like for a user within 30 seconds, 3 minutes, 30 minutes, and 30 days. This allowed me to focus on each moment and understand what’s important towards the goals within the user journey.

#

User Stories and Animations

To create these user stories, I started by writing out narratives, then created clickable prototypes in Marvel, and lastly applied visuals and created animation flows in Principle.

30 Seconds

Customers can reduce the mental overhead of managing all aspects of their personal security online with McAfee. We want to decouple security from devices with a move to the cloud.

3 Minutes

McAfee must change its product mindset from “Things you Have” to “Rights you Protect” to build trust with customers. Drive actions with user security preferences.

30 Minutes

Customers must feel they can take action immediately and receive benefit from the service. McAfee shows people how to protect their identity, keep your passwords secure and anti-virus. McAfee must unify security functions with simple threat remediation.

30 Days

Customers must feel they can take action immediately and receive benefit form the service. Build confidence in each interaction and show users their security is in good hands. McAfee must move from app features to modifying security behaviors.

#

Conclusion

Through this project, I accomplished these following goals:

  • Created an amazing experience concept for a security portal for Windows Pro/Home and Windows 10S.

  • Created a delightful experience for our McAfee users that clearly communicates to them the value of our security solutions increasing the engagement and feature activations.

  • Created an experience that can run in different form factor devices, on multiple channels, with multiple features, through different audience segments. This includes multiple complex variables that need to be taken into account to create a solution.

  • Provided a unified experience that allows the customer to live their digital life without second guessing being in control of their security and informed about the things that can get them in trouble.

  • Increased monetization of the McAfee products through increase trial to pay, increase renewals of the product, increase search revenue, improve onboarding of features, improve the lifetime of the user, and improve engagement.

  • Created a one-stop shop for users to understand how they are protected and get more protection for their digital life.


More of My Work