musingT

“Firefox helped make the Web more awesome in 2011. We released Firefox 4 with Sync to hundreds of millions of people worldwide; we launched Firefox for Android; added the new Firefox Aurora development channel; adopted a faster release cycle; and introduced Do Not Track to the industry. Now we’re excited to share some of the highlights of Firefox this year in facts, figures and pictures. It’s all part of our commitment to innovating on behalf of people everywhere and continuing to build a brighter future for the Web — in 2012 and beyond.”

Feeling so lucky to have attended my first MozCamp this year (in Berlin), a bit overwhelmed (in a good way) and excited about the future.   Of course, aside from all the great keynotes, sessions and demos… the best part of these events is always the people you share it with.  For me especially, I look forward to the opportunity to meet new people and engage with my colleagues and fellow community members on an entirely different level… pulling ourselves outside various corners of the interwebs (bugzilla, emails, irc, etc…) and having the chance to simply interact in person.  I know it sounds weird but in our world  it’s easy to go for weeks and months (if not years) without much quality time face to face.  So, the experience is simply priceless.

The theme behind MozCamp this year is “many voices, one mozilla”.  A powerful theme that actually goes well beyond this particular event, echoing our amazing global community and diversity of voices united as one, with a common mission.  It really speaks to who we are and what we stand for.  It’s not quite over yet, but I wanted to give a quick shout out to Lee Tom and @mart3ll who captured this theme beautifully in the visual identity for the event: re-energizing the iconic Dino head as a silhouetted symbol for the community, framing it with “many voices” in vibrant colored talk-bubbles. Great work guys!

As you might have heard, Firefox 4 celebrations have been echoing across the globe since the release, with organized parties in various countries, including: the UK, France, Spain, Brazil, Indonesia, India, and many more.  Last week, I had the opportunity to attend the one in Buenos Aires, Argentina.  I’ve been with Mozilla for over three years now, but this was the first time I was able to meet some of our active contributors and members of the open source community in their home country. In short, it was absolutely amazing, a little overwhelming, and totally inspiring.

The Firefox party was held on Wednesday night at Ultra bar in downtown, with over 150 people in attendance.  Equipped with t-shirts, stickers, buttons, free beer tickets, and more… we opened the doors at 8 PM, and soon after, the place was packed and buzzing with Firefox fans.  Matthew (who was traveling with me) and I walked around and talked to as many people as possible, including a few members of the local press.  The reactions to us being there were quite humbling… simply because people seemed so excited to see us.  But the truth is that we felt so very lucky to even be there, and just as excited to meet everyone.  After a short presentation, a raffle and trivia session with prizes… we closed the night with a delicious Firefox cake – which Santiago so gracefully consumed.

The group picture above features our amazing contributors who planned the party.  See any familiar faces?  From left to right, they are:  Guillermo Movia - who leads l10n and engagement, Marcelo Poli – also on l10n, Santiago Hollmann – who leads engagement and is known for his Firefox Murga dance on the streets of Argentina, Hernan Rodriguez Colmeriro – leads Add-ons development and is joining us in Mountain View as an Intern this summer (he has promised to bring mate), Felipe Lerena – engagement, Sergio Andres Rondan – engagement, and Gabriela Montagu who is not in this picture but contributes to localization.  As an added note, the paisley Dino shirt that everyone is wearing was actually designed by one of our design community members, Tracie Andrews.  It was a big hit.

While in Argentina, we attended a few other events: a Hackers meetup on Thursday, and a small Designers meetup that Guillermo helped me organize on Friday evening… where I talked about our design community and how we’re applying the concept of open source and community collaboration to our design process.  Definitely a topic that I’d like to expand on more in the near future.

Of course, the 4 hour shift in time allowed me to stay on top of work while sprinkling in some touristy excursions in between.   In my limited free time, I managed to explore nearby neighborhoods including colorful Caminito in La Boca (a personal favorite), Palermo, San Telmo, Centro, and Recoleta.  I fell in love with the local crafts and street markets, indulged in the arts, the cafes, the music, the tango (of course), empanadas, and gorged on as much gelato as humanly possible.  But the highlight of the trip was definitely spending time with our active contributors, working together side by side and getting to know each other better.  Their passion and energy was so incredibly contagious, and a pure boost of inspiration that I brought back with me.

Cranking away in my own corner day-in and day out, it’s easy to lose sight of the bigger picture at times and the broader community that we’re all a part of.  It was great to break away from my routine and step into a slightly different world… however brief, it was an experience I’ll never forget.  One that helped deepen my relationships within the community and better understand Firefox (what it looks and feels like) in a different context.  I hope we have more opportunities to do things like this.

Huge thanks again to Guillermo, Santiago, Felipe, Hernan (and others) who helped organize the party and various meetups throughout the week – and especially for their friendship and hospitality.  Thank you so much.  It was great meeting you all in beautiful Buenos Aires, and hope to see you again…soon!

Still running 3.6?  If so, we highly recommend that you upgrade as soon as possible.  Because Firefox 4 is simply much better, and with the new rapid release cycle it’s really important that you’re running the latest and greatest.

To help make this happen, the user engagement team is leading an upgrade campaign to connect with 3.6 users directly across key touchpoints (like Snippets) with segmented messages - conveying how Firefox 4 gives you an enhanced browsing experience so you can enjoy your favorite sites even more.

As part of this effort, we created custom landing pages (a light update to the main download page) by catering the copy and hero graphic to each audience… which for phase I included: casual gamers, social media enthusiasts, media streamers, web workers, and frequent emailers.  These were based on broad interest groups and types of online activities vs. highly targeted demographics.

While our awesome copywriter (@Matej) carefully crafted the right words, my focus was figuring out how to visually showcase the product in a way that: resonated with each audience, wasn’t a distraction from the download CTA,  and maintained the appropriate level of brand personality.  Since placing a giant screenshot on the homepage didn’t feel quite right for us, we decided to pepper in a bit of whimsy by presenting the user-experience from the perspective of one of our beloved characters and Firefox fans, Curly.  Yes… Curly is on Facebook, he tweets, video chats with his friends, and much more.  With the help of Silver Orange (and some design hackery) the resulting pages turned out pretty awesome, and quite fun.  You can check them out, here.  Be sure to pay close attention to the details… from the app tabs, to the actual content within the screen.

If you’ve downloaded Firefox 4 you’ve probably seen the 60 second feature overview video that was showcased on the First Run and What’s New pages.  Historically, we had done these types of videos in a more straightforward screencast style (imagine a talking head, screenshots of the browser, slow pace, etc)… which resulted in videos that were effective but ultimately felt a bit dry.  So, our goal here was to apply a few creative twists and produce a feature video that communicated the key information in a more interesting way.  Keeping the messages more high-level and abstract vs. digging into into the many details.

To produce this video we worked with the creative agency JESS3.  Given the accelerated nature of the project and a hard deadline to meet for the Firefox 4 launch, we had to move pretty quickly through the various stages in the process (style frames, script, storyboards, music composition, VO, animation, final rendering, etc) while hurdling a variety of unique challenges along the way.  Echoing the hand-made aspect of the browser, the concept we chose was based on a blend of contemporary and classic paper cut techniques.  But since our resources were limited, we relied on advanced digital-animation tools to simulate real handmade paper-craft production.  You’ll also notice that familiar websites were abstracted and reconstructed with a more artful touch.

To give you a better sense of the evolution of this piece, I’ve compiled snapshots of the various elements (mood boards, key frames, concept sketches, playblast, etc) into an album to share with you.  Unveiling a bit of the “behind the scenes”, which I hope to do more of (soon) with regard to some of our other video projects.

With a total of 314 votes, I’m excited to announce “Happy and Snappy” as the winner of our recent Creative Collective challenge for Firefox 4.  While there were many great designs to choose from, this was definitely among my personal favorites… and I’m looking forward to wearing it both as a shirt as well as my Persona.

Our winning designer, Koen Hendrix (@koenhendrix), is a web UX designer and developer based in the UK and a longtime fan of Firefox.  He was also among our more prolific artists with four really great design submissions — all rendered in a fun retro inspired style.  I thought it would be interesting to learn a little more about Koen’s background, how he got introduced to Mozilla, and his creative process going into this particular design.  So I asked him a few questions over email, and (with his permission) am sharing the responses below.

Congrats to Koen!  We love this design and hope to see more from you in the near future.

About the designer, Koen Hendrix:

* What was your creative process and inspiration for the various artwork you did for the challenge?  Specifically, the Happy and Snappy artwork that won.

My first thoughts were fairly rudimentary  – I remember reading the brief and thinking “Firefox. Four. Fast. Fresh. Fun – OMG there are so many Fs this’ll be great”.  But after some sketching I realized that simply re-using the F’s wasn’t the right approach, and also something that a lot of other designers were doing. So, I started looking for different ways of expressing the joy of Firefox, and differentiating myself from the other submissions.

I had been exploring retro design elements and came up with the idea that a retro look could help defuse the complex technological associations of a browser. Yes it’s got a new JavaScript engine and HTML5 and all sorts of geeky tech goodness under the hood. But let’s just forget about the tech aspect and make a cheerful, retro re-interpretation of the Firefox brand that will make you smile. From that point I really quickly got the “Happy and Snappy” tagline and the yellow color… and it all just came together from there.  Of the designs I submitted, “Happy and Snappy” was my first idea and also the one I spent the most time on. It’s more polished than the others and I’m definitely proud of it.

* How would you describe your style?  What are your influences?

I wouldn’t say that I’ve got one particular style, and since I’m not a real graphic designer I’m not looking to define my own style.  I like to keep up with and follow what’s hot in the web design world. Currently I’m intrigued by all the ways that people are combining elements from the ‘web 2.0’ look (sleek gradients and reflections) with retro elements (typically limited-palette textured stuff).

Online, I am in love with Veerle’s Inpiration Stream. It’s just so well curated and matches my own interests.  I discover a lot of inspirational posts from various web design blogs by following the Smashing Network feed. Offline, I like museums – we’ve got a couple of great ones in Liverpool and London isn’t far away either.  I also have a particular interest in typography, so I pay close attention to type on posters, covers and so forth.

* How did you originally get interested in design?

I liked to draw when I was a kid, I remember that. I was generally very interested in tech stuff and good at math so I went on to study Computer Science. There I learned that while there was a whole world of protocols and databases underneath computers, there was also a user side to focus on, so I drifted towards UI design, ergonomics, visualizations and industrial design, learning about usability and the history of design. Afterwards I did another degree (in User-System Interaction) where I got to work alongside media designers and psychologists for two years. That was a fantastic experience, broadening my view and expertise from computer-scientist-with-an-interest to full-fledged UX designer.

* What led you to become involved with Mozilla? And how did you find out about the Creative Collective?

I’ve been an avid Firefox user for years and had actually wanted to buy a shirt to support Mozilla for a while. But I just hadn’t seen a design I really liked; just a Firefox logo on blue or black didn’t do it for me (I didn’t even know about the Mozilla Community Store – shame on me). So when the chance came along to design my own, I jumped at it… learning more about the Creative Collective (and the great initiatives from Mozilla Labs) along the way.  I definitely want to keep contributing!

* Anything else you’d like to share with me, or the wider design/Firefox community?

If you love the web, give something back. It doesn’t have to be a lot. Just cast your little vote with some effort and/or your wallet. Have you been using Wikipedia for years now, like me? Are you glad that’s it’s always there for you to consult? Then give something back, go make their articles better, or donate. Relying on Firefox, Firebug or some other plugin every day? Then get involved in keeping it great.  If you care about the web, actively support the things that you think are great and worth preserving.

Following one successful launch with another, we released the much anticipated mobile version of Firefox on Android earlier this week – with our map continuing to glow bright, and sparks flying everywhere.

The desktop and mobile launches represented huge milestones for us… so when it came time to celebrating the momentous occasions, we held [nearly] nothing back.  Kicking things off at 5 AM, our office was buzzing with excitement:  a DJ spinning live, champagne toasts, branded treats, amazing demos, giant sunglasses, confetti guns exploding at every corner, and much much more.  While we all had an awesome time, there was one important thing still missing from the experience:  The Firefox 4 launch t-shirt, which many folks have been asking about.

Our Creative Collective challenge to design the Firefox 4 shirt drew to a close on Monday with nearly 1,900 submissions and a variety of great design concepts from the community.  These included stylized representations of the version number “4″, creative spins on the Firefox logo, fox characters, retro inspired designs, typographic solutions, and more abstract/whimsical expressions of Firefox.

After carefully reviewing the entire gallery, I surfaced the strongest designs (including my personal favorites) into this album for easy viewing.

As always, we had the very difficult task of narrowing down the submissions to the top 5.  Designs were evaluated based on a number of factors, including:  how well they addressed the stated brief, appropriate capture of the brand and essence of Firefox 4, overall creativity in interpretation of the themes, originality, quality of execution, globally friendly / gender-neutral design, and of course…. something that worked well on a t-shirt.  It was definitely a tough process as there were many great designs that ultimately didn’t make the cut.  But we’re really happy with our top 5, seen below, and are excited to see which one wins.

With that in mind we turn it over to you, our community, to determine the winner.  Please visit the MCC today and vote for your favorite design(s).  At the end of the voting period (2 weeks, ending 4/12) the design with the most votes will be printed and distributed as the official Firefox 4 t-shirt.  Good luck to all the artists in our top 5, and thanks to everyone who participated in this challenge.

Firefox 4 officially went out the door yesterday and has already reached over 12 million downloads.  Broadcasting live, we had quite an action-packed party here and across other offices.  But it doesn’t stop there.  As with every major release, we’ve cooked up a ton of fun campaigns to help support and celebrate the launch – which we’ll be rolling out in the weeks (and months) to come.  Below is a quick look at what’s been happening across our key social media channels, and how you can spread the word.

FACEBOOK BADGES

With our Facebook community growing faster than ever at more than 3.8 million strong, we wanted to make sure that our fans can help get the word out about Firefox 4 and share the excitement with their friends in a fun way.  So, we cooked up four awesome badges that you can pick up and post to your wall.  Think of them as digital flair for your profile, or simply 90×90 pixels of geek cred showing your support for a better web with Firefox.  Head over to our Custom Tab (there are two versions with browser sniffing enabled) and check them out.   I personally love them all, especially the hover state – a little extra fun we sprinkled in.  And while you’re there, don’t forget to “like” us as well.

Facebook insights usually takes anywhere between 24-48 hours to update.  So, our stats are a bit behind… but so far the application dashboard shows that we’ve had over 102,000 unique visits to the page, and over 22,000 badges shared across the network – generating nearly 20,000 in “likes” and comments.  Pretty impressive stats for just one day!  I can’t wait for the dashboard to catch up and for these numbers to skyrocket.

Special thanks to Monique who helped us design these awesome badges, Zach Allia for building the application on Facebook, and our l10n team for translating this into 20 languages.  We’ll be adding a mobile-specific badge to support the Firefox on Android launch, soon.

TWITTER PARTY

Want to see what people are saying about Firefox 4 across the twittersphere? Join the Twitter Party where we’re capturing the conversations as they happen through the Firefox Mosaic – a visualization surfacing all tweets with the hashtags #fx4, #ff4, #firefox4, and #teamfirefox.  Take a closer look, and you’ll notice that the logo is made up of twitter avatars from people around the world, echoing the fact that at its core Firefox is about people and is actually built by a global community of thousands.

While you only see 1,804 tiles in the mosaic (each at 12×12 pixels) you’ll notice that they are constantly rotating through different avatars.  The counter on the left gives you a more accurate sense of the volume of tweets – which at the time of this post was over 75,000!  Using the search box or hovering over the mosaic will allow you to browse through individual tweets (or find your own).

From a design and functionality perspective it’s a relatively simple page, but it certainly did not come without its share of challenges.  A lot of hard work and attention to detail went into making sure that the page not only looked great, but was also optimized for the best user experience and overall performance .  We looked at things like: the appropriate number of tiles for the mosaic, processing and tinting the avatars to match the logo, changing the color of the chat bubbles depending on where on the logo it stems from, the rate at which tiles build the logo and rotate through tweets, how smooth the animation is rendered, and more.  For the specific technologies used and other technical details, please read the case study, here.

Special thanks to Leo and his incredible team at Quodis for their hard work (we love working with you), our l10n team for helping us share this in 31 locales, and of course – the amazing WilliamR for managing both this project as well as the Facebook campaign.

AFFILIATE BUTTONS

We’ve refreshed our library of affiliate buttons, offering you awesome new designs in various sizes to choose from.  Pick your favorite and jazz up your website or blog to help encourage others to download Firefox 4.  Thanks to Monique once again for whipping these up.  (Also available in Dutch, Portuguese, and Spanish.)

As I mentioned earlier, this is only the beginning.  Stay tuned for a lot more awesome in the coming weeks.  Meanwhile, enjoy Firefox 4!

Those of you who have been around Mozilla for a while might remember the Firefox 3 t-shirt design contest that we held nearly three years ago… it was quite an amazing experience, with so much creative energy pouring in from passionate fans around the world.  Not only did we end up with an awesome t-shirt, but we also had a blast.  So, with Firefox 4 around the corner we simply couldn’t pass up the opportunity to go for another round.  We’re opening up the process again and asking the community to help us create the official Firefox 4 t-shirt, with a new design challenge hosted on the Creative Collective:

The process is similar to what we’ve done in the past:  After the submission period ends (March 28th), an internal team at Mozilla will review all designs and select the strongest 5 that best respond to the brief.  These will then be re-posted online for your vote — with the final winner chosen by the community and printed as the official Firefox 4 t-shirt – a limited edition item featured in the Mozilla Store and distributed to thousands of contributors.  For more details, design inspiration, rules and resources, please visit the main challenge page.  And if you have any artsy friends or know of anyone that would be interested in joining the fun — please help us spread the word.  Even a simple tweet goes a long way.

As you know, t-shirts are a pretty big deal around here… and so is Firefox 4.  So, needless to say that we’re really excited to see what the community comes up with.  I know it will be nothing short of pure awesome.

Back from beautiful Whistler, where we held the 2010 Mozilla Summit – an exciting action-packed week of amazing demos, sessions, and more.  The Summit is the largest gathering of leadership across the project, of key contributors and passionate Mozillians from all corners of the globe.  It’s a rare occasion to have everyone in one place, a biennial reunion of massive proportions to celebrate our collective achievements and plan ahead for the future.  It’s truly an inspiring event, and I’ve been so fortunate to have had the opportunity to participate in two of them.  This year was by far the largest, with over 600 attendees and 60 countries represented.  To help set the right tone, I worked on creating the official Summit poster and visual identity:

The first step in the design process was defining a mood board and creative brief to capture the desired look and feel.  Then, we needed to find the right illustrator to bring it all together.  As we browsed various sites for inspiration (like Society6), we came across the work of Peskimo, a design team based in the UK that had a unique illustration style and a portfolio that matched what we were looking for.  Over the few short weeks that followed, we worked on establishing the right design concept and iterated fast towards our deadline.  The final artwork turned out absolutely awesome, and served as the core design theme that shaped the entire experience design of the Summit.  Huge thanks to David and Jodie of Peskimo, the talented illustrators behind this original artwork.

A few words on the concept and art direction:

For the illustration style, we wanted to produce something different than past Mozilla artwork – stepping away from the retro-futuristic/sci-fi types of imagery that we tend to rely on, to create something appropriately bold, yet more organic.  With that in mind, we took inspiration from the natural setting of Whistler to create a serene and green landscape.  We established a softer/earthy palette as the foundation, with warmer/more vibrant accent colors to echo our brand and instill a sense of energy into the scene.  A lot of thought went into the details of this poster, from the individual character designs to the arrangement of, and meaning behind, various elements.  Although not terribly obvious, the green bolted path sweeping across the canvas is an abstract representation of the wild spirit of the web, harnessed and guided forward by the community as they march towards the future.

Designing the parade of characters was among the biggest challenges.  How do you capture the notion of a global community in a way that people can relate to… without getting lost in the pixels or leaving something out?  To do this, we focused on communicating the broader concept of diversity in a fun way, by creating a sea of whimsical characters (monsters, critters, etc) of different shapes, colors, and sizes to echo our own diverse community.  Everything from the color of their eyes and freckled cheeks, to the various accessories they’re wearing was tweaked and iterated on until it felt right.  The result was a cast of unique and lovable characters:

The attention to detail extends all the way to the back of the scene.  Let your eyes wander deep into this parade, and you might even catch a few hidden easter eggs:  The Firefox Robot and The Red Dino, woven in as a little nod to our past.  Can you find them?  If not, peek here.

A few words on the experience design:

Once the poster was finalized, we handed off the assets to Black & White, an agency we enlisted to manage the design experience of the Summit.  With individual elements carefully extracted, the artwork was extended across a variety of goods to brand every aspect of the event.  From standard badges, to an array of colorful t-shirts, to decorative cut-outs guiding your way around the hotel, to giant prints draping the keynote hall, and much more… we held nothing back.  The final surprise was unveiled on the last night when we were greeted by three featured characters at the top of Blackcomb mountain where we danced the night away.  Special thanks to the brave souls who stepped into those costumes and brought them to life.  What a memorable evening, and what an amazing Summit!  Hope everyone enjoyed these little critters as much as I did.

So, where do these Mozillian characters go from here?  A lot of people have expressed interest in having the source files made available to the community so that they can remix and use them for various other projects.  Although I’m thrilled to hear that the illustrations were a big hit, we unfortunately won’t be able to release them into the wild.  The poster was created as a special artwork specific to this year’s Summit only.  Even materials like the t-shirts that you received were limited edition prints for the Summit and will not be available anywhere else.  Consider them rare memorabilia encapsulating your 2010 Summit experience.  We do however have desktop backgrounds, here. Enjoy!