Firefox: Web payments
Experimenting to determine product/market fit using a human-centered product development framework
Mozilla Firefox is a free, open-source web browser that runs on many operating systems (including desktop and mobile). The Firefox web payments project (2020) was an experiment aimed at determining how best to simplify ecommerce transactions for Firefox users while also increasing desktop and mobile browser long term retention.
PROBLEM:
The Firefox Web Payments team had a vision to simplify ecommerce transactions for Firefox users with better protection against fraud. They wanted to create an in-browser solution that worked across devices, supported various payment methods, and would work with any online merchant or billing website. However, the team was at a crossroads. While they had competing technical ideas for achieving this (namely by implementing technology that would allow users to transact without sharing credit card information), and even some early UI mockups, they lacked a product brief that connected the idea to Firefox user needs and attitudes and to Firefox business goals. There was also no clear framework for making decisions regarding the product’s scope or roadmap.MY ROLE:
UX Strategy, Interaction Design, User ResearchDuring the early weeks of the pandemic in spring of 2020, I was brought in as design and research lead to help the Firefox Web Payments team define an MVP that was in line with business and user goals and experiment to answer critical business questions quickly before investing further.
My responsibilities included conducting discovery research, contributing to product strategy, facilitating alignment exercises, and designing the minimal product UI required to run research and answer those key questions.
IMPACT:
- The strategy exercises and product brief work I facilitated, combined with the research findings from the research I conducted to answer the team’s key business questions contributed to the team’s decision not to proceed with a more robust in-browser payments solution. This saved significant engineering resources and costs.
- Table stakes credit card autofill functionality launched in Firefox desktop browsers shortly after the study, and was followed by iOS and Android mobile browsers—addressing the user need for a viable backup option for online payment across the ecosystem in a cost-effective way.
PROCESS:
Discovery
I began by conducting discovery research to better understand the web payments landscape and Firefox users’ attitudes. I reviewed the proposed technical solutions (SRC and DPAN), analyzed competitive payment solutions, and revisited prior research from the Firefox team to understand user attitudes toward web payments. Additionally, I gathered insights on how payments were handled across Firefox products (Windows, Apple desktop browsers, and mobile devices), revealing that supporting web payments and card management was more complex than the team had initially realized.
Collecting screenshots depicting payment-related mechanisms across Firefox browser products & mapping existing browser functionality.
Using these findings as a starting point, I introduced and guided the cross-functional team through a human-centered product development framework. This approach helped the cross-functional team articulate a clear product vision and adopt an iterative approach to planning the product roadmap, starting with research questions and hypotheses, then designing and delivering "just enough" to answer those questions.Product strategy & aligning around an MVP
I collaborated with my product partner to contribute user insights to the product brief, helping define the risks, project success metrics, and key assumptions needed for the web payments feature to succeed in the Firefox browser.
Design strategy worksheet: Identifying user & business assumptions to articulate a problem definition.
We identified the riskiest assumption: whether Firefox users were willing to save their credit card information in the browser and trust Firefox with their financial data.
To guide the team in selecting the most valuable and feasible technical approaches, I facilitated two 2x2 exercises—one for impact vs. effort and another for business vs. user value. The result was the identification of a basic "table stakes" credit card autofill feature, which was seen as the simplest path forward.
Facilitating team alignment exercises to identify an MVP approach.
Identifying an experiment & designing just enough to support it
Once the product vision became clearer, I helped the team prioritize research questions, form a hypothesis, and define the key decisions we needed to make. Based on this, we decided to conduct a combined concept/usability test.To minimize time and effort, we decided to base the test on the credit card autofill feature, which was already available in the browser behind a feature flag. With the exception of some issues with the address portion, Firefox’s autofill functionality was mostly in working condition. This allowed us to quickly test the concept without needing substantial design and engineering resources.
I partnered with a data scientist to design a mixed-method experiment. I would handle the qualitative side, while my partner focused on the quantitative survey.
Using the Product & Design Iteration Framework to identify a first test; Test definition for the Firefox credit card autofill usability test.
Qualitative Study
I designed and facilitated a remote, moderated concept test to understand users’ willingness to save credit card data in the Firefox browser during a typical e-commerce transaction. Since credit card autofill already existed, only minimal design changes were needed, so I reviewed the necessary screens and ensured they were ready for the test.
I recruited current Firefox users and asked them to conduct an e-commerce transaction using a Beta build of the Firefox browser. After completing the transaction, they were prompted to save their credit card information.
Facilitating the remote, moderated study.
The study showed several key findings:
- Firefox Desktop credit card autofill experience was usable: All of the participants understood the mechanism and its value proposition (and they were able to add a card successfully when specifically prompted to). Nearly all of the other supporting pieces were usable as well.
- Most participants explicitly chose not to save their credit card in Firefox, and saw credit card autofill as a backup option to their current methods of paying online.
- Participants reported wanting to protect their financial information online, and most did not feel that saving a credit card in a browser was secure:
P2"I don’t typically save a credit card in a browser. Personal preference in case my computer is hacked."
Quantitative Study
The second part of the research involved a browser-based survey. We used a similar prompt as in the qualitative study, and then those users who declined to save their card information were asked to explain why. The survey results mirrored our qualitative findings: the majority of users were not willing to save payment data in the browser.
RESULT:
Because the project’s original business goals were linked to increasing desktop and mobile browser long term retention, the findings from both the qualitative and quantitative studies contributed to the Firefox Web Payments team’s decision not to move forward with developing a more robust in-browser payments solution. This decision to forgo further investment in a feature that did not meet user needs or business goals saved the Firefox team significant engineering resources and costs.Table stakes credit card autofill functionality launched in Firefox desktop browsers shortly after the study, and was followed by iOS and Android mobile browsers—addressing the user need for a viable backup option for online payment across the ecosystem in a cost-effective way.
Download:
Firefox for Desktop
Firefox for Android
Firefox for iOS