Firefox OS Emoji

Patryk Adamczyk

In Spring of 2014, we embarked on the Firefox Emoji project with the main purpose to add a little more whimsy into the Firefox OS Messaging (SMS/MMS) app and we wanted to give the community more choice when it came to free, high quality yet open source emojis.

The project was perfect for our freelance illustrator, Sabrina Smelko. The art direction focused on creating a sense of familiarity to our users while maintaining a style that speaks to our brand, Mozilla. At first we thought about using a single mascot (perhaps the fox) for all the smileys, human and animal figures but in the end we believed that focusing on creating distinction in shape (silhouettes), colour and form among the different emojis was more important due to the potential of limitless types of emojis to be added to the spec.

Our final set includes two types of character designs; one for the emotions in the form of smileys, the other one for everything else in the form of real world human figures and animals.

The smileys use a flatter shading reflecting the Firefox OS visual design. However we departed from the expected all yellow colour scheme as we wanted to accentuate certain feelings and moods further with unique colour.

The figures are based off the smiley but with more subtle facial features while still maintaining the fun, casual and approachable feel already established. These themes are carried onto the animal figures like the cat (now the fox) and monkey, drawn with large facial features similar to the smileys. We kept racial diversity in mind, and have designed all our emojis using SVG, allowing for skin tone modifiers to be applied in an upcoming release.

We are hoping this first set of emojis (Unicode 6.0 spec) will land in the next release of Firefox OS thanks to the hard development work of Pavel Ivanov and Reza Akhavan as well as the support of our visual designer Amy Lee and our font guru Jonathan Kew.

A Selection of the Emojis


Task Continuity Part 2: Taiwan and Japan

Bill Selman

Research and blog post by Bill Selman and Gemma Petrie.
(If you haven’t read our previous report on Task Continuity, we recommend reading it first for context.)

Screenshot 2015-07-09 15.31.18

Last time we wrote on this topic, we shared our observations and results from our research into multi-device workflows and task continuity in the United States. As we reported then, our participants are using the tools they have at-hand to construct larger workflows. The most popular of those tools being screenshots, SMS, and email.

Unlike most other markets that charge per SMS, the US has a unique mobile services pricing structure that often includes almost unlimited SMS in a monthly service fee. In other regions of the world, SMS has been replaced by communication tools like messaging apps (such as Whatsapp). In contrast, messaging apps have lower penetration in the US (for example, Whatsapp has 8% penetration in the US compared to say 69% in India). While the overall usage of SMS is declining even in the US, SMS is still a lower cost and accessible task continuity strategy here.

The question is: how are users in other regions using different tools for task continuity? And if they are replacing SMS with Messaging apps, how they are employing other task continuity strategies differently?

Since Firefox is a global product, we believe it’s important to meet the needs of all of our users. To that end, we organized a similar field study to our US project, but in two more economically advanced east Asian markets: Japan and Taiwan.

Research Questions and Methodology

In order to compare and contrast, we followed the same research methodology that we employed in our previous study of task continuity in the US. The primary difference in our field work and analysis was an emphasis on the question of how region and culture affect users’ task continuity strategies.

We interviewed 5 participant groups in and around Taipei, Taiwan and 5 participant groups in and around Tokyo and Yokohama, Japan. In total, we interviewed 13 participants. All 10 interviews took place in the participants’ homes. In addition to our primary research questions, the semi-structured interviews explored daily life, devices, and integration points. Further, participants provided home tours and engaged in multi-device workflow future thinking exercises.
Screenshot 2015-07-10 12.17.31


Taiwan and Japan

  • As we hypothesized, messaging apps have a strong role in task continuity in Taiwan and Japan. Every participant we interviewed used the messaging app LINE frequently to communicate with friends, family, and work associates as well as to continue tasks.
    • LINE allows users to set up specific groups of contacts called “communities” that can be messaged simultaneously. Participants used this feature to share and negotiate tasks and information.
    • LINE has replaced other communication and continuity channels such as SMS and email. SMS is viewed as “outdated.”
  • With the exception of photos, data and task continuity appears to be less precious among the participants we interviewed than in the US. Almost no participant mentioned alarm about the possibility of losing data or not being able to reconstruct a task.
  • Participants in both markets appeared to have shorter recovery horizons overall; in other words, most task continuity was for items for later that day or week. Bookmarks were used for longer, more persistent recovery horizons, but use was more for frequently visited sites.
  • Both Taiwan and Japan appear to be instructional cultures. In public places, visual instructions were present. Some participants mentioned that they were not aware how to use some tools well but also believed that they were missing out by not using them. For example, TOK2 said, “I’m not good at Evernote. I wish I could become better at Evernote.”
  • Compared to the US, we observed more device specificity among participants.
  • Yahoo! remains a popular starting point for browsing in both markets.


  • For our participants who were not information workers, email as a communication tool has been replaced by LINE or Facebook. Email is now used primarily as an identity tool to manage accounts for shopping or services such as banking.
  • With the exception of the software engineer, participants expressed little knowledge of device-to-device sharing (except for transferring music) or continuity. For example, browser syncing across devices currently enjoys no usage among all but one of our participants.
  • With the exception of a software engineer, cloud services were not used frequently among our participants as task continuity or storage tools. Participants were either not aware of cloud storage as a service or had a strong distrust of the security and privacy of cloud services (based on recent highly publicized hacking incidents).
Device Ecosystem in Taiwan

Device Ecosystem in Taiwan


  • High fragmentation of devices with limited task continuity. Fragmentation extends to services and strategies. For example, every participant had a different email address for each device. We speculate this fragmentation stems from:
    • A cultural separation between work and personal life.
    • An operator policy that supplies an email addresses to each smartphone account.
    • A culture that favors physical media and tangible objects. (e.g., many activities are still paper-based, none of the participants used streaming services and continue to buy or rent CDs and DVDs).
  • Due to the high fragmentation of devices, only TOK5 used cloud services; even he said that he was an outlier in this regard at his office.
  • Google search is used as a primary search engine and some participants had Gmail accounts, but other Google services such as Drive appear to have less penetration.
Screenshot 2015-08-21 15.45.29

Device Ecosystem in Japan Demonstrating Device Fragmentation

Task Continuity Model

Updated Task Continuity Model.

Updated Task Continuity Model.

Our research in Japan and Taiwan led us to expand the Hold/Push stage of the task continuity cycle we developed based on the US research. In Japan and Taiwan (but also to some extent in the US), we observed that when participants shared data or a task, the sharing was accompanied by a social negotiation. That is, participants used some communication platform to discuss how to recover the task.

For example, TAI4 described an instance of this process: When planning a vacation with family, he or his wife send links to a LINE family group for suggested destinations and dates. The family members discuss the destination or alternatives via LINE. Once a destination is agreed upon, the task is resumed by reserving the destination or including it in the travel itinerary.

Example of Hold/Push Sharing Negotiation

Example of Hold/Push Sharing Negotiation

Task Continuity: Similarities to the US

We observed the following similarities when comparing our participant groups’ task continuity strategies in Taiwan/Japan to our groups’ strategies in the US.

  • Ad Hoc & Personal: Many participants were not knowledge workers and did not have access to tools or skills for more “traditional” workflows.
  • Satisficed Solutions: Participants are relatively happy with their task continuity systems, but aware that better solutions likely exist.
  • Smartphones: Smartphones were the dominant device in most task continuity ecosystems.
  • Common Strategies: In all three countries, email, cloud storage, phone calls, and bookmarks were popular task continuity strategies.
  • Password Management: Recalling logins and passwords is a challenge. Most of our participants stored passwords on paper or locally in a spreadsheet or digital notepad. In all three countries, most participants re-used the same passwords or used a personal system to create password patterns.
  • Device Continuity: Some multi-device continuity is being achieved through iCloud and Chrome (though this was less common in Taiwan and Japan).
  • Sharing is Saving: Many “sharing” services like email and texting have been repurposed for saving functions.

Task Continuity: Differences to the US

We observed the following differences when comparing our participant groups’ task continuity strategies in Taiwan/Japan to our groups’ strategies in the US.

  • Primary Strategies: LINE, email, and bookmarks were the primary task continuity strategies in Taiwan and Japan.
  • Screenshots: Screenshots were not as prevalent as a task continuity strategy among our participants in Taiwan, and even less so in Japan.
  • Cloud Storage: While cloud storage was a known service in both Taiwan and Japan, few of our participants used cloud storage and several said they had stopped using cloud services due to widely publicized security concerns–specifically, the Sony data breach and the hacking of celebrity iCloud accounts.
  • Email: Email was a popular task continuity strategy in both Taiwan and Japan, but participants appeared to be less concerned about adding metadata for future search retrieval and communication tasks had primarily moved to LINE.
  • Streaming: In Japan, most of our participants still rented physical music (CDs) rather than use streaming services.
  • Bookmarks: Bookmarks were a more popular task continuity tool among our participants in both Taiwan and Japan than in the United States. In one Taiwanese household, bookmarks on the family PC were used as a means of collaboration for planning future events.
  • Not Automatic: Unlike the United States, there was less of an expectation that organization should be automatic.


Based on our two studies, we learned that the content of task continuity strategies varies a good deal among different markets. Participants adopt technologies that are prevalent among their peers, easily accessible, and are cost-effective. These qualities for different technologies vary greatly. However, ultimately, with the adjustments to our task continuity model, the form of task continuity is strikingly similar among different markets.

The main difference we observed when comparing Japan and Taiwan to the U.S. was the presence of a greater degree of more complex social negotiation (in terms of the number of participants). Since LINE places emphasis on communities in the user experience compared to groups in SMS messaging apps, the more extensive negotiation could be attributable to the prevalence of LINE in Asia.

While the form may be the same for task continuity, the differences in context and content are important to consider when building task continuity actions and activities into technology. As is the case with most technology, end-users use tools and functionality differently than designers and engineers anticipate. Thinking on these studies, it is remarkable how many participants used tools designed to share data as a means to save data for themselves or for later. Designers and engineers must consider how to adapt their multi-device task flows to incorporate actions not just for one-off sharing but for persistence and negotiation with others.



Firefox for Windows 10

Philipp Sackl

With the release of Firefox 40, all users of Windows 10 are in for a treat. Over the past months, a small team at Mozilla has been working on optimizing Firefox for the new operating system – both visually and functionally.

Firefox on Windows 10

A familiar experience dressed in a new way

Charles Eames famously said: »The details are not the details. They make the design«. Rarely is that more true than when adapting an existing product to a new environment.

The direction of the visual design of Windows 10 was clearly to finish what Windows 8 started. We see more flatness, more bold colors and generally more visual consistency throughout the OS. As a result, the huge differences in look and feel between classic and modern apps, that was extremely pronounced (and almost universally disliked) in Windows 8, is vanishing. With version 40, Firefox is embracing the clean appearance of modern apps: it reduces lines and borders and uses flatter surfaces while preserving the friendliness of the previous Firefox interface. It’s the good parts of Windows 10 design paired with the Firefox you know and love!

At the same time, we set out to improve the compatibility of Firefox with touch-operated tablets and hybrid devices. Visually this manifests in a larger address bar and more tapable close buttons on the tabs. And we’re continuing to investigate ways to make Firefox play nicely with the new tablet mode that Windows 10 introduces.

Your Search. Your Choice.

One of the most visible new features of Windows 10 is the system wide search field in the task bar. You can use it to search your files, ask questions to the digital assistant Cortana and also to search the web. It is great to have such a global entry point to finding things on the internet, but it comes with a trade-off: by default, the Windows search field only shows results from Microsoft’s search engine Bing.

Since one of our guiding principles is to put you in control of your experience, we’ve set out to find a way of providing more choice here. When you search the web from the Windows search box, Firefox will automatically use the search engine you’ve selected in the browser, as long as Firefox is set as your default browser (you can set it as the default in the Windows system settings). That means you can have the convenience of searching the web right from the Windows task bar, and at the same time still use your favorite search engine.

More to come!

Since Windows 10 has been under active development with new changes landing every couple of weeks up until recently, we have been designing for a moving target. Now that the operating system stabilized, you can expect more Windows-specific improvements coming to Firefox over the next months.

User Study of Tracking Protection in Firefox Nightly

Bill Selman



A recently landed feature in the experimental Firefox Nightly build integrates proactive tracking protection for Firefox Nightly users coupled with Do Not Track (DNT). With tracking protection active, ads and tracking technology are blocked before they reach the user’s browser. Subsequently, tracking ads and tracking pixels are not loaded by the browser and are not visible to the user. Further, by not loading the ads, tracking protection speeds up page load times.


NYTimes with Tracking Protection Off and Tracking Protection On.

In January 2015, the Firefox user research team conducted a three-day diary study with twelve demographically-diverse Firefox users in the US to understand their experience with Firefox Nightly’s implementation of Polaris tracking protection. For the diary study, participants were asked to download and install Firefox Nightly. Participants were instructed to turn on Tracking Protection in Firefox Nightly use it as their primary browser for the duration of the study. Participants responded to cues and direct questions while keeping notes of their daily online activities. After the diary study was completed, we conducted hour-long follow-up interviews with four of the participants via Vidyo.

We wanted to answer the following questions:

  • What does “tracking protection” mean to participants? How do they define it? How do they believe it works?
  • How does the implementation of tracking protection in Firefox Nightly match participants’ mental models of what tracker blocking means?
  • Does tracking protection disrupt participants’ current experience of browsing the web?

Findings and Observations

Definitions of Tracking and Tracking Protection

Most participants understood that tracking involved a third party using a tool or technology to identify unique browser users and to collect data about those unique users’ activity online. Participants provided different descriptions of how they believe tracking works and what information being tracked. Most participants used more general vocabulary to describe the more tangible aspects of tracking, such as tracking technologies track “my likes based on my website visits” (P15) or “what I might be interested in.” (P10) A small number of participants described the technical details of how online tracking works with a high level of accuracy.

Who Do Participants Believe is Tracking Them?

Overall, the majority of participants were able to describe at least one or many employers of tracking technology. While most participants did not describe the ecosystems of tracking and the relationships among companies involved in tracking, they did mention the piece of tracking technology that is most visible to them: targeted ads.

We also asked all the participants: “who do you believe is tracking you online?” Most participants mentioned Google, Facebook, or “marketing companies.” Two participants said the US government was engaged in tracking online activities

Benefits about Tracking Protection

Feeling more secure and private. The most commonly cited benefit among participants was the feeling of greater security and greater privacy. Although some participants who said this did not articulate specifically how tracking protection worked or made them feel more private and secure. Some participants clearly believe the tracking protection feature’s labeling and/or its visible effects (e.g., blocking the display of some ads).

Fewer ads, less clutter. Among the participants who noted the absence of targeted ads with tracking protection on generally viewed the absence of targeted ads as positive benefit. Most of these participants viewed ads as “clutter” (P2) on a site or as a “distraction” (P4) from their intended browsing activities. A few of these participants said that they have sometimes found targeted ads helpful, but also said they did not miss the ads when they were absent.

Faster page loading. Some participants believed tracking protection speeded up their browsing experience by blocking tracking technologies that took extra time to load on a page. This extra speed was seen as a benefit.
In our follow-up interviews, two participants believed that tracking protection slowed down their browsing because “the browser has to do extra work.” (P2). The other two participants described how tracking protection improved the speed of page loading.

Brings attention to the issue of tracking ads. A few participants noted how their relationship to and understanding of tracking changed over the course of the study. As P2 wrote, “It was very thought provoking because even though I did not use the internet much on my phone or computer I started to think about what a difference tracking can make…”

Relevant for mobile. Further, when asked about tracking protection on mobile, many participants said they hadn’t considered online tracking on mobile before. As P10 wrote, “None of my other devices give me the option of turning tracking on and off. And Firefox Nightly has definitely changed my perception of tracking because being that it gives me the option to turn it on and off it also makes me curious what the other browsers are using…It’s led me to various questions.”

Frustrations with Tracking Protection

Confusion when targeted ads disappeared. Some participants found the blank areas of missing content where targeted ads were blocked as visually jarring and confusing. As P8 said, “I did notice unusual behavior with page loading or missing content. My reaction to the missing content were usually were Ads would appear…I eventually closed the page because it was odd.” Eventually, participants who mentioned the blank content grew to like having targeted ads blocked.

Options/Preferences Labels unclear. Some participants did not understand the functionality of the opt-in selections in the Options/Preferences menu. The two options sound very similar: “Do Not Track” is a technical framework to send a signal to ad servers requesting to opt out of tracking and “Prevent sites from tracking me” refers to the Firefox Nightly tracking protection feature. For these users, these two selections are a distinction without a difference.

Preferences page for Privacy in Firefox Nightly with Tracking Protection activated.

Preferences page for Privacy in Firefox Nightly with Tracking Protection activated.

Limited discoverability of interface and alerts. Participants were only alerted to the presence of the shield icon in day two of the study. Only one participant (P15) said he noticed the icon before it was pointed out in the instructions. Once they discovered it, participants did express an accurate understanding of the shield’s functionality to turn tracking protection on and off for the site.

Perceived video playback issues. Video playback, page loading issues, and crashing were issues participants attributed to tracking protection. In our subsequent tests, we  demonstrated it is unlikely that tracking protection was the actual cause of instability or video playback issues. Regardless, likely because their attention was focused on the tracking protection feature as the subject of the study, tracking protection was perceived by some participants as the cause of these problems.

Additional Observations

A feature for more than a privacy-centric niche. We sometimes think that privacy protection tools are valuable to only a small portion of privacy-centric users (3-8% depending on the study) or general users at specific moments (for example, using the private browsing window). It is noteworthy how many of the participants found value in tracking protection.

Most participants in this study were not already focused on tracking and privacy-related issues. Tracking protection in Firefox Nightly exposed them to a tool that offered them a good deal more privacy than they were accustomed. Some participants responded positively and wanted to continue to have tracking protection as an option. A few other participants said they would like to use tracking protection after they perceived it becoming more stable. As P2 said, “I do plan to use tracking protection beyond this study because I liked the way things loaded better and I feel safer for some reason. I will not seek out additional tools because I don’t think I use the internet enough that I would need something like that.”

Invisible and visible. Participants focused almost exclusively on the visible manifestations of privacy such as targeted ads. During the follow-up interviews, we asked participants about the aspects of trackers that they could not see. P4 and P12 described ad networks and Google but did not fully convey the complex web of relationships among advertisers and tracking technology. Instead, participants only described the targeted ads they saw or did not see with tracking protection active. This more limited understanding makes a good deal of sense given the abstract nature of privacy concerns and the behind-the-scenes nature of tracking tools.

In order to improve the user experience of the tracking protection feature, we recommended at the time a few changes to the design:

  • Better labeling in the interface, using more common language to distinguish between “Do Not Track,” “Tracking,” and “Privacy.”
  • Show the invisible aspects of tracking to users to demonstrate visually (via a counter and a list of blocked trackers) to users what is being block on the sites they visit. Making the invisible elements more visible would allow us to show more fully the impact of tracking protection. As some participants indicated in their diary study, these details are valuable to them and enlightening about tracking in general.
  • Many participants did not mind targeted ads disappearing, but some did find the missing ads affected the design of sites they visited. Whether users support ads or not, many sites are designed with space for ads. In order to retain the intended design of a site, we recommended filing in these empty spaces with wireframes of the ads being removed. Wireframes would also benefit new tracking protection users who were uncomfortable with sites appearing empty. [This proposal may be technically challenging to implement with accuracy.]
  • Tracking and privacy are complex and sometimes abstract issues. Introducing the tool with on-boarding and a visual tutorial is essential for adoption and education.

More information about tracking protection.

Firefox OS TV User Interface & Animation Design

Shiqi Gao


The approach to designing Firefox OS for Television is fundamentally different from phones or tablets. It requires rethinking of how experiences are structured and how to fulfill the needs of a wide range of uses. Firefox OS for Television was designed not only to simplify the UI, but also to optimize interaction, and to help users get the content they want immediately. Below is the detailed information about the concept of our visual and motion designs.


User Interface Design


The controls are designed in code (SVG) and will scale to any screen size without the need for new bitmap graphics. The UI is responsive, it works across devices of all shapes and sizes, from small screen watches to giant screen TVs. The UI components are created in SVG by using simple flat circles. We minimized the use of gradients and reduced shadows as much as possible, but made sure that the controls can be identified distinctly.


Why a circle? We chose to use the circular shape of our Firefox logo as a source of inspiration. Circles have free movement (they naturally roll), shading and lines can enhance this sense of movement within the circle. Circles are warm, humane, comforting and natural. Their movement suggest energy and power. Their completeness suggests infinity, unity, and harmony. You’ll see the circle used throughout the designs of the components, especially in the animations.


By changing a color, shape or style of an animation, the controls can be customized to suit any brand need. All controls are all well designed and created as CSS components allowing for effortless customization.

Design in Animations


A great way to make your animations move in a more lifelike manner is to vary the rate at which the object moves. Animation should imitate the world that we live in. So, it’s important to ensure that the pace of movements within your animations, making sure they reflect the real world.

Positioning / Scaling / Rotating

Positioning / Scaling / Rotating

Motion easing will create a more natural look when applied to positions, rotations, deformations, or scale. This will add acceleration and deceleration to the motion, and can make the experience much more playful and delightful.


Motion should be responsive and intuitive. It should react in a way that reassures the user, rather than surprises or confuses them. The reaction of the UI, to a users actions, should be corresponding and comprehensible.



The most obvious principle is that any motion or animation should be of the highest standard possible. We animated and applied liquid motion to the main launchers (TV, Apps, Devices, and Dashboard) resulting in motion as the user selects each one of them. To users, this bespoke motion is truly delightful allowing for further engagement.



Motion should help ease the user through the experience. It should establish the “physical space” of the UI by the way objects appear on and off the screen, or establish the user’s focus. It should aid the flow of actions, giving clear guidance through the navigation model. Here in our TV home design, we used scaled motion to guide the users through which objects are selected, and keep the user orientated within the interaction path.


Less is more

Subtlety is key when designing the motion to UI. Motion should be used to help the user stay focused, therefore restraint is needed as the design is used as an accent to the interaction design and should not dominate the experience.

For more information and guides about Firefox OS TV, please refer to the session TVs and connected devices and find other links for relevant articles below.

I hope you enjoyed this post about how we designed Firefox OS TV. If you have any feedback or ideas to help Firefox OS Design Team improve ourselves, please leave a comment.

─ By Scott Wu, Firefox OS UX designer