India Firefox OS User Research

Gemma Petrie

3

India Photo

Bangle shop & mobile phone break in Jaipur, India. (Photos by Gemma Petrie)

This research was led by Cori Schauer & Gemma Petrie.

Last month, Mozilla traveled to India to conduct user research on mobile usage. We are grateful to our talented research partners Dear and Tazurba International for their expert local knowledge, to the amazing Delhi and Rajasthani Mozilla communities who provided critical logistics and translation support, and to the many Mozilla staff members that took time out of their busy personal and professional lives to join us in the beautiful (and blazing hot!) Indian summer.

Field Team

The Mozilla User Research team believes it is important to bring a wide variety of colleagues into the field with us for research. We know that first-hand experience does more to build empathy and understanding than a presentation ever will. This trip marked our largest field team to date and included:

  • Jared Cole, Design Strategist
  • Francis Djabri, FxOS UX Designer
  • Peter Dolanjski, FxOS Product Manager
  • Sandip Kamat, FxOS Product Manager
  • Bruce Huang, FxOS Product Manager
  • Juwei Huang, FxOS UX Designer
  • Elizabeth Hunt, Marketplace UX Designer
  • Jane Hsu, FxOS Go-To-Market Strategy/Partnerships
  • Rina Jensen, Content Strategist
  • Amy Lee, FxOS Visual Designer
  • Peiying Mo, L10N Program Manager
  • Arky, L10N & Community Rep
  • Rob Rayborn, User Advocacy
India 2

The mausoleum of Sufi saint Nizamuddin Auliya in Delhi & a colorful truck on a Rajasthani highway. (Photos by Gemma Petrie)

Research Plan

We aimed to answer the following questions with our research:

  •     Who are the people in our target market(s) in India?
  •     What motivates someone to purchase a mobile device?
  •     What can Mozilla enable people to do with a Firefox OS device?
  •     How can Mozilla make a difference?

India is a vast and varied country and it was difficult to design a research approach that would cover multiple regions with adequate depth in the time we had available. We decided early on to focus this initial phase of our India research program in the north, specifically in Delhi, rural Rajasthan, and Jaipur.

This research used a variety of methodologies to gather data. We conducted one-on-one interviews in Delhi and Jaipur and worked with community members and local researchers to meet with local families, shopkeepers, and visit rural villages. In addition, we also conducted informal ethnographic observation during our two weeks in India.

India 3

Pre-loaded content & mobile usage in rural Rajasthan (Photos by Gemma Petrie)

Ethnographic Observation

One of our primary goals was to immerse our field team in Indian daily life and culture. Our large group and broad geographic research area presented some initial challenges during our planning stage. We made the decision to engage dscout to bring some order to our data collection and help field team members that were new to research think about how to capture and analyze their experiences.

We split each day into two modules with different themes like phone stores, mobile content, or family. We then divided our field team into small groups, accompanied by Mozilla community members, to explore different areas. Each group added photos, videos, and answers to a few short questions to dscout, allowing us to quickly gather a large amount of structured information on each theme. This data, combined with our team’s first-hand field experiences, provided a valuable contextual foundation for our research.

Mobile Open Houses

We conducted one-on-one interviews with 55 recruited participants at “Open House” events in Delhi and Jaipur. The interviews were split into four main topic areas: Current phone and technology usage, phone purchasing process, mobile content, and Firefox OS device user testing.

We’ll be sharing our findings from the Open Houses and our other research activities soon. Stay tuned!

UX Book Club: UX for Lean Startups

mhanratty

Get your carving knife, its time to trim the fat and start working lean. With the success of Eric Ries’s book The Lean Startup minimum viable product, A/B testing and validated learning are on the lips of every 23 year-old CEO and product manager in Silicon Valley. But what is the philosophy behind lean development and how do UX designers and researchers fit in? Laura Klein, author of UX for Lean Startups, joined us on Tuesday, May 28th at the UX Book Club San Francisco to discuss her book and her experiences designing lean.

WHAT IS LEAN?

Come up with a hypothesis. Test it. Repeat until you have a product people will buy/use. Lean methodology at its core is the scientific method we all learned in grade school. So how do you start applying this approach to product design? Klein suggests the following:

1. Identify the riskiest assumption of your product or feature.

2. Design an experiment that will validate (or invalidate) your assumption.

3. Release your experiment to your customers.

An example used in the book is Dropbox. The riskiest assumption for Dropbox was their belief of a consumer desire for personal cloud storage that synced across devices. To test this assumption the Dropbox team created a video of how the service would work. If you watched the video and liked what you saw you could sign-up to get the product when it was released. Thousands of people signed up and the team knew there was a need for their product before committing the resources to build the service for real. Figuring out the smallest thing you can build to test your assumption is key–you don’t want to write a bunch of code for something that no one wants. As Klein said to us, “The question usually isn’t, ‘Can you build it?’ The question is, ‘Should you build it?'”

HOW IS THIS DIFFERENT THAN USER-CENTERED DESIGN?

Lean is a lot like user-centered design. It advocates for what we as designers and researchers have been screaming about for years–test with your customers before you release your product. Klein believes however that while user-centered designers are skilled at testing the usability of a solution, we often fail to validate the usefulness of a solution. Usefulness is tied to your business objectives. Does the feature increase customer acquisition, improve retention, increase profits, etc.? You can design and implement a fantastic commenting feature, but if commenting doesn’t lead to growth or profits then it isn’t particularly useful is it? There is a strong emphasis on quantitative data and analytics in lean. To understand if what you have designed actually has an impact on your product’s bottom line you need to identify and track the metrics that tell you whether you are headed in the right direction or are veering off track.

WHY SHOULD I READ THIS BOOK?

Even if you don’t work at a startup you will find useful lessons and a powerful framework for product design in UX for Lean Startups. For designers and researchers I suggest skipping Eric Ries’ book The Lean Startup and reading this book instead. It’s shorter and you won’t have to muddle through chapters geared toward MBA students. Note: UX for Lean Startups doesn’t get much into the nitty gritty of analytics. To learn more about what metrics you should be tracking pick up Lean Analytics by Alistair Croll and Ben Yoskovitz.

(Re)Designing Firefox

Stephen Horlander

6

Update — 2014/05/28
I added a slideshow of some of the design iterations we went through from Firefox 4 to Firefox 29.

Warning: It’s image heavy, might take a while to load on a slow connection.


So, we launched a thing. You may have noticed it. We called it Australis. Now it’s just called Firefox.

We spent a lot of time on it.

Dedicating yourself to a project can become an intense experience. You think about it all the time: in the morning, at dinner, when you are trying to watch a movie, in the shower, in your sleep, when you should be sleeping…

But then you set it free, because it’s finally mature enough for that. It’s exciting. But it’s also really scary. You are never sure if you made the right decisions along the way. I like to take some time in the post release glow for some reflection.


History

Left: Firefox 4, Right: Firefox 29

So how did we get from there to here?

We launched Firefox 4 in March 2011. It was a big change from Firefox 3. It introduced the Firefox button, revamped the add-ons manager, removed the status bar, combined the stop, go and reload buttons and included a comprehensive visual update—all while still having time to prototype and discard some other features along the way.

And yet it wasn’t perfect. It had a lot of the rough edges that projects accumulate in the process of going from being designed and built to being shipped.

Firefox 4 was our last monolithic release before we moved to a rapid release cycle. Six week cycles seemed like the perfect timeframe to iteratively smooth out the rough edges. So I created a project to do just that.


Philosophy

The project that I had created for iterative refinement however quickly transformed into a significant overhaul.

People in the frame: Sinchan Banerjee, Alex Faaborg, Brian Dils, Trond, Stephen Horlander (my legs), Jennifer Boriss, Frank Yan, Alex Limi
Taking the picture: Madhava Enros

At the beginning of June the UX team met up for its first post Firefox 4 team offsite. On the agenda was figuring out “What’s next?”. The entire team gathered in a room to pitch ideas and talk about problems unresolved—or that had been introduced—during the development of Firefox 4.

One theme that had been floating around for a while rose to the surface— Firefox is about customization, it should feel like it’s yours.

What would this mean for the interface we had just shipped? A lot of ideas were tossed around. Eventually one guiding principal stuck—make the best core experience we can and allow users to add and change the things that matter the most to them.

Building a fun easy to use Customization Mode—along with a more flexible Firefox Menu—would become the foundation of the new Firefox.


Visual Profile

So Curve, Such Aerodynamic

The offsite also sparked a set of other ideas that would make up what became known as Australis. Primarily: unifying the disparate bookmarking elements in the main window, refining the visual design, consolidating related or redundant features and streamlining the tabstrip.

While the redesigned customization mode would be core to the experience—the redesigned tabstrip would change the entire profile of Firefox.

“Make it look faster. No, no! It needs more air vents!”
Firefox 4 Aerodynamic Sketch — 2010

We had explored the idea of adding visual cues to Firefox to make it feel faster and smoother before. Yet some of the ideas were a little over the top.

Curvy Tab Sketch — June, 2011

This sketch from the design session—inspired by a previous mockup from Trond—had a curvy tab shape that immediately resonated with everyone.

It also had one important additional design tweak—only render the tab shape for the active tab. Highlighting the active tab reduces visual noise and makes it easier to keep your place in the tabstrip.

The early curve shape tried on a few looks. At first it was too angular, then it was too curvy, then it was too short, then it was too tall and then (finally) it was just right.

Design ideas for background tabs on Windows — October 2011

It turns out that designing background tabs without a tab shape is a lot easier if you have a stable background to work with. Windows 7 has translucent windows of variable tints and Windows 8 has flat windows of variable color. This meant we needed to create our own stable background.

We went through several variations to ensure that the background tabs would be legible. First we tried creating a unified background block, but it seemed too heavy. We even thought about keeping background tab shapes and highlighting the active tab in some other way.

Eventually we decided on a background “fog” that would sit behind the tabs and in front of the window. Think of it as an interface sandwich—glass back, curvy-tab front with a delicious foggy center.

We also made sure that adding curves didn’t increase the width of the tabs taking up precious tabstrip real estate. And we removed the blank favicon placeholder for sites without favicons. A small tweak that frees up some extra room for the title.


Menu Panel and Customization

Redesigning the Firefox Menu

One size really doesn’t fit all with something as complex and personal as your web browser. Add-ons have always made Firefox a thoroughly customizable browser, however arranging things has never been a great experience out of the box.

But before we could tackle the customization behavior, we had to rethink the Firefox Menu.

The main toolbar is the primary surface for frequently used actions; while the menu is the secondary surface for stuff you only use some of the time. We wanted users to be able to move things between these surfaces so they could tailor Firefox to their needs.

For the updated layout we started with the idea of a visual icon grid. This grid nicely mapped to the icons already found on the toolbar and would ideally make moving things back and forth feel cohesive.

Larger 3×3 Grid with Labels—by Alex Faaborg<

The first grid we designed was wider, with smaller icons and no labels. This quickly changed to a three column grid with larger labeled icons. The updated layout served the same goal but was more clear and also less cramped.

Not everything we currently had in the Firefox Menu would translate directly to the new layout. We had to add special conjoined widgets—also known as “Wide Widgets”—for Cut/Copy/Paste and the Page Zoom controls. We also added a footer for persistent items that can’t be customized away. We did this to prevent users from getting into a broken layout with no escape hatch.

We had some serious debates about whether to use a an icon grid or a traditional menu list. The visual grid has some drawbacks: it isn’t as easy to scan and doesn’t scale as well with a lot of items. But the icon grid won this round because it was more visual, more inline with what we wanted out of drag-and-drop customization and had the side benefit of being touch friendly.

Some items from the Firefox Menu had submenus that could’t be easily reduced to a single action: Developer Tools, History, Bookmarks, Help and Character Encoding. Nested submenus hanging off of a panel felt pretty awkward. We had several ideas on how to handle this: inline expando-tray™, a drawer(interactive mockup—click History) and in-panel navigation.

We settled on what we call subviews(interactive mockup—click History). Subviews are partial overlays containing lists that slide in over the menu. Click anywhere in the partially visible menu layer to get back to the main menu—or close the entire menu and reopen it.

With the new menu layout Firefox should hopefully work just fine for most people out of the box. But by using the new Customization Mode you can really tailor Firefox to your needs. If you are interested in knowing more about why what is where Zhenshuo Fang wrote a great post about it.


Customize All the Things!

Now we needed to figure out how update Firefox’s aging customization experience. Things started off a little ambitious with the idea that we could combine toolbar customization, themes and add-ons into the same UI. This led to an early interactive demo (it does some stuff, hint: tools icon –> plus sign) to try and see if this would work.

This demo surfaced a few issues: 1) including add-ons was going to be complicated 2) we needed a direct representation of the menu panel instead of a proxy. This led to a bunch of mockups for a flatter interface sans add-ons integration. Eventually I made a second demo without the theme selector that is closer to what we ended up shipping. Then Blake Winton turned that into an awesome prototype that actually did something.

Final Customization Mode

The demos and prototypes helped us quickly get feedback from people on the idea. One of the complaints we heard was that it wasn’t obvious that you were entering a mode. We mocked up a lot of ideas for various ways to give visual feedback that you were in a mode and could now rearrange your stuff. We eventually settled on a subtle blueprint pattern and Madhava suggested we add some kind of animation with padding.


Wrapping it up

Thank you to everyone who dedicated so much time and effort into making this happen.

If you want to know more about the people and process behind Firefox 29, Madhava has a good post with an overview.

I think the post-release glow is over now. Time to get back to making Firefox better.

Cross-posted from here.

Try Out Fira Sans: a Free, Open Source Typeface Commissioned by Mozilla

Jennifer Morrow

12

As designers in open source, we’re constantly looking for opportunities to bring the principles of universal access and redistribution to new areas. While the term “open source” may still be mainly associated with code, the value in free collaboration benefits every discipline – particularly design.

In that spirit, the Mozilla Foundation commissioned famed typographer Erik Spiekermann to create a completely free, open-source typeface in 2013. Thus was born Fira Sans, a gorgeous san-serif font that looks great on the web. So great, in fact, that we’ll be using it in Firefox’s in-content pages such as Preferences and the Add-ons Manager.

fira sans preview

If you haven’t tried out Fira Sans, now’s a great time: version 3.1 introduces 16 different weights, a huge character map, and extensive language support. Also available is Fira Mono, a monospaced version of the original. Give it a spin on your next project!

Download Fira Sans 3.105 (3.6mb .zip)

Firefox’s Redesigned Preferences Feel More like the Web

Jennifer Morrow

12

Another great Firefox improvement is releasing soon!

Firefox’s Preferences, until now, have required navigation through a cumbersome floating window where it’s nearly impossible to find what you’re looking for. This window is a classic example of a common software problem: settings are slowly added onto the interface as new functionality is introduced, and eventually it sags under the weight.

The mess that is current Firefox Preferences

The mess that is current Firefox Preferences

Until now, that is!

The Firefox UX team is excited to announce that brand new, beautiful Preferences are now the default in Firefox nightlies and will soon be in release Firefox. In this redesign, the interface is visually consistent, the information architecture is improved, and the whole thing is rendered in content space rather than as a separate window.

Firefox’s new in-content preferences

Why is it important that Preferences are in the content space rather than a separate window?

  1. Consistency across devices. By using the content space, we no longer have to rely on the ability of a device to draw separate windows and dialogs. This is particularly important on tablets and phones, where window management is more difficult. Now, users of mobile Firefox will see a familiar interface when move to desktop Firefox, and vice versa.
  2. Consistency across operating systems. Windows, OSX, and Linux all create windows and dialogs differently, which means the user’s experience with Preferences was different depending on the OS. Now, as we draw this interface within Firefox, we can make it look and feel identical across systems.
  3. Consistency with the web. Ultimately, the browser is a doorway to the rest of the web. For the browser to behave like a dialog-heavy desktop application rather than the web itself was jarringly anachronistic. Beneficially, rendering like a website also means users won’t need to find and manage a separate window in addition to their open tabs.
  4. Space to grow. Not being bounded by a small, floating window means we can create richer customization experiences. The Add-ons manager has already  moved to content space, and we’ve been able to explore richer use cases as a result. Similarly, expect to see innovative customization experiments as well as the usual Firefox settings.

And before you ask, yes, the next step is absolutely a search field in Preferences to summon the exact setting you’re looking for. This is needed particularly so users won’t have to “learn” our interface, but can instead focus on their task.

A special thank you goes to Senior Visual Designer Michael Maslaney, who’s been spearheading Project Chameleon, the style guide behind this redesign. Another thank you goes to MSU students Owen Carpenter, Joe Chan, Jon Rietveld, and Devan Sayles for creating the award-winning first version of Firefox’s in-content Preferences in May 2012.