Firefox OS

Designing an operating system to bring the web into low-end phones and make them more accessible to everyone.

firefoxos_hero

The challenge.

About Firefox OS.

Our goal was to provide an easy-to-use operating system that could be used in low-end phones. I was one of the designers on the team, and my main focus was to craft the product experience for messaging, phone call capabilities, contact management, and the calendar. This included designing the GUI, interaction models, and the UI elements needed to build the apps.

FirefoxOS_views

Shaping the core.

We set ourselves to design an experience that was familiar to both people who were new to smartphones 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

Setting the tone.

The visual language

Defining the Firefox OS visual language was critical because the Mozilla brand and the feel of the Firefox browser needed to work together. We wanted the interface to feel light and airy and visually differentiate communication (light) from entertainment (dark) apps.

firefoxos_main
firefoxos_phone
firefoxos_calendar
firefoxos_theater
firefoxos_hero_mosaic

Building the UI.

Firefox OS uses a brand new UI Kit called Gaia, which we designed and built from scratch. Set on a  easy-to-use set of UI building blocks, we started from the most simple elements to have a complete set of reusable components we could use to build any Firefox OS app.

firefoxos_components_dark

Bringing all together.

We managed to build a functioning mobile OS from scratch, created a consistent experience, and delivered on a revolutionary idea: phones without app stores. We launched Firefox OS v1.0 in partnership with smartphone vendors like Geeksphone, Alcatel, ZTE, and LG.

FirefoxOS_box
firefoxos_phones

Final thoughts.

If I had to pick what I'm most proud of in this gigantic effort, it would be the Firefox OS UI kit. 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 UI consistently, we managed to deliver a product that felt like one single, cohesive experience.

Check my contributions to the Firefox OS UI in Mozilla's Wiki →

Review more solutions to real-life problems.

email.   |   linkedin.   |   works.  |   articles.