{"id":562,"date":"2017-02-14T22:49:03","date_gmt":"2017-02-15T06:49:03","guid":{"rendered":"https:\/\/blog.mozilla.org\/opendesign\/?p=562"},"modified":"2017-02-14T22:49:03","modified_gmt":"2017-02-15T06:49:03","slug":"roads-not-taken","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/opendesign\/roads-not-taken\/","title":{"rendered":"Roads not taken"},"content":{"rendered":"

Here, Michael Johnson (MJ), founder of johnson banks, and Tim Murray (TM), Mozilla creative director, have a long-distance conversation about the Mozilla open design process while looking in the rear-view mirror.<\/em><\/p>\n

TM: We\u2019ve come a long way from our meet-in-the-middle in Boston last August, when my colleague Mary Ellen Muckerman and I first saw a dozen or so brand identity design concepts that had emerged from the studio at johnson banks.<\/p>\n

MJ: If I recall, we didn\u2019t have the wall space to put them all up, just one big table \u2013 but by the end of the day, we\u2019d gathered around seven broad approaches that had promise. I went back to London and we gave them a good scrubbing to put on public show.<\/p>\n

\"blog-pics-13feb-1\"<\/p>\n

It\u2019s easy to see, in retrospect, certain clear design themes starting to emerge from these earliest concepts. Firstly, the idea of directly picking up on Mozilla\u2019s name in \u2018The Eye\u2019 (and in a less overt way in the \u2018Flik Flak\u2019). \u2018The Eye\u2019 also hinted at the dinosaur-slash-Godzilla iconography that had represented Mozilla at one time. We also see at this stage the earliest, and most minimal version of the \u2018Protocol\u2019 idea.<\/p>\n

TM: You explored several routes related to code, and \u2018Protocol\u2019 was the cleverest. Mary Ellen and I were both drawn to \u2018The Eye\u2019 for its suggestion that Mozilla would be opinionated and bold. It had a brutal power, but we were also a bit worried that it was too reminiscent of the Eye of Sauron or Monsters, Inc.<\/p>\n

MJ: Logos can be a bit of a Rorschach test, can\u2019t they? Within a few weeks, we\u2019d come to a mutual conclusion as to which of these ideas needed to be left on the wayside, for various reasons. The \u2018Open button\u2019, whilst enjoyed by many, seemed to restrict Mozilla too closely to just one area of work. Early presentation favourites such as \u2018The Impossible M\u2019 turned out to be just a little too close to other things out in the ether, as did Flik Flak \u2013 the value, in a way, of sharing ideas publicly and doing an impromptu IP check with the world. \u2018Wireframe World\u2019 was to come back, in a different form in the second round.<\/p>\n

TM: This phase was when our brand advisory group, a regular gathering of Mozillians representing different parts of our organization, really came into play. We had developed a list of criteria by which to review the designs \u2013 Global Reach, Technical Beauty, Breakthrough Design, Scalability, and Longevity \u2013 and the group ranked each of the options. It\u2019s funny to look back on this now, but \u2018Protocol\u2019 in its original form received some of the lowest scores.<\/p>\n

MJ: One of my sharpest memories of this round of designs, once they became public was how many online commentators critiqued the work for being \u2018too trendy\u2019 or said \u2018this would work for a gallery not Mozilla\u2019. This was clearly going to be an issue because, rightly or wrongly, it seemed to me that the tech and coding community had set the bar lower than we had expected in terms of design.<\/p>\n

TM: A bit harsh there, Michael? It was the tech and coding community that had the most affinity for \u2018Protocol\u2019 in the beginning. If it wasn\u2019t for them, we might have let it go early on.<\/p>\n

MJ: Ok, that\u2019s a fair point. Well, we also started to glimpse what was to become another recurring theme \u2013 despite johnson banks having been at the vanguard of broadening out brands into complete and wide-ranging identity systems, we were going to have to get used to a TL:DR way of seeing\/reading that simply judged a route by its logo alone.<\/p>\n

TM: Right! And no matter how many times we said that these were early explorations we received feedback that they were too \u201cunpolished.\u201d Meanwhile, others felt that they were too polished, suggesting that this was the final design. We were whipsawed by feedback.<\/p>\n

\"blog-pics-13feb-2\"<\/p>\n

MJ: Whilst to some the second round seemed like a huge jump from the first, to us it was a logical development. All our attempts to develop The Eye had floundered, in truth \u2013 but as we did that work, a new way to hint at the name and its heritage had appeared. It was initially nicknamed \u2018Chomper’, but was then swiftly renamed \u2018Dino 2.0\u2019. We see, of course the second iteration of Protocol, this time with slab-serifs. And two new approaches \u2013 Flame and Burst.<\/p>\n

\"blog-pics-13feb-3\"<\/p>\n

 <\/p>\n

TM: I kind of fell in love with \u2018Burst\u2019 and \u2018Dino 2.0\u2019 in this round. I loved the idea behind \u2018Flame\u2019 \u2014 that it represented both our eternal quest to keep the Internet alive and healthy and the warmth of community that\u2019s so important to Mozilla \u2014 but not this particular execution. To be fair, we\u2019d asked you to crank it out in a matter of days.<\/p>\n

MJ: Well, yes that\u2019s true. With \u2018Flame\u2019 we then suffered from too close a comparison to all the other flame logos out in there in the ether, including Tinder. Whoops! \u2018Burst\u2019 was, and still is, a very intriguing thought \u2013 that we see Mozilla\u2019s work through 5 key nodes and questions, and see the \u2018M\u2019 shape that appears as the link between statistical points.<\/p>\n

\"blog-pics-13feb-4\"<\/p>\n

TM: Web developers really rebelled against the moire of Burst, didn’t they? We now had four really distinct directions that we could put into testing and see how people outside of Mozilla (and North America) might feel. The testing targeted both existing and desired audiences, the latter being \u2018Conscious Choosers\u2019, a group of people who made decisions based on their personal values.<\/p>\n

MJ: We also put these four in front of a design audience in Nashville at the Brand New conference, and of course commentary lit up the Open Design blog. The results in person and on the blogs were pretty conclusive \u2013 that Protocol and Dino 2.0 were the clear favourites. But one set of results were a curve ball \u2013 that the overall \u2018feel\u2019 of Burst was enjoyed by a key group of desired (and not current) supporters.<\/p>\n

\"blog-pics-13feb-5\"<\/p>\n

TM: This was a tricky time. \u2018Dino\u2019 had many supporters, but just about as many vocal critics. As soon as one person remarked \u201cIt looks like a stapler,\u201d the entire audience of blog readers piled on, or so it seemed. At our request, you put the icon through a series of operations that resulted in the loss of his lower jaw. Ouch. Even then, we had to ask, as beloved as this dino character was for its historical reference to the old Mozilla, would it mean anything to newcomers?<\/p>\n

\"blog-pics-13feb-6\"<\/p>\n

MJ: Yes, this was an odd period. For many, it seemed that the joyful and playful side of the idea was just too much \u2018fun\u2019 and didn\u2019t chime with the desired gravitas of a famous Internet not-for-profit wanting to amplify its voice, be heard and be taken seriously. Looking back, Dino died a slow and painful death.<\/p>\n

TM: Months later, rogue stickers are still turning up of the \u2018Dino\u2019 favicon showing just the open jaws without the Mozilla word mark. A sticker seemed to be the perfect vehicle for this design idea. And meanwhile, \u2018Protocol\u2019 kept chugging along like a tortoise at the back of the race, always there, never dropping out.<\/p>\n

MJ: We entered the autumn period in a slightly odd place. Dino had been effectively trolled out of the game. Burst had, against the odds, researched well, but more for the way it looked than what it was trying to say. And Protocol, the idea that had sat in the background whilst all around it hogged the spotlight, was still there, waiting for its moment. It had always researched well, especially with the coding community, and was a nice reminder of Mozilla\u2019s pioneering spirit with its nod to the http protocol.<\/p>\n

TM: To me though, the \u2018Protocol\u2019 logo was a bit of a one-trick pony, an inside joke for the coding community that didn\u2019t have as much to offer to the non-tech world. You and I came to the same conclusion at the same time, Michael. We needed to push \u2018Protocol\u2019 further, maybe even bring over some of the joy and color of routes such as \u2018Burst\u2019 and the fun that \u2018Dino\u2019 represented.<\/p>\n

\"blog-pics-13feb-7\"<\/p>\n

MJ: Our early reboot work wasn\u2019t encouraging. Simply putting the two routes together, such as this, looked exactly like what it is: two routes mashed together. A boardroom compromise to please no-one. But, gradually, some interesting work started to emerge, from different parts of the studio.<\/p>\n

We began to think more about how Mozilla\u2019s key messages could really flow from the Moz:\/\/a \u2018start\u2019, and started to explore how to use intentionally attention grabbing copy-lines next to the mark, without word spaces, as though written into a URL.<\/p>\n

\"blog-pics-13feb-8\"<\/p>\n

We also experimented with the Mozilla wordmark used more like a \u2018selected\u2019 item in a design or editing programme \u2013 where that which is selected reverses out from that around it.<\/p>\n

\"blog-pics-13feb-9\"<\/p>\n

From an image-led perspective, we also began to push the Mozilla mark much further, exploring if it could be shattered, deconstructed or glitched, in so becoming a much more expressive idea.<\/p>\n

\"blog-pics-13feb-10\"<\/p>\n

In parallel, an image-led idea had developed, which placed the Mozilla name at the beginning of an imaginary toolbar, and there followed imagery culled directly from the Internet, in an almost haphazard way.<\/p>\n

\"blog-pics-13feb-11\"<\/p>\n

TM: This slide, #19 in the exploratory deck, was the one that really caught our attention. Without losing the \u2018moz:\/\/a’ idea that coders loved, it added imagery that suggested freedom and exploration which would appeal to a variety of audiences. It was eye-catching. And the thought that this imagery could be ever-changing made me excited by the possibilities for extending our brand as a representation of the wonder of the Internet.<\/p>\n

\"blog-pics-13feb-12\"<\/p>\n

 <\/p>\n

MJ: When we sat back and took stock of this frenetic period of exploration, we realised that we could bring several of these ideas together, and this composite stage was shared with the wider team.<\/p>\n

What you see from this, admittedly slightly crude \u2018reboot\u2019 of the idea, are the roots of the final route \u2013 a dynamic toolkit of words and images, deliberately using bright, neon, early-internet hex colours and crazy collaged imagery. This was really starting to feel like a viable way forward to us.<\/p>\n

To be fair, we\u2019d kept Mozilla slightly in the dark for several weeks by this stage. We had retreated to our design \u2018bunker\u2019, and weren\u2019t going to come out until we had a reboot of the Protocol idea that we thought was worthy. That took a bit of explaining to the team at Mozilla towers.<\/p>\n

TM: That\u2019s a very comic-book image you have of our humble digs, Michael. But you\u2019re right, our almost daily email threads went silent for a few weeks, and we tap-danced a bit back at the office when people asked when we\u2019d see something. It was make or break time from all perspectives. As soon as we saw the new work arrive, we knew we had something great to work with.<\/p>\n

\"blog-pics-13feb-15\"<\/p>\n

MJ: The good news was that, yes, the Mozilla team were on board with the direction of travel. But, certain amends began almost immediately: we\u2019d realised that stand-out of the logo was much improved if it reversed out of a block, and we started to explore softening the edges of the type-forms. And whilst the crazy image collages were, broadly, enjoyed, it was clear that we were going to need some clear rules on how these would be curated and used.<\/p>\n

\"blog-pics-13feb-16\"<\/p>\n

TM: We had the most disagreement over the palette. We found the initial neon palette to be breathtaking and a fun recollection of the early days of the Internet. On the other hand, it didn\u2019t seem practical for use in the user interface for our web properties, especially when these colors were paired together. And our executive team found the neons to be quite polarizing.<\/p>\n

MJ: We were asked to explore a more \u2018pastel\u2019 palette, that to our eyes lacked some of the \u2018oomph\u2019 of the neons. We\u2019d also started to debate the black bounding box, and whether it should or shouldn\u2019t crop the type on the outer edges. We went back and forwards on these details for a while.<\/p>\n

TM: To us, it helped to know that the softer colors picked up directly from the highlight bar in Firefox and other browsers. We liked how distinctive the cropped bounding box looked and grew used to it quickly, but ultimately felt that it created too much tension around the logo.<\/p>\n

\"blog-pics-13feb-17\"<\/p>\n

MJ: And as we continued to refine the idea for launch, we also debated the precise typeforms of the logo. In the first stage of the Protocol \u2018reboot\u2019 we\u2019d proposed a slab-serif free font called Arvo as the lead font, but as we used it more, we realised many key characters would have to be redrawn.<\/p>\n

That started a new search \u2013 for a type foundry that could both develop a slab-serif font for Mozilla, and at the same time work on the final letterforms of the logo so there would be harmony between the two. We started discussions with Arvo\u2019s creators, and also with Fontsmith in London, who had helped on some of the crafting of the interim logos and also had some viable typefaces.<\/p>\n

TM: Meanwhile a new associate creative director, Yuliya Gorlovetsky, had joined our Mozilla team, and she had distinct ideas about typeface, wordmark, and logo based on her extensive typography experience.<\/p>\n

\"blog-pics-13feb-18\"<\/p>\n

MJ: Finally, after some fairly robust discussions, Typotheque was chosen to do this work, and above and below you can see the journey that the final mark had been on, and the editing process down to the final logo, testing different ways to tackle the key characters, especially the\u00a0 \u2018m\u2019, \u2018z\u2019 and \u2018a\u2019.<\/p>\n

This work, in turn, and after many debates about letterspacing, led to the final logo and its set of first applications.<\/p>\n

\"blog-pics-13feb-19\"<\/p>\n

TM: So here we are. Looking back at this makes it seem a fait accompli<\/em> somehow, even though we faced setbacks and dead-ends along the way. You always got us over the roadblocks though, Michael, even when you disagreed profoundly with some of our decisions.<\/p>\n

MJ: Ha! Well, our job was and is to make sure you stay true to your original intent with this brand, which was to be much bolder, more provocative and to reach new audiences. I\u2019ll admit that I sometimes feared that corporate forces or the online hordes were wearing down the distinctive elements of any of the systems we were proposing.<\/p>\n

But, even though the iterative process was occasionally tough, I think it\u2019s worked out for the best and it\u2019s gratifying that an idea that was there from the very first design presentation slowly but surely became the final route.<\/p>\n

TM: It\u2019s right for Mozilla. Thanks for being on this journey with us, Michael. Where shall we go next?<\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

Here, Michael Johnson (MJ), founder of johnson banks, and Tim Murray (TM), Mozilla creative director, have a long-distance conversation about the Mozilla open design process while looking in the rear-view … Read more<\/a><\/p>\n","protected":false},"author":1302,"featured_media":563,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"coauthors":[287279],"yoast_head":"\nRoads not taken - Mozilla Open Design<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blog.mozilla.org\/opendesign\/roads-not-taken\/\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Tim Murray\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blog.mozilla.org\/opendesign\/roads-not-taken\/\",\"url\":\"https:\/\/blog.mozilla.org\/opendesign\/roads-not-taken\/\",\"name\":\"Roads not taken - Mozilla Open Design\",\"isPartOf\":{\"@id\":\"https:\/\/blog.mozilla.org\/opendesign\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/blog.mozilla.org\/opendesign\/roads-not-taken\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/blog.mozilla.org\/opendesign\/roads-not-taken\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog.mozilla.org\/opendesign\/files\/2017\/02\/mozilla_eye_rounded_2.jpg\",\"datePublished\":\"2017-02-15T06:49:03+00:00\",\"dateModified\":\"2017-02-15T06:49:03+00:00\",\"author\":{\"@id\":\"https:\/\/blog.mozilla.org\/opendesign\/#\/schema\/person\/70d26c3cc5645b525299dd11f03f31b6\"},\"breadcrumb\":{\"@id\":\"https:\/\/blog.mozilla.org\/opendesign\/roads-not-taken\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blog.mozilla.org\/opendesign\/roads-not-taken\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blog.mozilla.org\/opendesign\/roads-not-taken\/#primaryimage\",\"url\":\"https:\/\/blog.mozilla.org\/opendesign\/files\/2017\/02\/mozilla_eye_rounded_2.jpg\",\"contentUrl\":\"https:\/\/blog.mozilla.org\/opendesign\/files\/2017\/02\/mozilla_eye_rounded_2.jpg\",\"width\":1500,\"height\":674},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blog.mozilla.org\/opendesign\/roads-not-taken\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blog.mozilla.org\/opendesign\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Roads not taken\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blog.mozilla.org\/opendesign\/#website\",\"url\":\"https:\/\/blog.mozilla.org\/opendesign\/\",\"name\":\"Mozilla Open Design\",\"description\":\"branding without walls\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blog.mozilla.org\/opendesign\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/blog.mozilla.org\/opendesign\/#\/schema\/person\/70d26c3cc5645b525299dd11f03f31b6\",\"name\":\"Tim Murray\",\"description\":\"I lead the multi-talented Creative Team at Mozilla. Specialties include swashbuckling, interpretive dance, finger puppetry, mud-wrestling and decoupage.\",\"url\":\"https:\/\/blog.mozilla.org\/opendesign\/author\/tmurraymozilla-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Roads not taken - Mozilla Open Design","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blog.mozilla.org\/opendesign\/roads-not-taken\/","twitter_misc":{"Written by":"Tim Murray","Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blog.mozilla.org\/opendesign\/roads-not-taken\/","url":"https:\/\/blog.mozilla.org\/opendesign\/roads-not-taken\/","name":"Roads not taken - Mozilla Open Design","isPartOf":{"@id":"https:\/\/blog.mozilla.org\/opendesign\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blog.mozilla.org\/opendesign\/roads-not-taken\/#primaryimage"},"image":{"@id":"https:\/\/blog.mozilla.org\/opendesign\/roads-not-taken\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.mozilla.org\/opendesign\/files\/2017\/02\/mozilla_eye_rounded_2.jpg","datePublished":"2017-02-15T06:49:03+00:00","dateModified":"2017-02-15T06:49:03+00:00","author":{"@id":"https:\/\/blog.mozilla.org\/opendesign\/#\/schema\/person\/70d26c3cc5645b525299dd11f03f31b6"},"breadcrumb":{"@id":"https:\/\/blog.mozilla.org\/opendesign\/roads-not-taken\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blog.mozilla.org\/opendesign\/roads-not-taken\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blog.mozilla.org\/opendesign\/roads-not-taken\/#primaryimage","url":"https:\/\/blog.mozilla.org\/opendesign\/files\/2017\/02\/mozilla_eye_rounded_2.jpg","contentUrl":"https:\/\/blog.mozilla.org\/opendesign\/files\/2017\/02\/mozilla_eye_rounded_2.jpg","width":1500,"height":674},{"@type":"BreadcrumbList","@id":"https:\/\/blog.mozilla.org\/opendesign\/roads-not-taken\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blog.mozilla.org\/opendesign\/"},{"@type":"ListItem","position":2,"name":"Roads not taken"}]},{"@type":"WebSite","@id":"https:\/\/blog.mozilla.org\/opendesign\/#website","url":"https:\/\/blog.mozilla.org\/opendesign\/","name":"Mozilla Open Design","description":"branding without walls","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blog.mozilla.org\/opendesign\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/blog.mozilla.org\/opendesign\/#\/schema\/person\/70d26c3cc5645b525299dd11f03f31b6","name":"Tim Murray","description":"I lead the multi-talented Creative Team at Mozilla. Specialties include swashbuckling, interpretive dance, finger puppetry, mud-wrestling and decoupage.","url":"https:\/\/blog.mozilla.org\/opendesign\/author\/tmurraymozilla-com\/"}]}},"_links":{"self":[{"href":"https:\/\/blog.mozilla.org\/opendesign\/wp-json\/wp\/v2\/posts\/562"}],"collection":[{"href":"https:\/\/blog.mozilla.org\/opendesign\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.mozilla.org\/opendesign\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/opendesign\/wp-json\/wp\/v2\/users\/1302"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/opendesign\/wp-json\/wp\/v2\/comments?post=562"}],"version-history":[{"count":0,"href":"https:\/\/blog.mozilla.org\/opendesign\/wp-json\/wp\/v2\/posts\/562\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/opendesign\/wp-json\/wp\/v2\/media\/563"}],"wp:attachment":[{"href":"https:\/\/blog.mozilla.org\/opendesign\/wp-json\/wp\/v2\/media?parent=562"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mozilla.org\/opendesign\/wp-json\/wp\/v2\/categories?post=562"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mozilla.org\/opendesign\/wp-json\/wp\/v2\/tags?post=562"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/blog.mozilla.org\/opendesign\/wp-json\/wp\/v2\/coauthors?post=562"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}