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!

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.

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!

As part of our larger plans to strengthen the communication channels with our community, we’ve created the Firefox Engagement Hub on mozilla.com, highlighting our top 4 social media channels: Facebook, Twitter, Youtube, and Flickr.  This is a fairly simple/static page right now (a beta if you will) which we’ll be evolving into a more robust engagement space in the near future – including an awesome Twitter visualization, and much more.  This is an exciting step towards providing a better window into our social media presence, and surfacing ways to stay connected with all that’s going on in the world of Firefox.

With respect to the design direction:  Yes, those butterflies are swimming underwater!  The background illustration (created by the Delicious Design League) is a metaphoric representation of Firefox and concepts of community and collaboration.  Coral reefs are beautifully diverse and complex habitats, teaming with colonies of fish and an array of other organisms who all rely on each other to thrive.  The coral reef itself is not only alive, but also serves to protect and support the larger ecosystem.  The social butterflies, each with a unique design painted on their wings, further echo the notion of diversity and personalization.  Thanks to Monique Johnson, we also created a custom icon set by re-illustrating the individual logos for a more hand-made feel that matched the rest of the site’s design style.

Twitter is an important source of information for millions of people, and it has also become one of the top communication channels that we use at Mozilla to engage with our community.  The Firefox Twitter account is growing faster than ever before, and a search on the #firefox hashtag alone will summon a lively stream of tweets from around the globe.  But that’s only a thin slice of all the action taking place.  To really appreciate the scale and scope of Firefox activity within the Twitter universe, you need to analyze the data through an entirely different lens.

To achieve this, I’m working on creating a Twitter visualization that captures the unique and multi-dimentional nature of our community, their conversations, and the energy that flows through their tweets.  As you know, there are some incredibly complex and mesmerizing data visualizations out there… my goal is to create a similarly stunning Twitter visualization that is also built on open web technology.  As Morgamic kindly put it, we’d like to make this a “crazy utilization of the open web”.

I’m personally really excited about this project… we’re always looking for new tools to engage with our users and to celebrate our community, and I think a cool visualization of our Twitter activity will help encourage that.  But to take this to the next level and kick-start the ideation process, I need your help.

How would you like to see our Twitter community visualized?  What kinds of information or data types would you want to capture?  To help guide your thinking and provide some inspiration, I’ve collected a set of the most creative Twitter visualizations from around the web.  I also distilled these down to what I thought were key elements that made for a great visualization, and therefore required specs for what our visualization should be:

* Approachable: Captures meaningful data that’s relatively easy to digest by just about anyone.
* Beautiful: Presents the information through an artistic lens, and is generous in its use of color.
* Dynamic: Displays activity in real-time, conveying a constant state of movement through animated elements.
* Interactive: Allows users to play with design elements, and filter/search through the data with relevant tags.
* Unique: Takes inspiration from, but does not closely mimic, what has already been created.

With all that in mind, I’d love to hear your thoughts, feedback, and ideas around a potential design concept for our Twitter visualization.  Please leave a comment and share your thoughts.  I’m looking forward to hearing from you!

Firefox 3.5 is finally here! And what better way to celebrate the launch than with the brand new 3.5 t-shirt. We had a lot of fun last year with an open call for designs that led us to the official Firefox 3 shirt.  But this time around, we tried something different.  Inspired by the concept of a tag cloud, we turned to the community for help in coming up with a collection of words that best described Firefox.  We then used these words to create a stylized typographic visualization of what Firefox 3.5 is all about – highlighting some of the key features and goodness that’s baked into the browser.

The final design is not only awesome (and among my favorites), but also a unique addition to our t-shirt archive, which continues to grow as it captures snapshots in Mozilla’s history.  Special thanks to Monique Johnson, for lending her artistic talents to us once again and creating this beautiful word cloud.

The new Firefox 3.5 t-shirts are now available in the Mozilla Stores, professionally modeled and photographed by members of our very own team.  You can also download this design in different sizes as a desktop wallpaper.  Enjoy!

** Paris, Toronto, MV, Tokyo and China offices…looking good!  Silverorange has joined the fun, too.