Gemma is a User Experience Researcher. She is based out of Chicago. She has a background in nonprofit development, a BA in Philosophy from Reed College, and an MLIS from the University of Illinois. Before joining Mozilla she worked at Razorfish as an Information Architect. Gemma believes research and design can make the world a better place and she is thrilled to be joining the talented, mission-driven team at Mozilla. When she’s not at work, Gemma spends her time organizing the Chicago UX Book Club, enjoying good food with friends, and spending as much time outside as possible.

For the remainder of 2013, Gemma will be focusing primarily on Firefox Desktop user research projects  in SE Asia.

Running a successful workshop for a large group of designers, researchers, prototypers, and UX managers who work on different products in Mozilla can be quite a challenge. This is my reflection on how I tried to help a diverse group such as ours discuss common challenges and begin creating a shared process.

Plan activities that are relevant to each person’s work

This suggestion seems obvious, but it’s often overlooked in many workshops, especially ones led by those who don’t know the participants well. It’s not uncommon to learn new skills in a great workshop then realize later on that you have no clue how to integrate that learning into your own product process.

I wanted to make sure that my colleagues would walk away feeling like they had something tangible to take back to the product teams they work with. Thus, many of my activities began with individual (or small team) reflections where I asked everyone to apply a framework or process I put together to their own product experiences. This approach provided us with some common tools and language to evaluate our impact as a UX team, while allowing each person to introspect on his or her own work.

Individual worksheets help our diverse team reflect on specific projects while discussing informally

Not everyone has to speak up to be an active participant

I’ve never liked workshops where each participant is forced to share, one after another. I understand the reasons for doing so (such as allowing each person to be heard, not just the majority voice), but it’s hard to scale this approach, introverts hate being required to speak up, and everyone’s answers tend to be verbose variations on the same theme. Besides, with a diverse organization such as ours, things that are meaningful to one product team can be irrelevant to another.

I still had a large group discussion at the end of each activity, but rather than asking everyone to report out, I made sure that it was only one of multiple ways that people could voice their thoughts and observations to the rest of the team. During the individual reflection portion of an exercise, participants had worksheets that they could fill out alone or talk to others about as they saw fit. This task gave people the opportunity to reflect specifically about the issues they cared about. Afterwards, I also asked each person to contribute their thoughts (on post-its or name tags) to a large group visualization. These maps gave everyone a chance to share their point-of-view and quickly see the bigger organizational picture from everyone else’s contributions.

In the end, I think the balance between reflecting on individual team needs and visualizing patterns within the larger UX organization created a richer discussion about issues that were relevant to the entire group.

About 40 participants share their ideas quickly through a group map

Scaffold difficult tasks (don’t shy away from them)

Not every activity in a workshop is going to be easy to explain or easy to do. Some activities are hard because they tap into uncomfortable/sensitive team issues. Others require complex thinking that cannot be compressed into the time you have for the workshop.

For my workshop, I wanted to do a particular activity that I knew was challenging but useful in the long run. So I tried to break it down into smaller tasks that were easier to understand. I also provided written instructions, examples, and worksheets to help my colleagues get started. Despite my preparation, people were still fairly confused in the beginning, but I persisted in explaining the task and why the activity was important, until eventually everyone tried it out. Later on, some participants told me that this challenging activity was one of the most useful components of my workshop for them.

Don’t shy away from activities that challenge the team; they often lead to the most meaningful changes. Instead, acknowledge the difficulty of what you’re asking people to do, give them enough time to do it, and (as cheesy as it sounds) have faith in your team’s ability to figure it out.

Practical Tip: I scheduled my hardest activity about an hour before lunch so that everyone had time to wake up but weren’t sluggish from having eaten or exhausted from thinking. I think the promise of a lunch break encouraged people to power through the challenging task. (Just don’t end late for lunch, or else you will have some very unhappy participants!)

C’est La Vie

I’m a planner so I spend a lot of time preparing for the workshops I lead. Planning the right activities and making sure they run smoothly ensure that a workshop meets its goals and isn’t just a waste of time for everyone involved.

But it’s also important to remember that a successful workshop isn’t one where you hit every bullet point in your agenda; it’s one where the participants get something valuable out of the time they spend with you. As a facilitator, you have to be responsive to the needs of the group as the workshop progresses. Let the discussion go longer if everyone’s energy seems to be there. Cut the activity short if people look like they’ve checked out. If it seems like the group isn’t getting to insights, modify the activity on the fly so that they do.

During breaks and individual activities, I like to get the temperature of the room by talking to individuals and seeing whether they still find the exercises relevant for their particular group. As much as I try to plan beforehand, my activities can still be slightly biased towards an interaction designer’s perspective. It’s important that I check my own assumptions about what other disciplines within the UX team need.

During breaks, people wandered over to the group maps and shared their insights informally

As a parting thought, remember that your workshop isn’t and shouldn’t be the only opportunity you have to accomplish whatever goals you set. Instead, it’s a starting point for later conversations and activities with individuals and smaller teams. The art  of facilitating the workshop is in figuring out where to focus the group’s energy  so that you build that great starting point for change to ripple through your organization.

Firefox for Android UI Hackathon, Spring 2013

Hackathons are a great way to get a bunch of people sprinting through a very focused body of work, and they’re also just great fun to do.

And much to the UX team’s delight, our engineering team recently organized one that was focused solely on UI polish bugs! We almost always have a backlog of subtle but important refinements we’d like to add to Firefox, and while we are incredibly lucky to work with an engineering team that values good design, there are still only so many hours in the day and only so much of peoples’ time available to make fixes. This was a great opportunity to sand down some of the rough edges we had been thinking about for a while.

The hackathon bugs had to be simple enough fixes that could be made in the short time frame of the hackathon, so brand new features were off the table. This was all about polish. And in order for the sprint to be successful, there couldn’t be any road blocks or missing details, so I made sure that whichever ones people wanted to work on had the most up to date instructions and designs ready to go.

—

This was our short list when we kicked off the hackathon. https://bugzilla.mozilla.org/buglist.cgi?quicksearch=sw%3Aui-hackathon

Over the course of a few days, the team knocked off *19* of these bugs. Some of the most visible improvements included:

New tab counter icon

We recently simplified the title bar area to use a single ‘background layer’ colour. For the hackathon we also revisited the icon design to more clearly communicate what would happen when you tapped it, using a visual metaphor that has become more or less the standard for tabs on mobile web browsers. Some earlier design explorations are shown below.  / http://bugzil.la/863379

New tab increment animation

We also wanted to add a little dimension to the new tab counter icon, so we added a fun transition that appears when you create a new a tab.  / http://bugzil.la/863828

Refined tab tray transition

We have been exploring ways of making the tab tray opening feel more fluid and interesting. Below is an example of a parallax-like transition we experimented with for opening the tab tray. A slightly simplified adaptation of the animation below is in our Nightly build. / http://bugzil.la/864960

Text labels in the tab tray

The tab section icons that existed in the previous design didn’t communicate the section contents as clearly as we would have liked, so we replaced them with text labels. / http://bugzil.la/862996

Increased Reader Mode touch target size

Kind of a no brainer, but for some reason the touch area was tiny here for a long time. / http://bugzil.la/862755

Reader Mode refinements

We recently added an option to use Charis — a serif typeface — in our Reader Mode, and it makes for a very pleasant read. / http://bugzil.la/862445

Dominant colour sampling for favicon backgrounds

We display large favicons whenever we can, but many websites still only provide 16px favicons. This often makes for rather dissonant looking lists in our UI. Adding a tint of the favicon’s dominant colour to the background makes individual list items more quickly recognizable, and makes the lists look a little more designed overall. We’ll also use this approach for thumbnail boxes in cases where a screenshot of the website is unavailable. / http://bugzil.la/837392

Optional title bar URLs

We added a setting to let users display URLs in the title bar, instead of page titles. / http://bugzil.la/778216

—

Not bad for a couple of days’ work, right? A huge thanks to Lucas Rocha for organizing the event, and to the Firefox for Android front-end team and all the contributors who participated in our hackathon. Each one of these tweaks are wonderful refinements on their own, and having watched all of them land in the course of a few days was truly delightful. The next few releases are shaping up to be pretty special on Firefox for Android.

Of course, as always if you don’t want to wait for the update on Google Play, you can try out all of these enhancements _right now_ by downloading one of our Firefox Nightly builds. Enjoy!

Shopping for apps is a different experience for everyone. Sometimes it can be easy — you know what you want right then and there, a couple of clicks and you’re done. But what if you don’t know exactly what you want, or you’re just window shopping? If this is you, you may have found that the majority of app stores don’t cater to casual shoppers such as yourself. As a frequent app buyer, I will share a few of my recent shopping experiences and how they have influenced the future design and functionality of the Firefox Marketplace.

Finding Apps 

Last month, I recall painstakingly shopping for the “ultimate” To-do app. I was surprised to find that not only are there tons to choose from, but several also came with high ratings. Because there was little to distinguish these top rated apps from one another, I was left with no other option than to download a few and discover for myself which one best suited my needs. Nothing like a little trial and error experiment when all I really wanted was a quick solution for tracking my Honey-Do list from the fiancé.

We all have our favorite bloggers, columns and influencers that we trust to lead us to next “big thing”. I kick my mornings off every day with a cup of coffee and reading the daily Verge. One feature I especially look forward to seeing is The Verge’s weekly “Best New App”. A couple of weeks ago a new weather app called “Haze” was profiled. After quickly reading the blog’s brief synopsis, I dashed off to the app store to see what all the fuss was about. As usual, The Verge did not steer me wrong; “Haze” not only looks great, but provides a new and unique way to view weather patterns. This “Influencer Experience” shows us the power of recommendation.

A couple of months ago I was browsing through the gaming category of an app store, searching for a game to please my wandering mind, and hopefully waste a few hours of time. Page after page nothing caught my eye. Then all of a sudden — like finding a five in your pocket — there it was: A Super Nintendo RPG port called “Chrono Trigger”. Besides being a RPG classic, the sight of the game brought me back to my childhood and I immediately felt an emotional connection to it. Would I expect a game that came out twenty years ago to be on top of the digital shelf? No, but I couldn’t help but wish I had known about this app earlier. Don’t get me wrong, I’m glad I found my little childhood treasure, but what if apps could find you?

Apps Finding You: The Feed

There will always be room for the in-and-out app shopper, but what if the casual shopper could have apps come to them? Not just any apps, but specific apps based on your interests. “Apps Finding You” is a major theme that the Marketplace team has been exploring. We have been thinking about how to serve the casual shopper with a smarter Marketplace discovery; one that presents you with the apps you want to see and the apps you didn’t even know existed. One of the many ideas the team has been exploring to implement this theme is a Marketplace feed. This feed would start out generic, but would quickly become customized based on the user’s interests. Users would not only be presented with apps, but also with app collections, featured apps, editorials, and third party recommendations — providing additional context to inform their purchases.

Apps Based on Interest

App Collections

Third Party Recommendations

Localized Apps

Feeds have been utilized for content consumption with apps like Zite and Flipboard, so why not utilize them for the app shopping experience? What we are talking about is simplifying the app discovery to be what you want it to be. Instead of presenting me with the entire store, I’m telling the Marketplace that I have a need to find my ultimate To-do app, or that I would love to see my favorite app reviewers give me their “in-store” recommendations, or yes, that I have desire to conquer every Super Nintendo game from my childhood on my smartphone. Hey, no judging — what would I find in your app feed?

Jan Dittrich, who teaches the class at the professorship for interface design, reached out to our UX team about giving his students an interesting design challenge to apply what they’re learning in class. We decided to partner with Creative Commons through Mozilla alum and CC Director of Product Strategy, Dan Mills, to find a topic that was relevant to Jan’s students and to both organizations.

Understanding the Commons and magnifying its positive impact is a topic that’s highly important to Mozilla. We have a great community of contributors who advocate for our mission and continually make our products better. We’d like to continue helping this community thrive and address new needs as it grows.

The Mozilla UX team is also particularly interested in the idea of growing a community of UX contributors. Many of Mozilla’s volunteers contribute to our code and we’ve established tools and processes to allow them to do that. We’d like to explore the ways we can encourage a community of designers, user researchers,  prototypers, and other design practitioners to shape our product. We’re hoping that the work Jan’s students produce might enlighten us in building this community as well.

Lastly, as UX practitioners, our team feels strongly about helping others grow in our field. We’re very excited to have a chance to connect with students and mentor them through the design process. Zhenshuo Fang, Bram Pitoyo, Tony Santos, Bill Selman, and I will be the primary contacts for the students, and we will definitely post updates on this blog as the term continues.

Jan’s thoughts on the collaboration:

An interdisciplinary team of students of the Bauhaus University Weimar is looking forward to envision answers to the question “how can we make the commons thrive?”. I am happy to guide the students and to help them to find solutions while learning the basics of human centered design.

Our project will be supported by members of Mozilla’s UX team and Dan Mills (Director of Product Strategy) from CC. They will mentor the student teams. The topic is an interesting one, as we have the challenge to deal with copyright and licences in addtion to the process of the mere creation of works. Licences are not tangible and on the surface dissimilar to what design students usaually deal with. But beyond the superficial differences I see exiting possiblities. Creative Commons already embraced a rather designerly way e.g. with the concept of the easy-to-understand deeds; and the licences as well aim for being useable and useful. Seen from this perspective, our topic fits very well for a design project.

People who use or could use Creative Commons Licences are put in the center of our concerns so, we don’t have a priori ways to answer the question. The students may explore solutions ranging from classic tools like applications or websites  to services and beyond. For finding solutions that serve the needs of the users, students will be introduced to needfinding methods – like rapid ethnography–, idea generation and testing of solutions. I was preparing the class during the previous months and applied quite some human centered design methods to the teaching concept as well: I met with students, interviewed them, reviewed documentations of previous projects and tested whether novel ways to explain and practice methods work like I expected.

Having the possibility to work with Creative Commons and the Mozilla UX Team is simply awesome and we are looking forward to our project with them.

You broke my workflow!

If you used Quit and were unhappy to see it go, well, we’re really sorry about that. The good news is that it’s easy to get back. Just install the QuitNow add-on, which will put Quit right back in the menu where it was.

Easy, right? Now go forth and quit like the wind!

A bit of history

We introduced Quit about 2 years ago, in a time where Android phones were lower in performance, and had poorer memory management built in than they do today. Our users were having memory issues on lower end phones, where Android wasn’t killing background tasks as well as it should have been.

Now, adding a Quit button was kind of a hack that apps aren’t supposed to do. Quitting an app isn’t really a core UI concept on Android, since it handles this kind of memory management at the OS level, and isn’t user controlled per app like on desktop. But we added it in, and our users were happy.

As time went by, phones continued to get faster, and Android improved by leaps and bounds. Android 4.0 brought with it better memory management than before, and also provided users with a multi-tasking interface that also allowed apps to be manually closed, satisfying those who preferred managing apps on their own over simply allowing the OS to make choices for them.

Growing with Android

As these improvements have developed on Android, Firefox has been improving release by release as well. Firefox 20 shipped with Private Browsing, for example. We have lots of other great stuff in the pipeline over the next several releases. A better homepage. A more beautiful Reader experience. Enhancements to Search. And much more.

The thing is, controls to operate these features need somewhere to live in our UI, and Firefox is designed to be as minimal and out of the way as we can make it. We aim to avoid overwhelming people with UI since web content always comes first. So we tuck things into the title bar, into the tab menu, and remaining items go into the Android menu.

This means that from time to time, we need to do a bit of spring cleaning on our UI to make sure we have the most useful, and most commonly used controls at your fingertips.

Given the advances in the Android memory management I mentioned above, it seemed reasonable to remove the Quit button to free up menu UI, and that it wouldn’t adversely affect device performance. The fact is, users simply aren’t faced with the same issues on newer phones that existed 2 years ago. (I should note that we only removed the quit button on phones running Android 4.0+ because of its aforementioned improvements. This means if you are on Android 2.3 Gingerbread or older, nothing will have changed. The quit button will still be there.)

It’s also worth repeating that Quit simply isn’t a core UI concept in Android apps anyway — notice that none of Google’s apps (GMail, Maps, even Chrome, to name a few) include a quit function, nor do must other independently produced apps.

Make it yours

Of course, none of that is meant to convince you that you shouldn’t have a quit button if you truly have a need for one. And that’s what makes Firefox so great: even if a feature doesn’t exist as core functionality in the browser, chances are that an add-on either exists or can be built to satisfy that need. We recognize that everyone uses the internet differently, and we encourage everyone to customize, hack and tweak your way to a better Firefox that works for you. It’s a lot easier than you think, and can make a world of difference to your experience!

Creating the perfect Firefox interface is a challenging problem. Every user has their own set of common tasks. The challenge is in defining a common “default” interface that maximizes task success for the most people, on the most tasks. Using designer insight alone, it’s not always easy to know the impact of each design element!

Genetic Algorithms

Genetic Algorithms are well-suited to suggesting novel solutions to complex optimization problems.  If one can define the right optimization (fitness) function, GA can calculate the impact of including and placing elements. Using data recorded from Test Pilot Heatmap studies, we have defined a set of “Web Activities” that describe what users actually do using Firefox. These included “search”, “surfing the net”, and “content creation”.

Evolving the interface

We divided the visible interface space into 14,000 “cells”. Each of the 100 possible interface elements were given starting positions, and allowed to grow randomly until all cells were used. We then simulated a set of common user tasks using each random interface, proportional to how often those tasks occurred in the recorded Test Pilot data set. An interface “did well” if the user didn’t have to move the mouse much to complete the task. Top performing interfaces were kept and allowed to “mutate”, by allowing UI elements to “grow” or “shrink”.  When interface elements got “too small”, they were placed behind the “more options” element, and assigned a higher cost to access.

Firefox Next

Within 700 generations, good candidates started emerging, and by generation 1100, convergence was achieved. We then chose the most visually appealing one as our candidate.   GA led to some ragged edges, so did some visual cleanup to squarify elements.  This “cleaned” candidate preformed with 98.1% of the effectiveness of the original.  The result, which we are calling Firefox Next, appears below. Bubbles describe the salient features. In particular, note:

1. Careful balance between user needs for content, and user desire for web advertising.
2. Much larger “back” and “scroll” elements — the commonest interactions users have with browser.
3. Page content de-emphasis, so that users can achieve other tasks on the internet easily.
4. On-screen keyboard, for easy form filling and content creation.

Conclusion

Bringing quantitative methods into design is an emerging field. Firefox Next demonstrates that even without expert designers, quantitative methods alone can create a beautiful, easy-to-use interface.

The Firefox UX team has been thinking a lot about type and readability lately, as part of our ongoing goal to make the web more beautiful and more readable on Firefox for Android than on any other mobile web browser.

Since the web is made almost entirely of text, we do a lot of little things to improve the readability of the web, especially on devices with smaller screens. We subtly increase the text size of content to make reading more comfortable (the algorithm we developed for this has actually been adopted by the folks working on Chromium). We  built a beautiful Reader Mode that converts articles into a simpler and more readable format. In fact, more and more, we find that we are comfortable with the baseline legibility of text in Firefox, letting us explore the broader definition of readabilty.

The web deserves great type

Historically, web browsers have relied on operating systems to provide fonts for displaying content. This has evolved with the rise in popularity of web fonts, but many websites still look to the OS for a generic Sans or Sans Serif typeface to use. This is more or less acceptable on desktop computers that ship with tons of fonts, but mobile operating systems don’t tend to provide much in the way of variety (iOS being the exception here, with quite an impressive collection of typefaces from which to draw). Android ships with Roboto, Droid, Droid Serif. All of these are strong for use in UI design, but they aren’t as well suited for the kind of long form content we see on the web.

So we thought, what if Firefox could make the web look better than Android’s default font allow? What if we shipped our own fonts inside the app? It seemed like an interesting opportunity that no one else was doing on Android browsers, so the search for fonts began.

Defining the right typeface

What makes a great typeface? It all depends on the job it needs to accomplish, so we started out by defining a set of criteria for finding the right pairing of serif and sans serif typefaces.

1. Must be beautifully designed and very comfortably readable
2. Design must be subtle – this is an all-purpose font. Like Helvetica, it should adapt to content but not make any strong statements about itself through its appearance.
3. Must have broad character support for multiple languages (good coverage across Latin/Cyrillic/Greek character sets)

Open vs. Licensed

Given that Firefox is an open source product, the natural place to start was to explore options for open typefaces. Sadly, we often found that either a typeface was beautiful but lacking in character support, or it had great coverage but was either unattractive or simply not appropriate or refined enough for general purpose use. So we moved on and started reaching out to font foundries about licensing fonts to use, and they delivered some of the best fonts available today.

Initially, paying to license fonts seemed like a reasonable alternate solution. It is quite common to pay money to get good design, whether it’s an illustration, a photograph, an icon, a piece of graphic design or a typeface. As discussions evolved with our teams, however, placing a paid font into our app opened up deeper and more philosophical discussions about how to deal with licensed objects inside of open source products. There is a real tension that exists between maintaining our free and open ideals and licensing things that will greatly improve the quality of our products — and that even now it is up for debate as to what the Right Thing to do is.

We felt it would be best to take it to the newsgroups and talk through our options. Paid or Free, Licensed or Open.

Samples

So to gather more research in preparation for a newsgroup discussion, we went back and did a much deeper dive into open source typeface design. And in our research, we discovered some open fonts we had missed the first time around.

We also learned that some of the fonts we dismissed early on for lack of  character support actually stacked up much better than we thought!

Unsurprisingly, paid fonts performed exceptionally across the board. However, the open fonts were more competitive this time around. Charis (serif) was a new find, and performed surprisingly well. Open Sans (sans serif) is strong across the board, and has considerably better character support than we initially thought. Gentium and Source Pro were also nice, but were either too distinctive in their design (Gentium), or lacked the character support we require (Source Pro). Even though the quality of design of the paid fonts remained superior to their open alternatives, it became a difference of A+s vs. As, whereas before it was A+s vs. Cs.

Given the closeness in quality between the open and paid fonts we were comparing, we decided to put our top picks for open fonts — Open Sans and Charis SIL — into our Nightly test builds and live with them for a while to see how they performed, and to get some more testing and feedback.

And it turns out, they are awesome, we’ve been very happy with them so far. The difference is subtle, but hugely enjoyable. The fonts are set to launch with Firefox 21 in mid May (goes to Beta in early April). But who wants to wait that long when you can try these fonts in our pre-release Firefox Aurora right now? Go get it!

What we’re after is the “paper cuts”, the stuff that gets in the way or annoys you about Firefox on a daily basis, and that we could help get prioritized.

So please, head over to Reddit, and tell us about your pet peeves!

Our booth really popped!

Inside the meeting rooms.

Firefox uniform

Delicious Firefox OS latte from our booth.

The typical premiere OEMs had little new to announce allowing emerging OEMs to shine. It was impressive to see the improved quality seen in the handsets by ZTE, Alcatel TCL and Huawei. ZTE and Huawei where wedged right between Samsung, to the passing visitor their hardware and overall presence was on par with the Korean giant.

I was impressed by the HTC One and Sony Xperia Z‘s hardware, can wait to test drive those phones on a daily basis. Their UI skinning also appeared to give the user more value than just icon swaps like often seen in the past with Android skins. The Fujitsu Stylistic S01 (raku raku)
was also a fresh take on an android platform geared towards a specific user, elderly in this case.

The night before… The Firefox OS stand at the Telefonica booth.

Deutsche Telekom’s (T-Mobile) booth, the theme was a digital garden.

Our partners had some great announcements, like Sony’s commitment to release a Firefox OS phone in the near future. You can now flash the Sony Xperia E with our software and its all described in this great write up. Sony seems to really get it.

Twitter has announced working on an app for Firefox OS, along with core features, the app will also include Web Activity support, meaning that it will allow users to tweet photo from any other app supporting Web Activities:

“Similar to our other mobile apps, Twitter for Firefox OS has a rich interface, featuring the Home, Connect, Discover and Me tabs, as well as search and compose Tweet icons, so you can easily find and send Tweets from anywhere in the app.”

Mozilla always has a different approach to dealing with challenges. We did not have any booth girls or hired actors. Everyone working at the booths was a Mozillian, we had everyone from VPs to developers giving floor demos. A few of our brave community reps were even flown in from Latin American and Spain for the show, listen to their experiences here on Youtube. I had a chance to finally meet one our contributors, Javier Pardina who submitted a series of beautiful wallpapers for our v.1 product, finally allowing him to finally see his photos live on device.

Overall it can only be concluded that the web is the 3rd dominant mobile platform, along side with Firefox OS, all the new mobile OS’ have a huge web component or place web technology apps as first class citizens (Ubuntu, Tizen & BlackBerry 10). I can’t wait to see our two launch devices in people’s hands later this year.

The Alcatel One Touch Fire (above) and the ZTE Open below.

For more Mozilla MWC photos please visit our flickr set.