Firefox: Ecosystem cross-pollination
Acquiring new users by connecting the dots between Firefox products
Firefox’s flagship product is a desktop browser, but Firefox also makes an ecosystem of other products and services (mainly webapps) that are related to protecting people's privacy & security on the internet—all connected by a Firefox account. The Firefox Ecosystem Cross-pollination project (2019) was about raising awareness and discovery of those products as an ecosystem, showcasing new brand positioning for Firefox, and providing a consistent way to navigate between the Firefox products and services.
PROBLEM:
Most users of Firefox’s products and services are not aware that the product/s they use are part of a larger ecosystem (and most users also do not have a Firefox account). While the majority of those folks are Firefox browser users, not all of them are, particularly users of Firefox’s webapps—representing an opportunity for new browser and account user acquisition. In addition to this ecosystem awareness problem, each product or service was built independently, without a larger system in mind, so there was no way to move from one product to another (or discover new products), and patterns for handling common interactions varied.MY ROLE:
UX Strategy, Interaction Design, User ResearchAs the Design Lead for the Firefox ecosystem cross-pollination project, I planned the entire (scrappy!) product design process, persuaded our product and engineering partners to update the requirements to reflect strategic and user insights, collaborated with my design partner to ideate and execute on our UI concept, and both influenced and coordinated with product leads on multiple products within the Firefox ecosystem in order to deliver both an MVP experiment and a longer term vision for the project.
IMPACT:
We were able to attribute an increase in downloads of Firefox Desktop browser back to the cross-pollinating bento menu (tested in the cross-pollination MVP experiment) on Firefox Monitor.How might we help users understand that Firefox offers an ecosystem of tools that can keep them safe on the internet (each one enhanced by having a Firefox account)?
How might we visually unite the Firefox products and services as an ecosystem and help users to discover and to easily navigate between them?
Map of the Firefox Ecosystem, 2019
PROCESS:
We received a request from leadership to find a way to “cross-pollinate” products within the Firefox ecosystem—starting with webapps Firefox Monitor (a breach alert and remediation service) and Firefox Send (an encrypted file sharing web service). Monitor and Send were receiving a noticeable amount of traffic from browsers other than Firefox, and we wanted to capitalize on that—turning those users into users of multiple Firefox products.Exploring the Opportunity Space
After receiving the initial Product Requirements Document, I first mapping out a fast-and-loose plan for our two-person UX team’s product design process and then dove into discovery—mining existing user research for insights to guide us and conducting a quick competitive analysis of other software ecosystems. I also began to map out potential contextual cross-pollination opportunities and then planned and prepared for ideation sessions by framing our problem and hypothesis.
Async design jam sketching & our product design process plan.
After several rounds of async design jams, iteration, and feedback from our cross-functional team, we zeroed in on a winner: a small piece of UI in the form of a 9-box icon we called the ‘bento.’ The cross-pollinating bento menu (containing links to the ecosystem of Firefox products) would appear in the top right corner of our webapps when viewed on desktop & mobile, in Firefox and in other browsers, and its contents would be contextual based on device type.
Cross-Pollination MVP
From here, I fleshed out a larger strategy and put an incremental release plan in motion: I explored both how the bento might expand to other Firefox products and services and what we should promote in each instance, proposing an MVP solution as well as a longer term vision for cross-pollination (and several steps in-between). I used these explorations to successfully influence our product management partners to expand our roadmap beyond the initial request, and helped to set success metrics for the bento MVP.
Using the updated requirements, I created wireframes describing how the bento would appear and behave in multiple browsers, devices, and product contexts, over multiple planned releases.
Early cross-platform/cross-browser wireframes, spreadsheet mapping out t-shirt sized cross-pollination logic.
Final bento designs.
Concept Testing
While my design partner brought the wireframes to life and prepared them for handoff to engineering (who implemented the bento as a reusable component), I conducted remote evaluative testing on UserTesting.com (writing the protocol, creating the prototype, administering the test and analyzing the findings), checking that the bento was both discoverable and understood by participants before being released to the masses. The icon was both discovered and understood by all of our participants, so we moved forward with the MVP, prepared to measure its impact.
Like most research done by the Firefox UX team (https://firefoxur.github.io/), the research I conducted is public. Read the full research report: 2019 Firefox Cross-pollination Dandelion for Webapps - Bento Menu (Desktop) - Concept Test Research (Public)
Concept test prototype, protocol & findings presentation.
RESULT:
As a result of the Cross-pollination MVP experiment, we found that the bento menu was opened by 6.8% of non-Firefox Monitor users each day, but more importantly, we were able to attribute an increase in downloads of Firefox Desktop browser back to the bento menu on Monitor. The positive signal from the MVP experiment also led to the decision to put] the bento menu on additional products we had previously recommended (including Firefox account settings, Firefox Private Relay, and the now defunct Firefox Send).The success of the bento MVP also led to future cross-pollination work (expanding to Pocket, Mozilla.org) and to a green light for a second phase of the project: standardizing common global actions across the product ecosystem (getting help, knowing whether they’re signed in, accessing Firefox account settings to update their password, etc).
The Future: ‘Glocal’ Navigation
The next phase of the project (called ‘glocal’ navigation because it systematized global and local elements) involved creating a standardized information architecture and appearance for the global UI component set displayed in the top right corner of the Firefox webapps. In addition to the ‘bento’ menu, the set included the Firefox account avatar menu— containing global items like help, account settings, and sign in/out). For this phase, I began by auditing all the avatar menus in use across the Firefox ecosystem, mapping out the inconsistencies in the form of high level sitemaps and then using this artifact to inform and recommend a high level IA for handling global elements moving forward.
Detail of the Firefox ecosystem avatar menu roundup.
After some sketching, I created detailed wireframes describing the various states for the account avatar menu and worked with my design partner as he brought the wireframes to life. We shopped the design around, collaborating with the Firefox accounts, Support, and Marketing design teams to get both input and alignment on the requirements & final spec for the UI component set (and to influence their workstreams). I also coordinated with various Firefox product teams where glocal navigation would eventually appear to ensure consistency in implementation.
‘Glocal’ navigation set appearing on Firefox Monitor.
RESULT:
While business priorities changed before we were able to implement the entire plan, the full ‘glocal’ UI set eventually appeared on Firefox Monitor, Firefox account settings, Firefox Private Relay, Firefox Send, and Firefox Better Web.
Firefox for Desktop
Firefox for Android
Firefox for iOS
Mozilla’s family of products