Firefox OS Haida
2013 — Firefox OS 1.0 was rushed and derivative. A mandate to hit a date and price point above all else pushed innovation and polish off the table. We shipped, but not many people felt good about the product. For Firefox OS 2.0, we were determined to do better. In early 2013 a small skunk works team was formed to define the next version of the operating system. Our goal was to "...create an experience that is Truly Web, built on the unique strengths of our platform and our community." We called the project Haida.
Haida began with a simple question: "What do we love about the web?" From the very first brainstorm, the team identified flow: the sensation of exploring the web without friction, moving seamlessly from site to site. It felt so unlike iOS and Android, with their native app installs, buy-before-you-try dynamic, graveyards of unloved icons on the home screen, etc. The web at it's best was seamless, safe, and flexible. We saw many opportunities for inspiration and innovation around Flow, and made it our guiding design principle.
One of the first ideas came from Gordon Brander, who saw an opportunity to let users move more seamlessly between their tasks with simple edge gestures. Instead of navigating hierarchies with small UI back buttons or switching tasks via the Home app, what if users could swipe from the sides of the screen to go back to a previous page, peek at a piece of content, etc? This was pre-iOS7 when edge gestures were still fairly novel. Gordon and I worked together to sort through the details, the mighty Etienne Segonzac prototyped the interactions on Firefox OS devices, and I produced animations like the following in After Effects to capture how the system would work in a typical usage scenarios.
With Haida we were also intent on resolving contradictions and missed opportunities in the Firefox OS 1.0 content model. Why did a web-based operating system have a stand-alone browser? Why did we have to install apps before we could use them? Why distinguish at all between "web sites" and "web apps"? We wanted to scrap 1.0's excessively complicated model inherited from native mobile operating systems and replace it with a more elegant, truly web approach. The following video was built in Keynote and After Effects to capture a new way of discovering and consuming content. What if we got rid of "install" completely, and everything—sites and apps alike—was instant?
As we explored this idea further we dubbed it "Unity": a new model for distribution, discovery and consumption of web content, emphasizing instant gratification and consistent navigation. "Browsing" was promoted into the operating system via a new Universal Search bar along the top of the screen, apps and sites were treated as equals with as few distinctions as possible, and "open" replaced "install". Users could open any site or app instantly without having to first install it to their Home screen. If a user did want to add a site or app to Home for easy access, they could "favorite" them, analogous to bookmarking. We believed this model would promote more casual consumption of content with fewer points of friction, while helping to improve the "graveyard of apps" we saw on iOS and Android. The following deck was produced to help dig into the details on the new model:
The changes introduced by these new approaches necessitated a rethink of the overall Firefox OS UX architecture. We had to incorporate new interactions like gestures, new essential system components like system-wide search, and support future Firefox OS devices that lacked hardware buttons. We were also big believers in the usability benefits of clear spatial models, preferring iOS's sliding panes to Android's arbitrary opacity tweens This was before Material Design, it should be noted, which did much to improve Android in this regard. Our approach divided Firefox OS components into clear X/Y/Z relationships, used animations to help make those relationships clear, and optimized for Haida's new core interactions.
Flow also manifested itself in performance. What did new interactions and content models matter if the interface drove you crazy with stutters and stalls? Building on 1.0 performance tracking and evangelization efforts, we captured critical metrics for Haida performance and baked them into the core of the project.
Throughout the development process we optimized for speed through rapid iteration and shared understanding. Building on existing relationships and knowledge from Firefox OS 1.0 was key. And sprints in Mozilla's ridiculous Paris office certainly didn't hurt.
In October of 2013 after several months of development, prototyping, technical validation and internal reviews, I produced the following end-to-end demonstration video to communicate the key features of Haida's new "Truly Web" user experience. The visual design was not yet complete, so I worked with wireframes from Illustrator. The video was paired with hands-on prototypes for stakeholder presentations.
Shortly after the video was completed the visual design team led by Patryk Adamczyk, Peter La and Przemek Abratowski completed their redesign of Firefox OS. They had embraced a "Made with Code" principle that celebrated the strengths of CSS and eschewed over-reliance on bitmaps. The resulting aesthetic was easier to implement, more performant, and scaled responsively across a growing portfolio of Firefox OS devices. It was also beautiful.
With the start of 2014 it was time to share Haida with the world. The venue would be Mobile World Congress in Barcelona. I took point on prepping presentations and marketing assets, translating Photoshop files from the visual design team into looping promo videos and Keynote decks. The following videos were among the deliverables, playing on phones for booth visitors in lieu of fully functional skinned prototypes.
With the completion of Haida I had participated in the design and delivery of two versions of Firefox OS (three if you count the initial prototype). Meanwhile a little company called Oculus had surfaced, Jon Carmack had joined them, and 3D graphics performance on the web was getting pretty darn good. I decided it was time to explore the notion of WebVR. I spun up the MozVR team with Vlad Vukicevic and the Haida vision was handed over to production teams to implement over multiple releases of the OS in 2014/15. Gradually Firefox OS evolve into a much more attractive, genuinely differentiated mobile platform. While it ultimately failed in the market due to larger strategic dynamics, I remain very proud of the work we did on Haida, and grateful to have worked with my collaborators.