Project overview

Before releasing Firefox on iOS, Mozilla launched a content blocker for Safari called, "Focus". But a year later (in 2016), the product was at a crossroads.

At this point, I joined the project as UX lead. Working closely with a dynamic, multi-disciplinary team and sponsorship from our VP of Product, we transformed the Safari content blocker "Focus" into a standalone product. I drove design, research and prototyping. Working with my partners in Engineering and Product Management, we collaborated closely on product strategy, marketing, and even implementation details.

Our project kicked off in September 2016. Within three months, we relaunched the product as "Firefox Focus – a free, fast and easy to use private browser for iOS". The debut garnered favourable media attention and led to consistent organic growth on both iOS and Android platforms. Firefox Focus topped the charts on platforms such as Product Hunt, Hacker News, even Reddit. Soon after, other ‘privacy browsers’ emerged and marked a shift in the market. At that point, our usage data provided clear evidence that we had achieved product-market fit.

As of early-2021, the momentum continued. Daily active users on iOS hovered around 128,000, with a steady organic growth rate of 10% YoY. Meanwhile, Android saw 435,000 daily active users with a growth rate of 24% YoY, and surpassed 10 million downloads on Google Play.

Problem statement

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.

Design process

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.

Trade-offs

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.

Outcomes

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.'

Impact

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.

Learnings

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.