Recovery Key: Elevate Awareness for Better Security

Safeguarding user data with recovery key

COMPANY

Mozilla Account

ROLE

Product Designer

EXPERTISE

Product Design

YEAR

2024

Project description

Mozilla Account emphasizes the importance of having a recovery key for users who sync their Firefox browser data. By raising awareness about downloading a recovery key, Mozilla helps prevent data loss and enhances the user experience, ultimately contributing to higher user retention.

Role & Responsibility

In my role as a product designer on the Mozilla Account team, I led a collaborative project working closely with a content designer, engineers, and a project manager. Reporting to a design lead who encouraged creative exploration, I conducted a comprehensive design audit, analyzed other account products, sketched wireframes, and developed high-fidelity mockups. Throughout the project, I maintained open communication with the team, integrating their feedback and ensuring the feasibility of achieving project success.

Timeline & Scope 

We spent about 1 to 2 months finalizing the UX and delivering a high-fidelity design to the engineering team.

Process

I approached this project using the Double Diamond process, a widely recognized method in product and UX design. This strategy always keeps me on track, helping me stay focused and organized while working within tight timeframes.


Discover

Background

Today's internet users expect uninterrupted access to their online accounts and saved data, and this applies to Mozilla account users as well. Customers who frequently use Firefox as their default browser rely on their browser data, such as passwords, bookmarks, history, and credit card information, for a seamless account experience.

However, the Firefox research team has identified a significant risk: many Mozilla account users could lose their browser data during a password reset if they do not have a recovery key or synced devices. Downloading a recovery key is crucial, especially for those who store their Firefox data. This unique 16-letter code is the only way to retain the current encryption key during a password reset if they forget their passwords. Without it, their data is wiped from the cloud.

Despite previous improvements to the recovery key process to boost user engagement, user awareness remains low. Over the past three months, there have been 5,500 password resets per day, and only 0.5% of them utilized a recovery key. This indicates a clear need for the account team to develop a new strategy to encourage users to download a recovery key. Doing so will help retain customers and strengthen their trust in the Mozilla brand.


Existing pattern

I began with a UX design audit to gain a deep understanding of the recovery key concept and the current design flow. First, I investigated where users could initiate the process of downloading a recovery key. I found that the only way to generate the key was through the account settings page.

Next, I examined the current 'Password Reset' flows. The Mozilla system can distinguish between users who have downloaded a recovery key and those who have not. Users who have saved this unique 16-digit key can enter it during the password reset process to safely protect their data. Conversely, users who have not downloaded a recovery key will lose their saved browser data if they reset their password.



Here are the steps of 'Forgot my password'.

  1. Click Forgot your password?.

  2. Write your email address and click Continue.

  3. Retrieve the 8-digit code from your email.

  4. Enter your confirmation code and click Continue.

  5. Enter your Recovery Key and click Continue.

  6. Create a new password.

  7. Download your new recovery key.

An interesting finding was that users with a synced device, where their browser data is locally stored, do not lose their data even without a downloaded recovery key. However, this scenario is not common for all users, and I cannot assume that many users will sync their data across devices.

Additionally, I am questioning that “aware” account users may still not take intentional action to download a recovery key because they trust they will never forget a password or have their own password manager such as 1Password.

Recap

  • Mozilla users risk losing their Firefox browser data during a password reset if they do not have a recovery key.

  • Many users are unaware of the recovery key and its importance.

  • A small portion of users have synced devices, where their local data is connected to another device.

Learning from other companies

I began by researching strategies employed by other companies to increase awareness of important messages among their account users. Through this market research, I discovered several effective approaches. One general strategy is the use of prominent banner messages on the account settings page. These banners are often highlighted with eye-catching icons, vibrant colors, and clear, concise content to immediately capture the user’s attention.

In addition to banner messages, I found that many brands employ real-time notifications. These notifications are designed to remind users to perform specific actions, leveraging timing and repetition to effectively prompt user engagement and ensure the message is seen multiple times.

Moreover, some companies integrate important information directly into the sign-in process. This ensures that users encounter critical messages right when they access their accounts, making it less likely for the information to be overlooked.



Analyzing these strategies provided me with a deep understanding of current UX trends and best practices in user communication. This research was crucial in shaping the next stages of my design process, including concept sketches and refining user interaction flows.

Define 

Problem

How might we increase user awareness about the importance of downloading a recovery key to safely protect their Firefox data and encourage them to take action?

Proposed approach

  • Enhance awareness by providing clear and concise messages.

  • Increase awareness through frequent notifications.

  • Encourage users to download the recovery key with simple, easy-to-follow steps.

Develop

Design explorations

My first strategy was to adopt a universal pattern that has proven effective for other companies, increasing the probability that users would read about the importance of downloading a recovery key. I started by sketching my initial idea, which involved placing a prominent banner message on the account settings page. This banner would be designed with eye-catching icons and colors, ensuring it stands out and clearly communicates the critical message.


More ideas

In addition to the banner, I proposed another idea involving a trigger message pop-up when users interact with their bookmarks, which is a part of their Firefox data. For example, when users click on the bookmarks tab in the Firefox browser, a message about downloading a recovery key will appear. This targeted approach ensures that users are reminded of the importance of downloading the recovery key at a moment when they are engaged with their data. 

By connecting the message to a specific action, users are more likely to understand the potential risk of losing their data and be motivated to download the recovery key.


I discussed the strategy with the design team, including a content designer and a design lead. We agreed that this approach was a simple and efficient solution to raise awareness about the importance of downloading a recovery key. Since the CTA to download the key is already on the account settings page, placing a clear and direct message there would effectively guide users to the main CTA.

We then presented this idea to the entire team, including engineers and a project manager. While the proposal was well-received, the project manager provided valuable feedback. They pointed out that many users do not frequently visit the account settings page. Consequently, even if the banner message is clear and visually appealing, it would not reach a large number of users. This insight highlighted the need to consider additional strategies to ensure the message reaches a broader audience.

Different approach

After receiving feedback, I began brainstorming ways to ensure that account users are more frequently exposed to the important message about downloading a recovery key, beyond just utilizing the account settings page. I recalled that some platforms integrate their key messages within the sign-up and sign-in processes, which could be a worthwhile opportunity to explore. Below are the current processes for signing up and signing in.

After reviewing both flows, I identified an opportunity to add an extra step that raises awareness about downloading a recovery key. We decided to incorporate a section for downloading the recovery key during the sign-in process, specifically after the password input. This section outlines simplified steps for downloading the recovery key. Since users prefer a quick sign-in process and we aim to maintain high user retention, we chose not to include this step during the sign-up phase.

Wireframes

I began by sketching low-fi wireframes that represent a prompt for downloading a recovery key. Based on the existing recovery key flow, I condensed the steps from a longer sequence into two streamlined steps. These new steps emphasize the importance of having a recovery key and guide users through the download process in a secure manner. Here are some black-and-white design explorations illustrating these concepts.



Iterations

Design & Deliver

High-fidelity mockup

I incorporated Accounts UI styles into the wireframes to ensure visual consistency across the product. Additionally, I updated the illustrations to deliver the meaning of each sign-in step and adjusted the text alignment to the left for improved readability. This arrangement helps users process multiple sentences effortlessly, enhancing comprehension.

Accessibility 

With the high-fidelity design, I collaborated with accessibility engineers to create an accessibility specification for our engineering team, ensuring that we stick to inclusive design practices. This specification includes requirements for high contrast mode, focus order, and compatibility with screen readers.

Additional delivery

Develop from a previous exploration

Although the design was initially submitted to the team, I felt driven to explore additional options and refine the design further, aiming for an even greater positive impact.

I revisited the idea of integrating an instant message prompt when users engage with the bookmarks tab. Among Firefox browser data, ‘bookmarks’ consistently rank as one of the highest usage features, presenting a prime opportunity to subtly educate users about the importance of downloading a recovery key.


The proposed message would appear when users interact with the bookmarks tab, integrating without interrupting their primary actions. This approach ensures a high chance that users will notice and read the prompt. Even if they do not download the recovery key immediately, the recurring message serves to educate them on why their account is at risk of losing data and what proactive steps they should take to prevent this. This method not only enhances user awareness but also fosters a more secure and informed user base.


User interviews

To gather feedback and validate the necessity of this approach, I conducted quick user interviews with four participants. The insights gathered from these interviews were invaluable. They gave me great feedback!

  • Understanding Potential Problems:
    The frequent message successfully raised awareness among users about potential issues, helping them understand the importance of downloading a recovery key.


  • Alert Fatigue:
    Some users expressed concern about alert fatigue, noting that frequent messages might desensitize them over time.


  • Quick Access:
    Participants inquired about a faster way to download the recovery key, suggesting that streamlined access could enhance user experience.


  • Clearer Messaging:
    There was a consensus that the copy could be improved for clarity, ensuring that the message is easily understood.


What to improve

  • The majority of participants viewed the approach as a potential solution.

  • Ensured message content is exceptionally clear to convey its importance.

  • Limited message frequency to less than 30 days to minimize potential user irritation.

Final Design & Additions

Here is the final 'Banner' design that highlights the importance of downloading a recovery key. 

  • Enhanced message content for clarity and impact

  • Incorporated emojis and illustrations to capture attention

  • Emphasized the download button for the recovery key

Also, these are the overall sign-in flow with the recovery key modals.

Here is a demonstration of how to download a recovery key during the sign-in process.


Conclusion

The impact

Unfortunately, I had to leave the company due to a layoff, so I wasn't able to see the implementation process firsthand. However, I recently connected with a remaining engineer who shared positive news about the current status. The team has progressed with building my design work, and it is slated to go live soon as an experiment. The team anticipates that the new design implementation can attract at least 20% more users who download a recovery key.


  • Increase about 20% of account users to download a recovery key

  • Reduce about 10% friction from sign-in flow

  • Educate users cognitively by displaying a regular message

Next steps?

Given Mozilla's plans to refresh its branding and visuals, I propose updating the entire sign-up and sign-in process to align with the new design. Additionally, if the company adopts the latest trend of passkey authentication, this would provide users with a seamless and secure way to sign up and sign in without needing passwords or recovery keys. This approach not only enhances user experience but also eliminates concerns about data loss.