Building a Living Logo from Community Data: a Rough Working Prototype

John Slater


The core component of our MozID project is a new “living logo” for Mozilla – one that is directly shaped by the activity of our community and evolves over time based on that activity. We’ve shared some examples of other living logos, and reported that we’re working with Pitch Interactive to build that data visualization, but the concept can still be a little abstract until you see it.

The good news is that now we have a rough working prototype that allows you to do just that.

To be clear, this does NOT at all represent how the final logo will look, but the prototype really does bring the idea to life in a much more significant way. First, check out this short video that gives some background explanation:

The prototype itself lets you take straightforward information about community activity (sourced from and turn them into a logo-ish shape. First, adjust details like opacity, shape of the curves or the particular sources of the data, then click the ‘transform’ link to see them all come together.

Here’s the prototype.

Our logo will be much more visually refined and styled than this, but it’s pretty eye-opening to see it all come together…especially considering that it will be a constantly shifting representation of the heart of Mozilla. I’m really excited about that part in particular.

Stay tuned for more details on this project coming soon!

Logo Survey Results

John Slater


As I mentioned last week, one of the ultimate goals of our MozID project (including the logo, but not limited to it) is to create design assets and materials that will help Mozillians everywhere communicate more effectively. To that end, it’s incredibly important that we understand how people use what’s available now and what they really need going forward so we can work towards solutions that will be meaningful.

To begin that conversation, we asked for input via a brief survey, and the results are very interesting. Here are a few topline takeaways:

* 91% of respondents have a Mozillians profile; people were pretty evenly distributed around the world.
* 61% currently get design information & assets from the Mozilla Style Guide.
* 82% of people would find easily available visual assets to be helpful.
* 62% would be likely to use an online tool to create their own customized logos.
* 83% would use the new Mozilla logo or a version of it customized for their own communities.
* 12% would prefer their existing community logo.
* Common use cases include websites, t-shirts, event materials and other swag.

If you’d like to dig in deeper, the full set of results is available here.

This has been helpful to me, because one of our ideas is to create an online tool that would allow Mozillians to create their own custom versions of the new logo. We’re not sure how that would work yet – perhaps it would be based strictly on that user’s data, or perhaps there would be more direct opportunities to directly tweak the details to fit your preferences, or perhaps both – but it does seem like there’s interest in such a thing. I know there are some really good community specific logos out there (Mozilla Mexico has one of my favorites, for example), and we want to be sensitive to that legacy, but if we could create a system that would feel both standardized across Mozilla and also unique to each individual or local community that would be really cool.

Many thanks to the 600+ people who responded to our survey. We’ll be asking follow-up questions AND sharing some design ideas soon…watch this space for details!

Creating the New Mozilla Logo – We Need YOUR Help

John Slater


Every interaction people have with Mozilla is an opportunity to help them understand who we are and why our mission matters. To make the most of these moments, we’re creating a new Mozilla logo that will represent our values and help communicate the story of our brand. (If you’re new to this project I recommend reading the overview and a couple of earlier blog posts to get caught up on the strategy.)

Of course, an essential element of this brand story is the open source philosophy that Mozilla is built on. We know that projects are improved by participation and transparency, so it’s of the utmost importance that any effort to visually represent what we stand for include the community every step of the way. This logo will belong to all Mozillians, and its creation process must reflect that.

We’ve been posting updates during the early concepting phase, and will share more specific ideas for your feedback as things take shape. But before then, I do have one very important ask for everyone reading this: please give us your input on what you’d like to get out of this process.

I’ve put together a quick survey that will help us understand how the new logo will be used, and what the Mozilla community’s visual identity needs are. It will only take a few minutes to complete, and the information will be invaluable to making sure we’re providing the right solutions to the right problems.

Here’s that survey link again: please take it!

We’ve put together a short video to provide additional perspective on why community participation is so crucial to the success of this logo project:

You don’t have to a designer or a branding expert to participate in this. All input is helpful, and all ideas are appreciated. This logo will belong to all of us…let’s make it awesome together!

Time Lapse Logo Explorations

John Slater


As mentioned earlier, we are working to expand and evolve Mozilla’s visual identity over the coming months, and the centerpiece of the project will be a new “living” logo.

Right now we’re still in the early stages of brainstorming ideas, but in order to keep everyone informed on current progress we’ve put together a short time lapse video of some of Sean Martell‘s initial design explorations. There’s no guarantee that the final product will look anything like this, but it’s always interesting to observe the creative process in action. Check it out:

I’ll have much more to share soon, so stay tuned for further updates!

Building a New Brand Identity System for Mozilla

John Slater


Mozilla is a dynamic, unconventional, innovative organization working on a variety of initiatives to make the Web better for users around the world. In other words, we have an interesting story to tell.

However, from a visual identity perspective our toolkit is currently a little…minimal. We have a wordmark and a few basic colors in our palette, and that’s about it. Not really reflective of the bold, dynamic nature of Mozilla, or the possibilities of the Web as a creative platform.

With all that in mind, I’m happy to report that we are kicking off a project to evolve and expand Mozilla’s visual identity to more closely reflect the ideals and ambitions of the organization. The new system will be open (easily extensible and customizable by Mozillians everywhere), of the Web (can be generated by tools and technology of the Web as opposed to proprietary files) and One Mozilla (applied everywhere, and for the benefit of everyone who works on the project).

For a more complete overview of how we’re approaching this project, check out this slideshow (and please share your thoughts in the comments section below).

And, not only will the outcome of the work embody Mozilla’s values, but the process by which we approach it will too. We’ll be regularly sharing our ideas and progress as we go, and will be actively looking for your input. The Mozilla brand belongs to all of us…let’s work together and build something awesome.

We’ll be sharing more soon, so please keep an eye on this blog and/or @MozCreative on Twitter for all the latest info.

Update: our Art Director Sean Martell has shared some thoughts on living brands, and what that concept means for this project. Check it out!

New Creative for a New Firefox

John Slater


Today Mozilla launched a brand new version of Firefox, with a completely revamped look and dozens of feature enhancements. It’s unquestionably the best Firefox yet, which of course meant we in the Creative team had to raise our collective game to ensure our work was worthy of the awesomeness coming from the product.

With that in mind, we (along with many other Mozillians) set out to overhaul our full set of Firefox user touchpoints in a way that would effectively communicate the key benefits of the browser as well as the larger story behind it. Both the ‘what’ and the ‘why’, if you will.

For starters, we couldn’t launch a redesigned browser without a redesigned website, so we collaborated closely with the Web team to completely bulldoze the previous Firefox site and build a new one from scratch. In the process, we drew our inspiration from the Firefox design values with the aim of creating pages that felt both clean, crisp and modern as well as warm, human and inviting.

Pay careful attention to the animations sprinkled throughout the new site. Not only do they present a more engaging view into what the new Firefox is all about, they’re built with CSS keyframe animations to make sure we’re showcasing the best of what open Web technologies can do.

Screen Shot 2014-04-29 at 10.19.13 AM

Because Mozilla is a non-profit, the ‘why’ is just as important as the ‘what’, so we created another site called the Web We Want to help elevate the conversation beyond (the admittedly awesome) product features and functionality. This site (and the accompanying video) is at the center of a lot of our social media activity, and we hope that by asking people to pause and think about what they want for the future of the Web, it will spur collective action to help make those visions a reality. Definitely check it out and share what you think!

Screen Shot 2014-04-29 at 10.16.20 AM

Of course, the story of Firefox is really the story of all the dedicated and talented Mozillians who give their heart and soul to make the magic happen. Here’s a look at what some of those amazing people have been up to (you can view other videos in this series here and here):

This is only a glimpse into the full scope of the launch, and since it would be impossible for me to accurately list the complete set of people who made it all possible, please allow me to focus on the members of the Creative team in this post. Huge shoutout to Jennifer Balaco, Rainer Cvillink, Ty Flanagan, Spencer Hui, Sean Martell, Matej Novak, Matt Ternoway and Lee Tom for devoting their time and talent to a world-class release of a world-class product. I couldn’t ask for a better team to work with.

2013 in Review: Going Social

John Slater


Note: This post was written by, and details the work of, Matt Ternoway.

As a designer and self described brand junkie, I obsess over the fine details that create consistency in a brand. Things like logo placement, kerning, breathing space, etc. So what do I do when given the task of creating one-off, one of a kind weekly graphical Facebook posts that range from everything from quirky feel good posts like International Ninja day, to serious topics surrounding privacy and spying issues…doing this all while still maintaining that ever so important consistency needed to build a brand? Basically forget everything I learned in design school, and think back to my art school days…this is going to be fun :)

I will admit I didn’t have much of a plan when I started the task back in April, I was really just enjoying the ability to get very creative. Each week our Social media team would pass along some awesome/crazy ideas and have me visually interpret them…International Talk like a Pirate Day?? This is a thing. See.

After a few months I found myself getting into a rhythm…inadvertently I started to create a few loose perimeters in which I could draw from to create that consistency I mentioned, but hopefully not at the expense of uniqueness. One being color, as we know color can be the strongest aspect of a brand. You don’t need to go much further than Firefox…that blue and orange burns in your memory. As beautiful as that color combo is, it can get repetitive fast in the confines of social media. This lead me to explore a wider range, even just playing with saturation levels within those two colours i found that each post could take on that one-off uniqueness I was looking for but still say that it is Firefox.

Another perimeter which began to evolve, was inspired by some of the key words that I feel define Mozilla and the Firefox brand, words like, playful, approachable, warm and soft. My goal was to create posts that reflect these words closely. I knew that even our ‘darkest’ posts like the ‘No One Ever’ series still had to have an approachable touch to it. I found myself working with a combination of greys as opposed to black to achieve the right mood…I think this gave the posts a softer matte look. I carried this approach over to one of the more recent posts; International Ninja Day. At first I was trying to go for something perhaps a bit too sinister for Firefox with this concept. In the end I felt I needed to tone it down and play up the playful fun factor. This is what came out of it. A non threatening yet highly skilled ninja :)

Those are a few thoughts behind the process. Perhaps this time next year I may have a few more. I am looking forward to seeing where we can take these and how they will evolve. Hope you enjoy.

(Again, all of the above is from Matt Ternoway. Thanks Matt!)