Web Translation

Discover the online world in your language

COMPANY

Mozilla - Firefox

ROLE

Product Designer

EXPERTISE

Product Design

YEAR

2023

Project Description

Firefox offers a full-page translation feature to help users navigate the web in their preferred language without relying on third-party translators. The Firefox Translation team has prioritized user privacy and security by not sending translated content to external servers for processing, ensuring sensitive user information remains protected. This feature not only meets user expectations but also closes a competitive gap with other web browsers, attracting more new users to Firefox.

Role & Responsibilities

This project was a collaborative effort involving the Firefox Translation team, including engineers and a project manager. I worked closely with a UX design lead throughout the project's lifecycle to ensure its success. Together, we conducted thorough market research, user testing, storyboarding, wireframing, prototyping, UI design, and accessibility checks. We navigated each phase of the project, taking a comprehensive approach to deliver outstanding results.

Timeline

We spent about 3 to 4 months to release the feature in H2.

Process

I approached this project using the Double Diamond process, a widely recognized method in product and UX design. This strategy always keeps me on track, helping me stay focused and organized while working within tight timeframes.


Discover

Background

Language barriers pose a significant challenge in our interconnected world. Whether traveling, consuming media, or exploring online content, we often encounter information in languages we don't understand fluently. While the concept of technology breaking down language barriers has been a part of science fiction for decades, it remains a persistent challenge in the 21st century.

Approximately 52% of the web is in English, and more than 80% of the web is in just ten languages. Translating even a portion of this content into users' preferred languages can empower, simplify, and delight hundreds of millions of individuals as they navigate the web.


Fortunately, advancements in language translation technology are now addressing this issue. With these improvements, we can translate languages, enabling more people to access online information. This technology ensures that everyone can benefit from the wealth of content available on the web.

However, unlike its competitors such as Chrome and Edge, Firefox lacks a built-in translation feature. Firefox users must download an add-on (extension) to translate web content, which can be inconvenient. As a result, many active users may switch to other browsers. Furthermore, web translation services often require user data to leave the browser and be processed in the cloud, where it may be retained and utilized for various purposes. This highlights the need for Firefox to not only develop a built-in translation feature but also incorporate distinctive traits that enhance Mozilla's privacy profile.


Competitive Analysis

I wanted to see how other competitors were doing. This competitive analysis helped me understand each browser's strengths and weaknesses. For example, many browsers offer a unique feature to users such as audio translation suggesting potential valuable enhancements for Firefox. I wanted to examine how our competitors are performing. This competitive analysis helped me identify the strengths and weaknesses of each browser. For instance, many browsers provide unique features for users, such as audio translation, which suggests potential enhancements that could be valuable for Firefox.



User Interviews

The UX lead and I conducted qualitative interviews with various internal participants to gather insights and identify pain points, which in turn informed the creation of user stories and project scope. We utilized existing translation features in other browsers as benchmarks to assess participants' experiences and engaged in discussions regarding their personal stories, preferences, and innovative ideas.

Pain Points 😵‍💫: 

  • Translation affordance fails to activate.

  • Some users rely heavily on copy-and-paste functionality.

  • Concerns about translation quality: accuracy, appropriateness of language.

  • Risk of losing original content during translation.

Ideas 💡:

  • Implement text-to-speech (voice feature) alongside translation.

  • Provide multiple options for word choices.

  • Incorporate a dictionary and thesaurus into the translation tool.

  • Extend translation feature to messaging, email, and other relevant areas.

  • Enable bulk translation capabilities.

  • Incorporate user feedback mechanisms to gauge translation quality.

Use-Case Insights 🏆:

  • Primary need expressed is for full-page translation.

  • Users prefer automatic source language detection for convenience.

  • Simplified language selection for quick translation to preferred language.

  • Clear affordance indicating when web content is translated.

Define

Persona

After the interviews, I created a persona to deepen my understanding of potential users. For this project, the primary persona is Hannah.

  • She only speaks English and frequently relies on web translation for her job.

  • She needs a tool that is fast, accurate, and secure to help her read documents in foreign languages.

  • She prefers to avoid spending time using paid translation programs.

Problem

“How might we develop a translation feature that is both accessible and seamless for users to comprehend web content in their desired language while ensuring their data's security and privacy?”

Develop

Opportunity

It is evident that integrating a translation feature into the Firefox browser is essential for remaining competitive within the industry. Given that this functionality has become a standard expectation among users, Firefox must align with this trend. By leveraging insights from competitors and incorporating our unique approach, we can deliver a translation feature that sets Firefox apart while meeting user needs effectively. Moreover, Mozilla possesses its distinctive technology known as Bergamot software, which enables local translation directly within users' browsers.

Hypothesis

We believe that integrating an intuitive and straightforward built-in translation feature into Firefox, leveraging Mozilla's Bergamot technology, will enhance user engagement and broaden users' web browsing experiences. This advancement aims to position Firefox competitively among other browsers while ensuring a secure browsing environment for users.

Identify priorities

Our translation team, consisting of designers, engineers, and the project manager, gathered to discuss our findings and decide on feasible development options given our tight schedule. We categorized user stories for full-page, selection, free-form, and text field translation, and created a simple matrix to prioritize tasks based on impact and effort. This organized approach paved the way for our next step and we decided to implement a full-page translation feature as a minimum viable product (MVP). The MVP encompassed 10 European languages, aligning with Firefox's 2023 focus on the European market. These language models were of high quality, ensuring an excellent user experience. The languages featured were English, German, French, Spanish, Polish, Italian, Czech, Portuguese, Bulgarian, and Estonian.



Storyboard

With the team moving forward to develop a full-page translation feature, I aimed to understand how users could benefit from using Firefox’s translation. To facilitate this, I created a quick storyboard centered around our main persona, Hannah.



User Flows

We additionally developed a user flow chart to gain insights into potential user interactions with full-page translation. This visual representation enabled us to identify pain points, areas of confusion, and opportunities for enhancement.



Design Explorations

Initially, we collaborated with an icon designer to create a unique icon for the translation feature in Firefox. After several iterations and analyzing competitor designs, we settled on using the letter 'A' from the alphabet and the character '文' from Chinese/Japanese. These characters are widely recognized online, eliminating the need to introduce a completely new icon. Additionally, the combination of these characters symbolizes harmony. In Chinese, '文' means 'text', 'language', or 'literature', while in Japanese it can also mean 'letter' or 'sentence'.

As a product designer on the team, I led the exploration of design options for the desktop version, while a design lead focused on the mobile version for Android Firefox users. Initially, we decided to adopt a familiar trigger pattern commonly used by other browsers. We believed that many browser users were accustomed to accessing translation features through the URL bar area, making it a universal choice. I began by sketching wireframes for a translation panel where people could effortlessly translate web pages into their preferred languages. A key focus was designing a seamless process for users to quickly select their desired language and initiate the translation.

After extensive discussions with the design lead and the team, I closely collaborated with the design system team to ensure our designs aligned with existing patterns and assets while maintaining flexibility within the brand system. I then refined several design explorations through multiple iterations, incorporating feedback from the team. Additionally, I worked closely with a content designer to ensure clear and effective communication with our users.

Design & Deliver

High-fidelity mockup

In line with our decision, I integrated Firefox's UI styles into the wireframes to maintain product branding consistency. Below are the high-fidelity mockups for the Firefox browser (desktop).

User testing

With the high-fidelity design, I conducted unmoderated testing with 10 users through UserTesting. I wrote a testing plan and detailed questions/script, as well as prepared a prototype link for them to test out. The team wanted to verify the overall usage of the design, so I created three main tasks to test.

  • Task 1: Translate a page to English

  • Task 2: Go back to a page’s original language 

  • Task 3: Manually change a source language (translate from)



Findings: 

  • Task 1: All of the participants can easily locate a dropdown menu, choose a language to translate to, and then use a button to complete the task.

  • Task 2: Almost all users can find a way to open the translation panel. A few users re-translate the page using the dropdown menu. The majority of users used the "Show Original" button to revert the page.

  • Task 3: A meatball menu may not be suitable for everyone. Many users do not pay attention to its contents and try to complete the task by clicking the dropdown menu. 40% of the users are unable to complete the task at all.


Because a significant number of participants struggled with Task 3, we decided to reassess the design and content. The kebab menu proved to be less intuitive for some users, so we replaced it with a cog wheel icon to better signify user tools. Additionally, we simplified the dropdown menu copy to improve clarity and understanding.

I suggested adding another dropdown menu labeled "Translate From." While this feature may not be used frequently, it clearly indicates the source language of the website. This change helps eliminate confusion for users who need to manually select the source language, which was previously hidden in the kebab menu.


Final Design

I reflected the findings from the user testing into the final design and here we are introducing the MVP version of Firefox Translation. 

Accessibility

I also supplied the engineers with an accessibility specification, covering aspects like high contrast mode, focus order, and screen reader compatibility, to ensure inclusive design practices.

Conclusion

Around two months following the full release of the translation feature, we received encouraging news from our engineering team. The engineers' team tracked three metrics from the Firefox users.


  1. Daily Translation Requests:

The number of requests submitted by users on a given day.

  2. Daily Active Users:

The number of users who submitted at least one translation request on a given day.

  3. Daily Avg. Requests Per User:

The average number of requests a given user submits on a given day. 

Throughout November, the trend lines for Daily Translation Requests and Daily Active Users exhibited a positive slope, indicating a steady increase. Meanwhile, the Daily Avg. Requests Per User remained consistent. This suggests that our user base is steadily growing, with users typically submitting between 2 to 3 translation requests per day.


In November, we observed a significant increase of +4,291,181 (+7.22%) translation requests compared to October. Additionally, our average daily active user count rose by +46,391 (+5.94%). Notably, we have identified a core group of approximately 4.5 million users who consistently utilize the Translations feature across both months. This indicates that we are not only retaining existing users but also attracting new ones.