Mozilla Firefox
Transforming Perception: Firefox Felt Privacy Redesign
Mozilla Firefox, a leading open-source browser used by millions worldwide, is renowned for its commitment to user privacy and security. This project focused on redesigning Firefox's Private Browsing mode, enhancing visual differentiation and user comprehension of privacy features across mobile and desktop platforms. Our goal was to increase user engagement with privacy tools and strengthen Firefox's position as a privacy-first browser in a competitive market.
The Problem
Based on testing feedback, we discovered that users had a difficult time understanding and recognizing the differences between private mode and normal light/dark mode. This made the app harder to use effectively overall, and also influenced how "safe" and "private" mode felt.
The Solution
We created consistent theming around private mode and added a data clearance feature with clear onboarding and explanations.
Role
Sr. Product / UX Designer, Privacy & Security
Contribution
User Flows, Wireframes, User Research and Testing, Iconography, Prototyping, Dev Handoff
Type
Mobile (iOS, Android), Tablet
Focus for case study: Android & iOS
Team
2 Designers, 1 Product manager, 3 developers
Tools
Figma, Usertesting.com, IIlustrator
Timeline
3 months (launching March 2024)
// BY THE NUMBERS
2
USER TESTS
4
HIGH-FIDELITY
ITERATIONS
4
LOW-FIDELITY
ITERATIONS
12%
% est.*
HIGHER
ENGAGEMENT
200,000,000
ACTIVE
FIREFOX USERS
Process Overview
// STAKEHOLDER SYNC
I met with our internal stakeholders: 1 product manager, 1 UX writer, 2 developers and the head of design. We reviewed expectations around timelines, goals, and an agreed upon vision for moving forward. Our goals were to increase engagement and understanding around what private mode is, and what it does for users.
Gathering
I took a look at any existing research we had, old designs, and any user feedback we had about the current lock and shield panels respectively.
I examined our existing personas, and thought about how we could best cater to them given the problem at hand.
// OUR USERS
In examining the research, we were able to pinpoint personas we would be targeting.
Personas
User Journey Mapping
We wanted to keep consistency of design across platforms, and to do that effectively, Misha (desktop designer) worked closely together. We examined the user journey for a user's transition into private mode, and how much they understood about what "private mode" meant.
Considerations for Design
-
Adherence to design system
-
Deviations from design systems where required
-
Developer resources and timeline
-
Engagement
-
Consistency cross-platform
Considerations for Users
-
Content design and hierarchy
-
Amount of Information
-
Comprehension
-
Simplicity
Design Systems: Use Cases
While we (the design systems team) already had clearly defined colors for both "light" and "Dark" mode, there was some confusion around "private mode." I played with different colors, and also looked at use cases, as each choice would have implications in different flows. Our QA + Dev team helped to identify use cases in which I would have to make decisions around which components to keep in which "mode." Here are a few below:
Design Systems: Colors
After understanding and investigating all use cases, I explored some different color combinations for private mode, keeping in mind light and dark modes for each component.
// HIGH-FIDELITY
iOS & Android
Since we had several of the components in our design library, I went straight to high-fidelity wireframes on Figma for mobile, tablet, and web. Most of the iteration was playing with different colors, making sure they fit in within our current design systems (for both iOS and Android), and checking for accessibility. These are the combinations I settled on.
iOS
Android
// PROTOTYPING
I designed a simple prototype to sample the flow and test colors on iOS.
// USER TESTING
Goals
In testing we aimed to investigate:
-
Understanding of Private Mode and Data Clearance: what users' expect it to do and whether the actual functionality aligns with their expectations.
-
Navigation and User Experience: Interacting with the prototype to navigate through different elements of the private browsing mode interface. This included clicking on links, icons, and buttons to understand how the feature operates and how it feels to use it.
-
Anticipation of Information: what information they would expect to see when clicking on certain elements, such as tooltips or links within the interface.
-
Feedback on Design and Clarity: users' perceptions of the design elements, including icons, colors, and layout, and whether they found them clear and intuitive
-
Reflections and Suggestions: Users were asked to reflect on their experience using the private browsing mode and provide suggestions for enhancements or changes they would like to see in the feature.
Verbatim
In the past, how have you handled similar tool tips? How would you improve this experience?
Insights
After sifting through results, we gathered a few key insights. Users:
-
Found that the functionality of the private mode matched their expectations. They anticipated a feature that hides browsing activity from others who use the device, and they were satisfied with the clarity and effectiveness of the private browsing tab
-
Expressed a desire for more information about private browsing, such as who might be able to access their activity and how the feature protects their online privacy. They appreciated tool tips and links for additional information but suggested clearer labeling or descriptions for better comprehension.
-
Found the private mode easy to use and navigate. They appreciated the simplicity of the design and the straightforward process of initiating and ending private browsing sessions.
// DEV HANDOFF
Specs
After I received approval on our designs, it was time t hand off designs to our developers. I notated the flows which explained behaviors. I walked our engineering team through the specs as well to make sure everything was clear.
Here are a few examples of other information I notated:
-
error message handling
-
interactions
-
Accessibility
-
for Android and iOS
-
responsiveness for different screen sizes
-
Differences between functionality on mobile / tablet
-
orientation (landscape / portrait)
// LAUNCH + CONTINUOUS ITERATION
Impact
This project will be launching March 2024, so the impact remains to be seen.
Reflections
While the design got a huge upgrade when considering accessibility, usability, education, and user feedback during testing - there are still outstanding components that need to be re-designed to be more accessible. Our biggest challenges were working within the resources and time given, while balancing the most pressing needs of our users.
Explore Other Projects
