Chatting With Tim Hogan About Design

After my recent post about the 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!

Back to the fuzz

Feeling Fennec-y

Now that Firefox 3 is out the door, it’s a good time to look ahead to some other projects, like our mobile efforts.

At the request of Doug Turner and the Mobile team, I worked with Nobox to create a logo they could use in a variety of spots during the Fennec development process. (Big caveat: this logo has nothing do to with the final Firefox Mobile branding.) The result looks like this:
big caveat

There’s also a significantly simplified version that will be used in spots where the fully rendered one won’t work. The inspiration for both was an actual Fennec fox, although the image had to be toned down a bit so as not to overwhelm the cuteness filter on most handheld devices.

Big Caveat

This logo has already popped up in the header of the new about:mobile newsletter…keep an eye out for it coming to plenty of other places soon.

Back to the fuzz

Firefox 3 Is Here, and So Is the New

Any piece of software as undeniably awesome as Firefox 3 deserves a pretty great vehicle for sharing it with the world. With that in mind, we set out more than eight months ago to completely redesign, and I’m happy to report that, after a few hiccups, both the new site and new software went live together this morning.

Firefox 3 Is Here, and So Is the New

We’ve launched a new version of the Mozilla site with every major Firefox release to meet the changing needs of the product and our growing audience, and our goals for this latest edition were pretty lofty. As Firefox has matured into a mainstream product used by more than 170 million people around the world every day, we needed a site that could communicate the many benefits of Firefox 3 to people of all levels of Web expertise. To do that, we enlisted the Royal Order of Experience Design out of Chicago to help us blow up the old and start from scratch.

I’ll blog about certain areas of the site in more detail over the coming weeks, but for now here’s a quick overview:
* A completely new look & feel. I blogged about this a bit already, and will do so more soon, but for now I’ll just quote our objective from the original design brief:
“The site design absolutely needs to embody our unique, unconventional and extremely un-corporate nature…while still being professional, informative and useful, of course. It 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. 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.” 
* A significantly expanded section devoted to all things Firefox. The main Firefox page (aka serves up different content depending on which browser you’re using (Firefox 2, Firefox 3, IE, Safari, etc).
A detailed Firefox 3 features page, full of screenshots, illustrations and user-friendly copy explaining all the goodness.
A short overview video aimed at explaining the high points of Firefox 3 to new users. (warning: beware of ninjas)
* In-depth pages describing Firefox 3 securityadd-ons and our concept of “100% organic software.”
* A tips & tricks page with helpful hints for Firefox users of varying levels of expertise. (As I noted a few months ago, we’re always looking for more content here, so please share your favorite secrets!)
New in-product pages to make sure the experience between the site and the software is as seamless as possible.
* A directory of other key Mozilla sites to give people a window into our world (think of this as the Yellow Pages for potential new community members).
An expanded Press Center, complete with b-roll video, a downloadable reviewer’s guide and other goodies.
* A “What is Mozilla?” page to communicate the various nuances of the Mozilla Project and our mission to new users.

As with any project of this scale, there are literally dozens of people who deserve a big share of the credit, but I’d like to single out a few in particular:
The Royal Order – Tim Hogan and his team have been our partners throughout the entire process and have consistently amazed me with their ability to not only translate some of my more esoteric design requests into reality, but to deliver a final result that was always much better than my own vision. Also, although many highly skilled design agencies either lack the interest or ability to get down in the weeds and focus on the little things, the Royal Order guys spent hours pushing pixels and working with our dev and QA groups to make sure all the details were exactly right.
Delicious Design League – we asked them to create illustrations that would not only serve as the main visual element of the site, but would also somehow represent everything we like about the internet as a whole. Kind of a big task. Not only did they succeed, but they did it in a way that makes me smile every time I see their work. Incredible creativity from these guys.
Steven Garrity & silverorange – a site is only as good as the people building it, and Steven and his team handled every crazy curveball we threw at them (and there were many) with skill and aplomb. Longtime Mozilla collaborators, they brought their contributions to a new level this time and delivered a site that really shows off some of the best aspects of the open Web.
Stephen Donner – by my count, there have been at least 217 bugs filed as part of the redesign, and Stephen has been on top of them all. Without his dedication, attention to detail and all-around QA expertise there’s no way this project ever would have come together.
Pascal Chevrel and our localization community – the work these guys have done is nothing short of astounding. Despite already having their hands full with things like Download Day and Firefox 3 itself, Pascal and his team found the time to localize more than 2,800 pages and 800 screenshots for and its various international varieties. Think about that for a minute!

I’d also like to give shoutouts to Alix Franquet for helping with the video, features and tips & tricks pages; Elise Allen for her copywriting on the features page; Mike Beltzner for his input on the in-product pages; Wil Clouser for his all around web dev gurudom and Paul Kim for his overall wisdom and perspective. Plus, all the beta testers who offered their comments along the way. And, apologies to all the many worthy people whose names aren’t listed here…it was a true team effort all around.

Finally, if you’ve made it through this entire epic post, go download Firefox 3 and help us set a world record!

Back to the fuzz

Celebrating 10 Years of Mozilla

This year’s 10th anniversary of Mozilla is a major milestone, and certainly one worth celebrating with some special imagery. I’m a huge fan of the original Mozilla art created by Shepard Fairey way back in 1998, so the opportunity to do something new in that style was just too good to pass up.

So, Tara Shahian and I contacted designer Lee Tom (creator of the Rock Your Firefox artwork and Spread Firefox t-shirt, among other things) and worked with him to create this as a marketing stunt:

Celebrating 10 Years of Mozilla

Our goal was to create a piece that retained the bold, constructivist graphic style of the original without the “happy worker” Communist imagery that understandably rubbed some in our community the wrong way.

If you’re so inclined, there’s a bigger version that’s more suitable for printing, and Tara created six different sizes of desktop wallpaper. Plans are also in the works for a t-shirt that will be tied to Mozilla Foundation donations…David Boswell will have more details on that soon.

Big thanks are due to Lee and Tara for lending their talents to this, and even bigger thanks are due to the thousands of people around the world who, for the last 10 years, have helped to make Mozilla what it is today. Happy anniversary, everyone!

Back to the fuzz

Powered by WordPress. Designed by WooThemes