Herding UX: How to Plan a Workshop for a Diverse Creative Team

Larissa

0

A few weeks ago, the entire User Experience Team came together for our UX Summit to reflect on our work and our organization. As part of the week’s activities, I planned and led a day-long workshop around the goal of creating and shipping products that our users love.

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.

Self reflection

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.

Group mapping

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.

Drawing Insights

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.

Polish All The Things!!1

ibarlow

0

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

icon tests

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

tab-increment

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

tab-tray-opening

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

Screen Shot 2013-05-03 at 3.02.24 PM

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

Screen Shot 2013-05-03 at 3.05.29 PM

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

reader

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

Screen Shot 2013-04-19 at 3.46.44 PM

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

Screen Shot 2013-05-03 at 3.23.15 PM

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!

Discovery in the Marketplace

mmaslaney

0

iStock_000005209088Medium

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

Apps Based on Interest

App Collections

App Collections

Third Party Recommendations

Third Party Recommendations

Localized Apps

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?


 

Helping the Commons Thrive: A mentorship opportunity with Bauhaus University UX students

Larissa

0

This Spring, the Mozilla UX team is helping mentor a class on design methodologies at Bauhaus University in Weimar, Germany. The class will explore the question: “How can we make the commons thrive?”.

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.

Firefox, Android and Quit Buttons

ibarlow

4

With the recent launch of Firefox 20 for Android, we retired the quit button. Some of you noticed. Some of you were sad. Which in turn made us sad. Here’s how you can get it back, and some background around why we removed it in the first place.

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!