Firefox for Windows 8 Touch(AKA Firefox Metro) is a touch-optimized browser designed from the ground up for Windows 8 platform.


NEW PLATFORM, NEW DESIGN LANGUAGE

Since March 2012, I began to work on a challenging but super exciting project: designing Firefox on Windows 8 Touch. This was before Windows 8 officially released to the consumer market, so I started off by spending many hours learning about Microsoft’s Metro design language.

Windows 8 has its own patterns on navigation, touch, and commands. It promotes direct interactions with content, leverages the screen or device edge for contextual commands. Influenced by Swiss design and Modern Bauhaus, the design of Windows 8 feels clean, crispy, flat, and grid-based.

 

During my time generating design ideas,  I was faced with a few interesting challenges:

CHALLENGE ONE

How can Firefox Metro deliver a consistent “Firefoxy” experience and also stay native on Windows 8?

One strategy I used to solve this challenge is: Native Design Language [form] + Consistency Experience [function]

Embrace Native Design Language

There are many reasons to adapt a native design language.

  1. The application will speak the same language as others. Being able to take advantage of standard libraries, implementation can be streamlined.
  2. The users don't have to spend extra efforts adopting new interactions or gestures since every other app works the same way.
  3. Many Windows 8 hardware products, such the "Touch Mouse", only recognize native system gestures. Going native will make the life of people who interact with mouse and trackpad much easier.

With a native support for Window 8, Firefox Metro puts content first, delivers a modern full-screen browsing experience.

  • Tab panel is at the top for navigating and switching in between sites
  • All your contextual commands stay at the bottom, close to your fingertips.
  • App contracts are hooked up to let you search and share from anywhere
  • Snap view and filled view are supported for multitasking needs
A first-run tour I created using Hype2 for usability testing.

A first-run tour I created using Hype2 for usability testing.

 

Consistency Across Platforms

Firefox is the flagship brand that all our consumer products fall under. The big family includes Firefox Desktop, Firefox for Mobile, Firefox OS, and the latest member: Firefox for Windows 8. The entire team has been working hard throughout 2012 to pursue one of our major goals of the year: getting Firefox to feel like one product [a related presentation by our Firefox UX lead]

While Firefox Metro is getting a new look and feel, our visual design lead Stephen Horlander and I have also put lots of thoughts on making it feel like a member of the Firefox family.

1. Content Layering

Layering of content has been a common UI element sense in Firefox for Android (Diagram made by Ian Barlow). Now this concept has been widely applied to Firefox on Firefox OS and Windows 8 as well.

2. Unified and distinctive curves

We use curved tab shape to communicate a soft and friendly experience. This unique and organic shape also differentiate ourselves from other competitors.

3. Awesome screen

An unique and powerful Firefox’s feature. Start typing to get a “frecency-based” list of your history and bookmarks. The awesome screen will always provide multiple internet search options for your input.

CHALLENGE TWO

How to rapid prototype new touch language to communicate ideas while there is no Windows 8 prototyping tools available?

During the first few months generating design concepts, I found it hard to simulate the W8 touch experience in a quick and dirty way, without building a functional product. In order to get the experience out and gain enough feedback to iterate, I decided to Video Sketch the Start Page of Firefox Metro just using Keynote.

This prototype was produced early stage of the project in May 2012, thus some visual and interaction design details have evolved since then, for example URL bar has been moved to the bottom.  The video prototype was surprisingly well received by the public with 68K views on Vimeo. I also wrote a blog post on Mozilla UX to explain the process of creating video sketch.

CHALLENGE THREE

How to make a touch-optimized browser work great with mouse and keyboard?

Windows 8 is the first and only platform that is across desktop, mobile, and TV (Xbox). Before discussing whether that is a good strategy, there is no doubt that a majority of Windows 8 users still interact with mouse and keyboard. Even though Windows 8 has a forward-thinking strategy that every PC or laptop will soon have touch-screen on it, mouse and keyboard users can not be neglected yet.

I summarized some good design practices learned from working on Firefox Metro into a separate story: Design for comfortable use.

 

PROCESS WORKS

A small amount of my process documents, such as interaction specs, mockups, are available as listed below.

In April 2013, I gave a lightning talk to the entire Mozilla UX team about Firefox Metro, the present and the future.

In Oct 2013, Metro team gave demos to entire Mozilla communities on Mozilla Summit 2013, see a shirt I designed for the event. 

In November 2013, I conducted a usability study of live version of Firefox Metro with potential v1 adopters (Firefox users who have Windows 8 devices). I set up a usability lab in a conference room and captured participant's gestures, face, and the screen. The study is consist of a Windows 8 usage interview, scenario-based testing, product reaction cards. The full report is available online: http://swipe.to/7697k.

 

AGILE

To ship Firefox Metro, I worked closely with one visual designer, a team of eight engineers, one product manager, and one program manager in an agile environment. Metro team is the first team that adapts agile development model at Mozilla. Looking back, I believe the structure was tremendously helpful for setting up development plans and making sure every stakeholder is on the same page with the development progress.

The same time, I noticed UX can often get lost among all the development and release discussions. It was so easy to immerse myself into ongoing implementation work while sometimes it's quite necessary to revisit our vision and sprint the design. To handle this, I set up a separate communication channel with front-end developers, organized design spikes for future product release, invited stakeholders to observe usability study. As a result, those activities helped encourage stakeholders to express their opinions about UX and increase their engagement and sympathy with Firefox Metro.

 

A NOTE ABOUT RELEASE

I started working on Firefox Metro since the first day the project was born. Our team worked hard to ship a solid version one product from Nightly channel to Beta channel. Firefox Metro won a title of the best Windows 8 browser by laptopmag.com, including the best UI design.

Since so much love and efforts have been poured into this project, it was difficult to see that starting from March 14, 2014, Firefox Metro is no longer available due to lack of people using the Metro UI on Windows 8. The VP of Firefox posted an official announcement. While it was an unfortunate decision for the product, I had a great time learning to design for this new platform and building something cool with a group of awesome people.

These awesome people are(by IRC names, the mozilla way):

  • Metro Engineering: ally, bbondy, emtwo, fryn, jimm, jwilde mbrubeck, mfinkle, rsilveira, sfoster, timabraldes
  • Product and Project Management: asa, kar, marcom
  • Firefox UX: madhava, mmaslaney, shorlander
  • QA: juanb, kjozwiak