Mozilla Monitor Plus

2024
Product Design

Monitor empowers users to take control of their data. We actively scan data broker websites, where personal information is often sold, and vigilantly monitor for potential data breaches, promptly alerting you if your data is compromised. Additionally, Monitor provides the functionality to remove your information from data broker sites and delivers clear, actionable steps to minimize the impact of data breaches.

Project Overview

My role

As the lead designer, my responsibilities included generating initial concepts, facilitating design workshops and weekly team meetings, providing presentations to leadership, and delivering finalized assets for production.

Team: 1x Product designer (me), 1x Content designer, 1x Researcher, 1x PM, 2x Frontend developers, 5x Backend developers

Responsibilities : Product Design to Engineering Handoff

Timeline: 8 months

Website: Mozilla Monitor

The Challenge

To date, Mozilla Monitor has been offered as a complimentary service with close to 10 million sign-ups. Introducing premium protection features in Monitor will not only allow us to enhance our impact on customers' lives but also generate additional revenue for the company.

Our challenge is Mozilla wants to expand revenue opportunities by providing enhanced protection options to current Mozilla Monitor customers, including 10 million worldwide, with 4.7 million based in the US. We also need to establish a seamless onboarding process into the Security and Privacy ecosystem.

A few user pain points:

Help me protect my identity from being compromised or stolen.

Help me not be the victim of a doxxing attack.

Help me better understand the trends and what is happening in the privacy space, and with my data.

Help me feel better about protecting my privacy and lower the amount of fear/anxiety I might have.

Help me figure out if I was impacted by the breach I just heard about and what I can do about it.

Help me know if my personal data is on the web and remove my personal data from the web

The Solution

Monitor Plus has been launched for our US customers. With Mozilla Monitor Plus, we now have the capability to remove your information from data broker sites and provide you with clear, actionable steps to mitigate the effects of data breaches.

The Outcome

Within a week, there has been a notable increase in both Monitor Plus subscribers and free users.

Plus Subscribers: 2,104 (+131 6.6% Increase)

Free Users: 10,581,818 (+1,538 .014% increase)

Retrospective

Following the launch of Mozilla Monitor Plus, we exceeded our first-month goal within the first week, marking a promising start for us and validating the feedback received from our users. Building on this success, we are now embarking on a new project aimed at assisting individuals in removing leaked or sensitive material from the internet. Additionally, we are committed to ongoing iterations of Mozilla Monitor, with plans to introduce new features in the coming months.

Discovery

Committed to ensuring that the new Mozilla Monitor experience aligns with customer expectations, we conducted five rounds of user interviews. The insights gathered from our users were invaluable during this early development phase. Conducting interviews with users to understand their needs, goals, and pain points. Here are some key takeaways from our users:

Prioritize meeting users where they are

Offer an easy-to-use solution

Provide the ability to receive reminders

Our research revealed that we needed to focus on our Vulnerable to Exposure segment as they have a an acute need for Monitor. They will do anything to get their data offline. 17% use data breach alert service, 16% use Data removal service, and 29% use identity theft monitoring services.

Original Firefox Monitor Design

UX Challenges

An essential focus for me was ensuring users could navigate the product seamlessly. I created user flows to visualize the structure and flow of information within the product. Mozilla Monitor encompasses three distinct user groups that required tailored design considerations: Current Users in the US, Returning users in the US, and Users across the globe from diverse countries. These user flows helped us create the right flow for a user to navigate the product.

Setting the design direction

We adopted a top-down approach to establish the overarching structure of the experience. Through sketching and storyboarding, I generated numerous concepts regarding the organization of UI elements, functionality, data components, and interactive behaviors. Starting from a broad perspective, our vision gradually evolved into a tangible concept. We began to assemble a high-level design language, interactions, and Monitors framework, bringing everything together cohesively.

Early sketches of different dashboard and graph treatments.

Wireframing

I created low-fidelity wireframes to explore different layouts and interaction ideas. This helped us visualize the layout of the design plus allowed us to start on designing the content.

Prototyping

I created a few interactive prototypes to simulate the user experience and gather feedback early in the design process to allow us to make any changes we thought would help the user. These prototypes helped us give the users a simulation of the flow of the product and how it would work.

Visual design

Following the creation of wireframes that guided the design's structure, I developed high-fidelity mockups that were visually captivating and effectively conveyed Mozilla's brand identity, enhancing the overall user experience.

Interaction design

Created intuitive and engaging interactions, such as navigation menus, buttons, and animations.Defining user interface patterns and guidelines to ensure consistency across the product. We discovered that small micro-interactions add delightful touches of creativity and provide users with moments of excitement.

Usability testing

Our research team created test scenarios and tasks for users to complete while interacting with the newly developed design.

In general, users found the new Mozilla Monitor product to be highly rated in terms of ease of use and satisfaction with results. They believe the price aligns with the service offering, but some mentioned considering periodic payments every few years for "bulk data removal."

The Impact

Since its release on February 06, 2024, Mozilla Monitor Plus has garnered significant positive feedback. Users have praised the new features and the streamlined redesign.

Plus Subscribers: 2,765 (+661 31% Increase)
Free Users: 10,590,924 (+9,106 0.08% Increase)
Google Lighthouse score 97
Monitor Plus subscriber growth has surpassed the month of February forecast of 2,400 by 365 subscriptions.

What the Community is saying

Here are several articles covering the release of Mozilla Monitor:

Continuous Improvement

We are committed to continuously monitoring user feedback and analytics to pinpoint opportunities for iteration and enhancement. Additionally, we will persist in refining designs based on user input, shifting requirements, and evolving business objectives. Presently, our focus is on advancing P2 objectives and implementing accessibility updates.