Malwarebytes  for  iOS 1.2

Malwarebytes  for  iOS 1.2

UI/ UX                SEP 2018         Lead Designer

 

UI/ UX                SEP 2018         Lead Designer

 

UI/ UX                SEP 2018         Lead Designer

 

UI/ UX                SEP 2018         Lead Designer

 

UI/ UX                SEP 2018         Lead Designer

 

Before I became a UX designer, I thought a product was done as soon as it had shipped. Boy was I wrong! Even before 1.0 shipped, we were working on feature and usability improvements for the next release.

After releasing 1.0, we got some great user feedback. Leveraging this and some UX backlog items, we shipped 1.2 with quite a few changes. Some of the initial design designs that were nixed in 1.0 were brought back. 

A compilation of changes in 1.2
Reporting a number
Reporting a number

In 1.0, we were urged by the executives to put the report and allow functions into settings; the assumption was that the app would work so well that this level of customization wasn't needed. However, our database of scam numbers is small and crowd-sourced, and there is no way we could catch all the scam calls.

After the release of the app, users complained that it was hard to report a number. Users didn't know they had to go to the settings tab to report a number.

I came up with several options to make it easier to report a number. Some tested better than others and the ones that worked were included in the 1.2 release.

1. Emphasize the "share" shortcut

There is actually a shortcut to report a number through the native iOS phone app's share extension. However, it's so cumbersome that we didn't really call it out. 

In 1.2, I called out the share shortcut on the app screens users access to report scam numbers to us. The call out is linked to a step-by-step guide on how to use this share shortcut to report numbers.

 

report a number article

2. Bringing Report back to the navigation

2. Bringing Report back to the navigation

The UX Researcher and I also thought that the original navigation of the application, which included "report" and "allow", might work best. 

We wanted to see what happens when the app is localized to Russian and German, typically longer languages, especially on smaller devices such as the iPhone SE.

5 item nav in Russian on iPhone SE
5 item nav in German on iPhone SE

Because the localized navigation labels are tracked so tightly on an iPhone SE, I thought perhaps a 4-item navigation would work better. 

There were two ways to achieve this:

  • Move help into settings
  • Move settings to the dashboard

Because this was a relatively new application, we wanted to make sure help was readily available. Thus, after some validation testing, we decided to move settings to the top right corner of the dashboard. 

We shipped version 1.2 with dashboard, allow, report #, and help on the bottom navigation.

Final Premium dashboard in 1.2
Settings
Final allow screen in 1.2
final report screen in 1.2
final help section in 1.2

The cutting room floor

The cutting room floor

From my experience, a designer's time is often spent on work and solutions that never ship, often for good reasons!

There were several other solutions that I considered in trying to make reporting a number easier, but they didn't make the cut. 

From my experience, a designer's time is often spent on work and solutions that never ship, often for good reasons!

There were several other solutions that I considered in trying to make reporting a number easier, but they didn't make the cut. 

Report and allow shortcuts

Report and allow shortcuts

In many of the validation tests, when we asked users "where would you go to report a fraudulent number?" many of them tapped on the call protection module.

This made me think perhaps we should also add a shortcut to report a fraudulent number in the call protection module. 

validation testing heat map
Going from dashboard to customize protection

The idea is that when users tap on "customize protection", they will also see shortcuts to allow and report numbers.

Because allow and report are opposite sides of the same functionality, a shortcut for one necessitated a shortcut for the other.

But the interaction didn’t feel right; the keyboard should be on the screen as anticipation of the user's intent but would pressing "cancel" just plop the user back onto the customize protection screen? That seemed a bit abrupt.

Also, the allow screen and report a number form look so different.

Yet, if the report shortcut only took users to the report screen (with all the previously reported numbers and a button to access the report form), then the shortcut would be somewhat useless. 


Allow shortcut from customize protection screen
Report shortcut from customize protection screen

Adding a Report button

Adding a Report button

Besides calling out the share extension through the native iOS phone app, I also wanted to emphasize the report functionality inside the app. To do so, I considered adding a button to the dashboard.

Free user dashboard in 1.0

Original dashboard design

Original dashboard

Original dashboard design

Free user dashboard with report button

Adding a report button

The problem with this solution is that it pushes the free features below the fold, especially on smaller phones such as the iPhone SE. 

After getting feedback from fellow designers on how to solve this problem, I delayed the button with a simple animation, thus showcasing the items that would fall beneath the fold.

The button would only animate in when users first return to the application, not every time they come to the dashboard from another screen (that would be very annoying). 

Ultimately, the UX Researcher and I decided against this solution as it would take easy access to the free features of the application, thereby downgrading the value of these free features even more. 

Adding a Report icon

Adding a Report icon

Another solution was to add a "report" icon to the top right corner of the dashboard. The challenge was to pick an icon that signified "report a fraudulent number". 

I tried a whistle, bullhorn, siren, and even a police man. When we put these in front of users and asked "how would you report a number in this app", none of these worked very well. 

Dashboard with whistle icon to report a number
Dashboard with bullhorn icon to report a number
Dashboard with siren icon to report a number
Improving the help tab
Improving help

In 1.0, we tried to give users many ways to find help. It quickly became a laundry list, making it difficult to use. 

In version 1.2, to address this issue, I decided to segment out the info by natural groupings.

Because the about the company information isn't especially needed or helpful,  I moved it to be accessible from an (i) icon on the top left corner of the help screen. 

Help screen in 1.2
About screen in 1.2
Other improvements
Other improvements

As cliché as the saying "design is never done" is, it's nonetheless true.

Based on user feedback and a backlog of usability issues, there were a few other improvements we made to the application.

Clarifying instructions

Clarifying instructions

On an iPhone SE, the note about “Due to iOS limitations, we can’t tell if SMS filtering is turned on” was not above the fold.

In version 1.2 of the ap, I made it more apparent by moving the note above the fine print. 

1.0 SMS filtering explanation screen

original layout

Improved SMS filtering explanation screen

moving the note up

I also added a toggle GIF to the instructions page of Text Message Filtering. Because we can’t detect whether this feature is on or not (and therefore can’t display its status in the app), we wanted to make it extra clear to users how to turn it on.

I purposefully blurred the background so that users view this as a graphic instead of an actual toggle. 

1.0 SMS filtering activation instructions
Improved SMS filtering activation instructions

Adding more affordance

Adding more affordance

In 1.0, the "restore previous purchase" button was in grey text. Some users couldn't find it. Thus, I made it a blue text link the 1.2 release.

Improved restore previous purchase link in blue
Original restore previous purchase link in grey

Increasing legibility

Increasing legibility

Throughout the app, I had used a 88% opacity white background as a backdrop for text elements on a visual backdrop, so as to allow some of the imagery behind to show through.

Some users mentioned they found the text hard to read; thus, I increased the opacity of the white background to 94% to make the text more legible.

Original dashboard with 88% opacity on white background of protection module

Original 88% white background

88% white background

Updated dashboard with 94% white opacity

 94% white background

Original dashboard with 88% opacity on white background of reported numbers list

Original 88% white background

88% white background

final report screen in 1.2

 94% white background

Shortcuts through 3D touch

Shortcuts through 3D touch

iPhone 7 and above devices have 3D touch functionality. For these users, I added shortcuts to two of the most common ways users interact with the app - report a number and allow a number. 

3D touch shortcuts to report and allow a number

THANK YOU FOR VISITING

THANK YOU FOR VISITING.

THANK YOU FOR VISITING