Firefox OS

 In this article, I explain how we built the first operating system designed to open the web beyond desktop and laptop computers into low-end phones to make them more accessible for people with limited means.

firefoxos_hero_mosaic

About Firefox OS.

About Firefox OS.

About Firefox OS.

Firefox OS was the first operating system designed to open the web beyond desktop and laptop computers. Built entirely with open web technologies, this new OS was intended to put people first in an easy-to-use, intuitive experience for everyone. The first version of Firefox OS, released in mid-2013, was created for low-end phones to make them more accessible for people with limited means. Since then, developers have added features to make the system more competitive with well-established mobile operating systems until it was discontinued in 2016. 

The challenge.

The challenge.

The challenge.

In 2012 the Mozilla foundation partnered up with Telefónica to develop an open-source operating system and decided to build a low-cost smartphone that would be sold in emerging markets in developing countries around the world. This is a massive undertaking since smartphones are more expensive to produce than feature phones. Traditional app stores for Android devices like Google Play and Apple App Store have inflated prices for apps, making them inaccessible for people with limited income. There was no guarantee that this project would succeed, and it was challenging to get our hopes up… but we managed to launch Firefox OS v1.0!

I was one of the 'UI Architects' in the team on Telefónica's side, which meant that I was responsible for wireframing and designing the overall structures for most of the operating system's core user flows. My main focus was user interface and interaction design, focusing on the experience for the core communication capabilities: messaging, phone call capabilities, contacts management, and the calendar. This included working with other 'UI Architects' in creating specific views and interactions and crafting a UI library to ensure consistency throughout all the apps.

boot2gecko

First versions of a web-based OS built on Boot2Gecko from Telefónica (left) and Mozilla (right). After presenting them at the Mobile World Congress, both companies agreed to join forces and build Firefox OS. I worked on the prototype for Telefónica's version.

Design explorations.

Learning users.

We began by spending time with some real people who would be using this product—regular folks from Brazil and Spain. We wanted to understand how they lived their lives, their needs as mobile Internet users, and how we could help them do things faster or better.

We learned that people were frustrated by the current state of the mobile Internet experience. They wanted a faster experience on affordable devices that were seamless and simple to use. They wanted a smartphone that could help them connect with friends and family more easily through voice, video, and messaging.

We designed Firefox OS to put the power of the Web in people’s hands, with applications that are easy to find and use without the need of installing anything. We designed the user experience to be familiar to both people who are new to smartphone technology and experienced users. We wanted to make it easy to maneuver around the phone’s features with large icons, simple swipe gestures, and full-screen immersive experiences.

work-firefoxos-p1
firefoxos_wireframe_02
fxos_wireframe

During the concept stage, we explored many different interaction models. We wanted to provide users with an easy-to-use interface that felt familiar and provide a way to easily organize the most relevant content not more than a couple of taps away.  

The visual language.

The visual language

The visual language.

The work of defining the Firefox OS visual language was critical for us because the Mozilla brand and the feel of the Firefox browser needed to work together. If everything was stylistically different for no good reason, our users would have had a harder time understanding that browsing on your mobile phone with Firefox OS is just as fast, secure, simple, powerful, etc., as it has always been.  

The biggest challenge we faced was the design language itself. The idea that we could create a visual language to unify the experience of the Firefox OS system, applications, and widgets was very ambitious. Every new feature we introduced triggered a round of design optimization work to tune the existing visual language.

A lot of the design was done by building many screens and prototypes. Early on, we decided to invest in simplicity. We wanted all the apps to feel light, airy, and have a lot of attention to typography. Most of the interaction elements seen in Firefox OS were directly inspired by their counterparts in Android. However, they are given a Firefox twist with less reliance on text labels and a more robust visual hierarchy.

firefoxos_main
firefoxos_phone
firefoxos_calendar
firefoxos_theater

Scalable Design.

Building the UI framework.

Firefox OS uses a brand new UI framework called Gaia, which I helped define with other designers and developers. Set on building a streamlined and easy-to-use ecosystem, we started from scratch and defined a whole new visual language and interaction principles.

The aim was to provide a set of building blocks for apps in all categories, ranging from video playback to music to the browser. These are the key components for any phone running Firefox OS. The ideal is that anyone can pick up this UI stack and start building an app in record time. We're talking days here, not weeks or months. The advantage of having clear visual guidelines and a code style was that we could iterate quickly and often, adjusting designs and reviewing results through our interactive prototypes.

Firefox OS uses Web technology, meaning that you can create applications in HTML, CSS, and JavaScript. That means that if you know how to work with these, you’re ready to take on the challenge. You can find all the specs on Mozilla's website and the open-source code for Gaia (user interface) and Boot2Gecko (kernel) on Github.

firefoxos_components_dark

Here's the UI Kit stencil we created to build all the core apps of Firefox OS. It required many iterations with designers and developers to get there. Still, we significantly reduced the time to create the core apps.

Bringing all together.

The final solution.

Our vision when we started building Firefox OS was to unify people around the openness of the web and free innovation. For those of us working on Firefox OS, it meant that we could actually make a mobile phone that could grow the market for mobile browsers at affordable prices and help protect users from "walled gardens" or apps that would lock them into a single company's services. We didn't mean to compete with the two smartphone OS giants but instead would concentrate on low-cost phones in emerging markets. This meant it could succeed with a weaker app ecosystem and fewer screen size options.

We launched Firefox OS v1.0 in a partnership with smartphone vendors like Geeksphone, Alcatel, ZTE, and LG. Unfortunately, after some revisions and updates of the interface (which I didn't take part in), Mozilla announced it would stop the development of new Firefox OS smartphones. To try to remedy that, Mozilla announced they would continue supporting Firefox OS but focus more on IoT - Internet Of Things. Basically, using the same technology running in cheap devices everywhere.

firefoxos_phones

Take a look at the promo video of Firefox OS (which I didn't participate in) and some of the finalized views for the core applications I participated in designing.

Results.

Closing thoughts.

Firefox OS is the result of over two years of work by many engineers, designers, and product managers across dozens of countries. I had the fortune to work right at the beginning with some of those who designed and built the core experience for this ground-breaking system.

Learning the foundations of open source and how to operate as a large team of designers and engineers across different countries was incredibly valuable. We envisioned a world where everyone would use their phones as their primary computers, and where the barriers to creating great apps would be completely eliminated. But we underestimated the massive advantage of incumbency. It's hard to compete with something that is already everywhere like Android.

I'm proud of many of the things we accomplished. We managed to build an entire product from scratch, we created a consistent mobile experience, and we delivered on a revolutionary idea: phones without app stores. One of the things I'm most proud of is the UI framework. The Building Blocks approach did a lot of things for us, but most importantly it prevented us from starting from scratch every time we needed to create something new. The components were easy to replace with real content, and by using the same interface elements consistently, we managed to deliver an end product that felt like one single experience.

The power of open source is that projects like Firefox OS never die or get forgotten, and there are still people around the world interested in keeping them running. 

Learning the foundations of open source and how to operate as a large team of designers and engineers across different countries was incredibly valuable. We envisioned a world where everyone would use their phones as their primary computers, and where the barriers to creating great apps would be completely eliminated. But we underestimated the massive advantage of incumbency. It's hard to compete with something that is already everywhere like Android.

I'm proud of many of the things we accomplished. We managed to build an entire product from scratch, we created a consistent mobile experience, and we delivered on a revolutionary idea: phones without app stores. One of the things I'm most proud of is the UI framework. The Building Blocks approach did a lot of things for us, but most importantly it prevented us from starting from scratch every time we needed to create something new. The components were easy to replace with real content, and by using the same interface elements consistently, we managed to deliver an end product that felt like one single experience.

The power of open source is that projects like Firefox OS never die or get forgotten, and there's still people around the world interested in keeping them running. 

email   |   linkedin   |   medium