Malwarebytes 3

UI/ UX                SEP - NOV 2017

UI/ UX                SEP - NOV 2017

UI/ UX                SEP - NOV 2017

UI/ UX                SEP - NOV 2017

UI/ UX                SEP - NOV 2017

Malwarebytes 3 is the flagship consumer product of the Malwarebytes. As an antivirus program, it runs in the background and face time with user only happens when detections or alerts occur. Thus, by nature of the product, showing value to users is extremely challenging.

The UX researcher, who knows the users the best, identified a few key areas wherein we could show the most value: toasters, dashboard notification panel, and reports.

The UX researcher, who knows the users the best, identified a few key areas wherein we could show the most value: toasters, dashboard notification panel, and reports.

MB3 dashboard

Redesigning Toasters

According to the UX Researcher, users reported that toaster notifications was one of the most effective methods through which they knew Malwarebytes 3 was on their computer.

Usability tests conducted on existing toasters demonstrated legibility problems.

To address legibility issues. We redesigned them so that users will have an easier time seeing the value that we bring to their computer when we stop a threat and when they get a reminder to upgrade to premium.

Our users tend to be older and reading white text on a bright colored background was definitely an eye sore.  In the redesign, we kept the color scheme of orange, red, and green, but defaulted to black text.

Working with User Researcher, I came up with three designs and we tested them for recall. 

The UX Researcher opted to test for recall. He showed users the three different toasters for X seconds each, and then asked users to recall what was written on the toasters. To provide a realistic context, I put each toaster on a different types of Windows desktops.

1920
toaster on desktop

The results showed that the second design tested highest for recall.

colored side bar toaster

55% accuracy of recall

colored side bar toaster with half bar

68% accuracy of recall

Colored Branding Bar Toaster

62% accuracy of recall

After we agreed that the second design was the one to go with, I designed a few different templates to account for different numbers of call-to-action buttons and localization (Russian and German are always quite long).

Dashboard Notifications

Toasters go away after a few seconds, so we needed a way for users to access the ones they missed. To accomplish this, we decided to have a dashboard notification center to capture various notifications.        

Dashboard notification

Note the visual difference between new and read notifications

Dashboard notification

A light blue background for hover state

Dashboard notification

Clicking on a notification item brings up the associated toaster

After talking to stakeholders and the product manager, we decided to implement this in the next release and have the individual notification line items bring up reports and/or quarantine events (instead of having the toasters reappear).

Reports

Reports are summaries of scans and detections. The problem was that they were laid out in a fashion hard for users to digest, without obvious rhyme or reason for order and categorization.

Original Scan Report

Existing layout for a scan report

original ransomware report

Existing layout for a ransomware protection event

The UX Researcher provided insights, from user interviews, on how people preferred to digest reports. I leverage these insights in a redesign of the system reports, with a slightly different layout for different types of reports, ranging from scans to malware blocked.

In existing reports, all non-scan reports were called Protection Events. But there are numerous different types of protections. In the new reports, we renamed each report by the type of event - scan, malware, exploit, ransomware, and web.

Scan report - no threats

Scan report

Malware blocked

Malware blocked report

Exploit blocked

Exploit blocked report

Ransomware blocked

Ransomware block report

Report_ Web Blocked

Web block report

To allow for persual of reports, we grouped all the important information in a summary tab and put the details in an advanced tab. 

For scan reports with detections, there are usually numerous threats detected. I designed the header row to be fixed as users scrolled through the table. Users have the ability to reorder columns. To demonstrate this affordance to users, I designed the cursor to into a move icon upon  the user hovering over the header row. 

Report summary tab

Scan report: summary tab

Report_ Scan_No Threats_Advanced_2 col

Scan report: advanced tab

THANK YOU FOR VISITING

THANK YOU FOR VISITING.

THANK YOU FOR VISITING