Mozilla Firefox, 2016 — 2017
Although mission-aligned, our content blocker did not help grow Firefox active users and the roadmap for generating long-term revenue was unclear. This primarily impacted resourcing decisions at the business level.
Our project aimed to change this and reach 100k monthly active users over the next three months. We wanted to bring engaging, privacy-related features to existing Focus users.
As a distributed team, we prioritized feedback so that we could maintain momentum. I leveraged existing user research to inform low-fidelity wireframes, expediting cross-functional alignment and enabling foundational work to start as soon as possible.
To drive collaboration and feedback, I also championed daily rituals, brainstorming workshops, and design critique sessions.
After we had finalized the product scope, I shifted my energy to designing the user experience. I created high-fidelity design specs and user flow diagrams. I also collaborated closely with engineering, avoiding unnecessary waterfall processes by submitting and reviewing PRs on GitHub.
I leveraged Framer to design our animations and build interactive prototypes. This helped articulate the details of each animation and made it easier to translate into code. We ran local builds on device regularly to ensure the final product experience felt exceptional in-hand. Staging builds were submitted every night to maintain transparency and encourage feedback from all stakeholders.
Sketch from initial meetings, aligning on engineering scope (iPad)
Sketch from initial meetings, discussing product requirements (iPad)
Prototyping interaction and animations details (Framer)
Initial tablet design exploration (Xcode)
In competitive analysis, I noticed that most browser apps featured "tabs". I really wanted to challenge this because I believed it was not critical to our core value proposition. Instead, I proposed the idea of creating prominent controls for closing (erasing) the browsing session. A key assumption I made was that users would be less inclined to leave tabs open when browsing privately.
Based on existing user research, I also recognized the importance of felt privacy. The intention behind these controls was to reinforce the notion of privacy while simultaneously cutting scope and saving development time.
A trade-off that we needed to consider was accidental interactions. Although explicit, this button was also extremely destructive. Existing solutions at the time relied on an "undo" action. But I felt that following the same pattern didn't align with our product's promise of privacy.
Draft mockups including "erase" button
Erase animation prototype (Framer)
Our redesign debuted on the App Store in November 2016, delivering a browsing experience that was simple, modern, and fast. By removing tabs, menus, bookmarks and other non-essential features, we allowed the web content to shine. This also gave us an opportunity to define our own design language, exemplified by the use of prominent purple gradients in the UI. The interface was instantly recognizable and later influenced the branding of Mozilla's other privacy-themed products and messaging.
Interestingly enough, blocking technology that made pages slow to load (such as ads and trackers) also improved speed and performance. By rendering less malicious content, we not only accelerated page load performance but also reduced data usage; saving time and money for our users.
The addition of the "erase" button received positive feedback and was understood by users. Sarah Perez wrote in her TechCrunch article, 'After you complete a web search, you can erase that activity with a simple press of an “erase” button. Firefox Focus could have automated this, but there’s something about manually clearing a search that feels cathartic.'
Mockups from the final iOS design spec
To measure our impact on growth and engagement, we tracked daily (DAU) and monthly (MAU) active users. We also monitored our marketing funnel and compared App/Play Store performance metrics.
As of late 2020/early 2021, we saw consistent organic growth on both iOS (+10% YoY) and Android (+24% YoY). On iOS, our daily active users averaged around 128k, with 620k monthly active users. Android saw greater traction with 435k daily active users and 2.2 million monthly active users.
Notably, Firefox Focus became part of many partnership discussions that followed. In 2018, the BlackBerry KEY2 released with Firefox Focus pre-installed as part of their Locker application.
BlackBerry KEY2 announcement featuring Firefox Focus on Android (2018)
Here are three key takeaways that our team and the organization learned from this project:
Continued iOS investment: We recognized the importance of maintaining our momentum on iOS product development. This included Firefox, Firefox Focus, and other potential apps. At the end of the day, we discovered that users on all platforms valued choice and our data indicated potential for further growth.
Put users first: This was a great reminder for us. While we were deeply familiar with the technical complexities involved, our users simply do not (and should not have to) care about it. To truly serve them, we needed to meet them where they were. The nuances and details of rendering engines were details that we had incorrectly emphasized for too long.
Privacy can take many forms: By exploring ideas beyond traditional browsers, it allowed us to uncover new dimensions of privacy. User feedback didn't highlight missing features like tabs or bookmarks; instead users sought faster access to commonly used searches and sites like weather and banking. We learned that privacy solutions take many forms.
Requests for an Android version immediately followed. I remained as UX lead for that project as well and about six months later (in 2017), Firefox Focus launched on Android. Since many existing Firefox users were also Android users at the time, our launch received a lot more coverage. We were featured on The Verge, TechCrunch, Engadget, even the front page of Reddit. At the time, Firefox Focus on Android ranked first on Google Play in the "New Apps" category.
Today, Firefox Focus on iOS has over 63k ratings and reviews, averaging an impressive 4.7 out of 5 stars. Firefox Focus on Android has exceeded 10 million downloads. These achievements underscore the value of our approach and the importance of incremental improvements, and adapting to user needs.
Ideas for onboarding/FTUE, contextual messaging, and a feature to disable blocking (Android)
Exploring content design options for onboarding/FTUE (Android)
Collecting design specs for review (Android)
Exploring the potential nuances around multitasking in Firefox Focus (Android)
On-device test build of Firefox Focus on Android (2017)