After my recent post about the Mozilla.com redesign, I figured it was time to go straight to the source. So, I chatted up the co-founder and creative director of the Royal Order, Tim Hogan, to get his take on the whole crazy process. (Incidentally, Tim was at the Summit, so if you were there you might recognize this guy)
Our conversation was held over IM a few weeks before the Summit. For Tim’s thoughts on designing in the open, differentiating Mozilla from the other guys and why he likes those dancing egg illustrations, read on:
First, a little background: tell us a bit about yourself and how you came to be involved with Mozilla.
The Royal Order is a Chicago-based design boutique that was started in 2001 in the wake of the dot com bust. The core members of the team have been working together since the mid-nineties, and have been involved with design for the web literally since the beginning. We have always looked at design and marketing as a way to tell a good story, regardless of the medium, and we’ve been lucky enough to work with people and brands who think our approach matches their needs.
Through a somewhat convoluted chain of people and companies in the new media space, Mozilla first contacted us to bid on the Mozilla Store site redesign back in late 2006. If memory serves, I think it may have been someone at a former employer of yours…? [ed. note: Lisa Gansky. She rules.]Although disappointed that the project ended up going to another agency, we really liked what Mozilla stood for and felt we struck a connection with yourself and Paul. Toward the end of 2007 we were thrilled to receive the RFP for the Mozilla site redesign, and after several conversations were selected for the project.
It’s kind of hard to believe, but we’ve been working on this project together for about eight months now. Looking back, what were your expectations when we started and how did they compare to the actual process?
We have been doing this long enough to realize that the end product is often very different than the one imagined at the project onset. This is why we have tried to create a process and methodology that is flexible. While there are components we refuse to compromise, there is no exact recipe that will work for every project. Given the relative complexity of many of the full-scale web development projects we work on, 6-12 month timelines are not uncommon.
The initial outline included ‘light architecture and an updated look and feel’. This became a bit like a loose thread on a sweater, and before long many of the pages considered out of scope found their way in. I think it worked out well, because we maintained good communication regarding potential impact, and could make informed decisions.
Another area that presented potential difficulties was working remotely between ourselves in Chicago, Mozilla in Mountain View, and silverorange in Canada. This quickly proved a non-issue however, and Steven and the silverorange team have been absolutely awesome to work with. It’s great when like-minded people with a common goal come together and push in the same direction — there is no ego in it, everyone just wants the best result and is willing to do what it takes to achieve it. That may sound new-age, but when you spend this amount of time on a project, it’s a lot more pleasant with good chemistry.
In a broad sense, what was your approach to designing the site?
Actually it was essentially the same approach we take for every project: 1.) identify the core user groups, and establish a smart, streamlined method of helping them complete their goals, and 2.) execute in a way that is appropriate (but evolves) the brand(s).
One of the big reasons we chose TRO for this project was the fact that you guys really seemed to ‘get’ what were looking for in terms of how to present the Mozilla and Firefox brands. I’d like to read you a few lines from the initial creative brief, and would love to hear how you interpreted them and what your approach was to bring them to life in the final design:
a) The site design absolutely needs to embody our unique, unconventional and extremely un-corporate nature…while still being professional, informative and useful, of course.
I don’t know how many times I read this line over the course of the project, but it was a lot. This paradox was not unlike the one we were presented with in the Patagonia site redesign, in which self-proclaimed luddites wanted to embrace the latest web technology. We decided whatever anti-establishment messaging we chose to incorporate for Mozilla had to be based in an absolutely solid, logical foundation of site architecture. This would be the default when making decisions.
b) The site design should be clean, but not boring; modern, but not tied to any short-term trend. It should be friendly and accessible enough to communicate the details of a high-tech product without feeling cold and technical. It should convey our passion for and faith in the power and potential of the web.
As you know, this took us down several avenues before settling into a solution everyone felt good about. In some cases we pushed too far with our desire to leverage the wealth of content and imagery being generated by the Mozilla community. It was one of the first ideas that came to me, so I really pushed for it. Ultimately I had to accept that while the community was certainly a huge part of the company DNA, the elemental components of the brand had to be established and maintained by the organization.
c) Lastly, it should have a sense of fun and playfulness – we’re serious about what we do but we don’t take ourselves too seriously.
This seemed to us to be absolutely critical in differentiating Mozilla from IE and Safari, and had to be communicated through site copy first and foremost. It’s at once self-effacing and confident — more paradoxes. Luckily, you and your team were already writing this content without realizing just how perfect it was. We tried editing it and making it more pithy, but wound up back where you had started.
I’d guess that one of the more unusual aspects of working with Mozilla is that we insisted on making this process as open as possible, such as sharing your earliest design comps with the general public. What was that experience like for you? How do you think it affected the end result?
I have to admit that this made me cringe when I first heard it. Despite couching all of our work in specific rationale and as solutions to business challenges, we are human beings and like it or not, vulnerable to criticism. I had never opened up the process to this large of an audience, and wasn’t sure what to expect. I was encouraged that you and Paul were completely aware of this and took the role of design advocate to heart, while allowing the community to speak candidly through your blogs.
Obviously some of the feedback was more constructive than other, but overall, people that took the time to respond appreciated that Mozilla was truly putting their money where their mouth is. I think this trust strengthened the company’s relationship to its constituents, and wouldn’t have changed it.
What’s the TRO creative process like? What was the team you had working on the site like?
Our process follows a fairly well established sequence of Define, Design, Develop and Deploy. With myself as creative director and Stephanie Bankhead as project manager, we maintained the account relationship and have stayed engaged since kickoff. Tasha Luksa executed a formal site audit and competitive analysis during the Define Phase before establishing the ultimate site architecture. This was no small task given the number of discreet web properties and sometimes inconsistent navigation schemes.
Next the design team of Phil Machalski, Jes Foster and Krista Seidl went to work on the look and feel of the interface. This really became the bulk of our work, and as I mentioned before, proved to be elusive before reaching the final solution. During Develop, we worked closely with Steven and his team at Silver Orange when handing off files for production, and Phil’s tenacity and attention to detail are what will ultimately make the site experience seamless. As the new site is deployed, we are creating a style guide and build files so the Mozilla team is able to make regular site updates without compromising the integrity of the system.
Worth mentioning, on a parallel path, the work Jason Meyer did on the Firefox3 product demonstration contributed to the evolution of the brand that I mentioned earlier.
Obviously the illustrations are one of the most central elements of the site…how did you come to work with the Delicious Design League on this?
We are all music fans, and the independent scene in Chicago is one of the best in the country. We were familiar with Billy’s concert posters, and think it’s some of the most clever, smart, memorable work out there. I had never worked on a project with DDL, but when we met it was yet another instance where the gears clicked into place — they just got it.
Some of the home page concepts actually came out of ideas from that first hour-long meeting. I tried to keep the creative direction as high-level as possible, because I was really interested in letting him approach this like a concert poster — where the visual tie-ins are not always immediately apparent, but slowly become clear as you make associations. To me this perfectly emulated one of the pillars of the Mozilla brand: the more time you spend with the organization and the products, the more you appreciate their value.
When it came time to do the illustrations, I think our direction to you was something like “they should represent the power and potential of the Internet, yet in an abstract way”. How did you take that impossibly vague task and make something tangible out of it?
To understand the cockeyed optimism that makes Mozilla so great, one has to look beyond the framework, and see its potential. This is a tangible concept, but let’s face it, it’s hard to set out on a photo shoot to capture something that will communicate the infinite potential of the web. Stock photography was loaded with visual clichés, and the community-generated Flickr imagery that I originally thought could provide us with all the assets we could ever want proved to be far too specific.
We decided to embrace the abstractness of the message, and make up our own versions of this theme. In this way, a network of plumbing pipes may in fact house a cluster of doves. The hole in a tree trunk becomes the node in a system of branches that release hot air balloons. Flying saucers zoom out of the sparks in a circuitry network. These primary objects are vehicles that allow Firefox users to literally ‘take flight’, and the smaller illustrations represent the many other opportunities just waiting to burst forth.
What are your thoughts on the end result? do you have a favorite page or a favorite illustration?
I think as a team we accomplished our goals. The overall site usability has been greatly improved, and the silhouette illustrations have been replaced with something fresh that can be used in multiple applications. Hopefully we haven’t alienated any of Mozilla’s core supporters, while redefining the look and feel of the site.
My favorite illustrations are based on one of my favorite product benefits, and that’s the eggs within the 100% organic software page. The carton of multi-cultural, multi-ethnic eggs still makes me smile every time I see it.
Ok, that’s about it from me…anything else you’d like to note?
I guess one note. I like that our client relationships tend to last, and we end up becoming more like strategic partners. This can be rare in our profession, and I hope to stay involved in working with the Mozilla team in the future, and continue doing good work.
On that note, see you at the summit!