Mozilla UX

Our team has grown to 3 with Przemek (Senior Visual Designer Firefox OS) coming to us from BlackBerry (RIM).

Prior to joining Mozilla, I worked with Przemek in the past for many years on multiple Mobile OS releases, last being the BlackBerry Playbook. Over the past year, Przemek has been the key figure in designing and shipping the BlackBerry 10. Some of his key design contributions can be seen in the BlackBerry 10 app icons and the stylish clock app in bedside (night) mode:

For the past week Przemek has been focusing on polishing our key productivity on Firefox OS for the upcoming maintenance update, a great way to get familiar with our design language. However the entire visual design team soon will be shifting into next gen app design, since now we have a foundation, with Przemek’s help its time to push the platform!

Case Study: The Edit Icon on Firefox OS

Jan 25 2013

Patryk Adamczyk

When Designer Experience is Trumped by

In Market User Validation Testing.

With our extremely short time frame on design for v.1.0, we had a good idea what metaphors needed to be covered in the action icons. Beyond the visual design (post coming soon), our focus was to simple, have a few contextual metaphors rather than very specific metaphors (icons) for each action. The reason for this was to reduce the learning curve and minimize the amount of metaphors we needed to create. We opted not use text labels under icons due to the lower resolution shipping screen which would render these unreadable.

We felt strongly that the metaphor to create or add new content should be a “+” and to edit content should a pencil accompanied by an object, like a document. For a North American audience this would make sense… after all, search for “edit icon” in a search engine.

However a couple months back our User Research team conducted a few user tests in our Latin America launch markets, and the users had trouble with differentiating between the edit and compose iconography. Part was an interaction issue (location and actions had to be adjusted), but we needed to add variety and modify some of our metaphors. Leaving us a couple weeks before our gold build to make these changes, we had to scramble. We decided to change the edit icons to text strings for many reasons, most importantly, for clarity however to due to technical constraints this was not possible. We proceeded by modifying the metaphors instead, the pencil became the universal“edit” metaphor and we needed to add a few more support metaphors like “picture” and “contact”. And special cases like entering the email’s list multi-edit mode does not contain a pencil at all, since we didn’t want the user to confuse this with an email compose action.

The Future.

There will be more tweaks to the iconography as we roll out updates. But this made me also want to rethink the problem. We still want to reduce the amount for unique visual metaphors for clarity and scale considerations but still the flexibility for a wide variety of icons. After having a few chats with different designers this concept has a lot of potential and should be executable (on a bigger than 3.5” screen) on future devices.

The icon is the noun and the label is the verb. Thoughts?

“Revitalizing Unloved Devices” A talk by Matt Rogers, Co-Founder of Nest

Jan 22 2013

Zhenshuo Fang

Matt Rogers, founder & VP of Engineering at Nest, gave a great talk on Revitalizing Unloved Devices at Designers + Geeks last Thursday. For those of you who don’t know, Designers + Geeks is an open community for people interested in design, and features talks from experts on design, technology, start-ups, and all manner of geekery.

In this talk, Matt talked about the reason why some industries became stagnant and what happened to those forgotten, unloved devices. He also shared his firsthand experiences in reinventing a whole product category and bringing desirability to one forgotten gadget, the thermostats.

Here are the highlights of his talk and my sketchnote. You can also watch the talk here.

What causes stagnation? When having a product that has a big enough market, companies sometimes stop challenging themselves and stop innovating. Matt used the example of Rio the digital audio players, blackberry and vacuum cleaner to explain how big companies became stagnant.
What causes innovation? In Matt’s opinion, frustration of using those devices causes innovation. He shared his experience working at Apple and how Apple invented iPod and iPhone by “designing from scratch, and keep improving”.
How do you avoid becoming the stagnate product or company? To avoid the “defense mode” and stagnation after a successful product, companies should “not be afraid of replacing yourselves and be the worst critic of your own product.” If you don’t, someone else will eventually replace you.
How do you make people exited? In the end, Matt shared how they make people excited about the learning thermostat, Nest. Aside from a great design, Nest has a whole service behind it, including matching websites, Apps to view and manage energy use, and customer services. “We give people no excuses to not buy nest.” The nest team even designed there own screwdriver and included it in the package (which is pretty genius).

Sketchnote of Revitalizing Unloved Devices

Sketchnote of the talk: Revitalizing Unloved Devices

The core idea of Matt's talk is that a company should never be afraid to replace itself and take the risk to do something new. I'm glad to say that here at Mozilla, we share the same understanding, and never stopped improving on our products and bringing better experiences for our users. Also, we are not afraid of risk ourselves to try something new, like the Firefox OS project, and a lot of other projects at Mozilla.

Countdown to V.1.0: Berlin Work Week and Sound Design

Jan 18 2013

Patryk Adamczyk

In summary… The Firefox OS Work Week in Berlin was a success, the team managed to fix all of Mozilla’s blockers for a V.1.0 Gold Build Candidate.

During the week, I had the opportunity to sneak out to the east side and visit a couple of the local designers contributing to the project, one being Aaron Day who I worked with on the Firefox OS Sound Design. With such a global community it’s rare to see one another face-to-face, and the timing gave us a chance to have our first meeting in person, as well as do a post mortem on the design with a 1.0 device in hand.

So Where Are We Now? Initial Brief… What is Firefox?

The Firefox brand is both fundamentally human and deeply high-tech. The humanity comes from its status as a non-profit, open source product, built by a passionate community of users around the world who support Mozilla’s mission of advancing the web on behalf of individuals. Simply put, it prioritizes people over profits.

The high-tech side comes from its rich history of driving the Web forward by fostering innovation and creating opportunities for new ideas to develop and thrive. We believe that the Web is the defining creation of this era and are dedicated to both protecting and advancing it.

A successful sound design for Firefox should bridge these two worlds. Keywords that come to mind include: organic, optimistic, human, innovative, honest, smart, confident, and warm.

The Concept.

Our aim was to create 3 different themes for the sound design to cover a range of users.

The Baseline, the essence of Firefox. Contemporary. Organic. Approachable. Casual.
Baseline Variation A. Elegant. Soft. Feminine. Relaxed.
Baseline Variation B. Performant. Loud. Direct. Business.

Those following the project, however, would have recognized that ambitious timelines and our small team forced us to prioritize coding the app to a feature complete state, OS stability, and performance over themed notification playback. Audio playback in general was a late addition, not to mention user selected ringtones and notifications. So perhaps for version 2 of the platform these will make an appearance.

Aaron’s “office” and his studio.

The Concept Revised.

As our original requested features for sound themes were de-scoped and our launch markets were in flux, I decided our best approach would be to create a wide palette of sound with focus on alarm and ringtones. Audible notifications are important, however in our launch markets due to prevalent mugging discretion is prioritized over audible notifications.

Alarm Tones.

The emphasis was on complexity and elegance for a total of eight tones. Yes, we did include some classic, jarring tones mimicking standard alarms:
Alarm Clock Classic Clock Alarm Progressive

I wanted to make the “wake-up” process less of a sonic sledgehammer but rather something progressive and sensitive to one’s emotional state. Focus was on a smooth ease in, a gentle good morning… Alarm Clock Soft Humming Waves

Ringtones.

As with alarms, the classics are included, with five ringers from actual phones. However the phones we chose have more characters and, at least for North America, are unique tones:
Ringtone Classic Courier

The other ten tones have wide spectrum of flavour. Variations on classic ringtones from discrete to loud.

Some repeating: Ringtone Digital Dapple
Some progressive: Ringtone Digital Ascent

With the last few cycles we also tried something much more experimental. Many users select music as their ringtone. What if we created a track structured like a ringtone but with flavours of our launch South American market… drums, urban, youthful, electric… Ringtone Vamos La Elektro

Notifications.

The OS includes 12 notifications, with focus on variety and directness over experimentation. Our default notifier: Notifier Bell

Aaron with the mixer.

Post Mortem

As we work towards various .1 updates on the path to a version 2 release, you will witness improvements in various aspects of the sound design.

Design Story.

With a better grasp of our upcoming schedule, and the recently completed Firefox OS brand identity, tightening the audio design story and adding the audio theming is high on my list. Various partners will want to add their own sound identity so a user focused method for switching between these sound profiles is key.

Quality.

Disk I/O (playback performance) and storage has been a challenge on the entry hardware we’ve been designing. We’ve managed to optimize the file size by maintaining maximum sound quality by utilizing the Opus Audio Format however there was still one factor which we couldn’t optimize, and that is the hardware speaker. Although the software build was completed, final hardware was still in flux. The tones on the device sound fine in many instances, but some of the more subtle sounds have clipped frequencies by the enclosure. As we have a clearer OEM partner road map for the future releases this will be addressed.

Performance.

Beyond the addition of new content, only in the last few weeks did we finally see audio feedback, haptics, and transitions work together, though it is no surprise that tuning is needed. The next few months will be spent on making them all “sing” in harmony.

Expect plenty of polish and optimizations in the months up ahead.

Highlights from Cyd Harrell talk at BayCHI

Jan 10 2013

Mary Trombley

Cyd Harrell, formerly VP of Research for Bolt|Peters, gave a great talk on Fearless Mobile Research at January’s BayCHI monthly meeting. For those of us in the San Francisco Bay Area, BayCHI is a terrific resource for UX knowledge and networking.

Harrell’s talk focused on tools and tips that could help practitioners perform better research– either on mobile apps or with mobile devices. Most of the the tools required iOS; I hope we’ll see similar products developed for Android soon.

The highlights:

UX Recorder: an iOS app that records on-screen activity and gestures along with video from the front facing camera (and audio). It is intended to replace a document camera for recording user testing sessions of mobile Web sites. This looks like a good option for those of us testing mobile Web sites (you can’t use it to test apps).

Delight: records iOS app screens and gestures, which are then uploaded to a server for viewing and sharing

Post-its: Harrell notes that they are almost the exact width of the phone, making them great tools for paper prototyping.

dScout: an iOS and Android app that allows you to send your participants on “missions,” which can include such traditional activities as journaling. dScout has software to both design these missions and monitor and analyze the data from them.

Blurb Mobile: participants with iOS can use Blurb Mobile to sequence captured video and photos, creating rich stories.