This past year The Royal Order was chosen to redesign the Kohler Engines website. TRO has been a long-time partner with Kohler brands and their Engines brand is no exception. It was TRO who designed the last version of kohlerengines.com back in 2004. This time around a lot has changed. Kohler Engines has grown and expanded its product line to other market segments. Kohler sought to reach those markets and educate them about their advanced engineering, the superior quality of their engines and the variety of engines they provide for a large percentage of the consumer and professional grade equipment on the market. So building consumer awareness and loyalty was crucial, but so was providing an accessible and prominent amount of support for Kohler Engines owners looking for resources.

To that end, we designed interactive tools like the Engine Quickfinder, a global filtering tool with the ability to narrow Kohler’s 84 engines down to only those that match the user’s criteria. A Service and Dealer Locator was created to help owners protect their investment and provide access to Kohler Engines experts. An Engine Identifier tool was designed to help owners understand how to read their engine labels, while the product detail pages give users the ability to zoom-in close to engine detail and see exactly where labels are located on their engine. Also slated are a new engines interactive module, 360 degree engine views and the ability to browse by type of equipment.

Additionally, a new section called the Kohler Difference was included with the purpose of housing an expandable series of rich interactive experiences that teach users about how engines work and showcase the advanced features available in Kohler engines. For launch we created these three Flash pieces: How Engines Work, How Hydraulic Valve Lifters Work, and How Electronic Fuel Injection Works. Our vision was to take the user inside the engine so they can see the parts moving and functioning like a technical drawing come to life, then give them the ability to learn about each part and their function. In the end, each piece works as a quick tutorial on specific engine functions that help communicate Kohler’s message of quality engineering. The fantastic illustration work was created by Troy Dolittle of Top Dog Illustration. Before we set these intricate drawings to motion, we partnered with the Kohler engineers to learn how things work for ourselves. After a lot of synchronizing and tweaking, we got them just right. They were so happy with the results that their engineers are now using the pieces for instruction at the Kohler Factory School. Try them out for yourself and learn a bit about how engines work…

The Royal Order has officially joined the thousands of people addicted to Twitter. So follow our page, and in less than 140 characters you’ll learn about the latest RO news.

User feedback collected from online site surveys indicated several flaws in the home page architecture of both Destination Kohler (Wisconsin and St Andrews) sites that made it difficult to access specific content. Featured content tiles were not self-evident and in many cases redundant with global navigation. Secondary and footer navigation needed to be reorganized, and the page needed to be optimized for search engines and tagged with Omniture code. Additionally, the business wished to do a better job telling the brand story and promoting specific content such as packages, book online, e-commerce and special events.

Our biggest challenge was in making strategic architectural and interface modifications without redesigning the entire site — since aside from the landing pages, site content was to remain unchanged. A primary goal was allowing users to book online at any time during their site visit. Since the interface was only 800 pixels wide, it was determined in IA that if we added a column to the right, we could stay within the standard 1024 display dimension, while housing a variety of ’support’ tools — including the persistent booking widget, 800 number and click to chat. In the interest of keeping this column efficient and the content apparent but digestible, we chose to employ javascript and reveal them one at a time interactively. This column is carried throughout the site, and was a relatively simple update for the technical team to deploy.

From a branding standpoint, DK wished to update the look and feel to make it more vibrant and contemporary. Garamond was the dominant typeface, and in addition to being difficult to read in navigational menus, it’s application said ‘conservative’. Avenir was selected as a clean sans serif alternative, with a wide variety of weights and legibility at small sizes. The color palette for both sites have also been tweaked and extended to reflect the two similar but different brand experiences. In redesigning the landing pages, the breadth of service offerings has been given center stage, sequencing through a variety of beautiful location photography within an embedded Flash movie. Simplifying the promotional spiffs and focusing navigational organization makes finding content easy, and browsing content rewarding.

Sometimes relatively small modifications to an existing site can make a big difference.

-TH

The other day we were talking about t-shirts and Kyle threw out the idea of bobbleheads representing the 5 main characters in the film. We tapped Jon Oye — illustrator extraordinaire and Ogilvy storyboard artist — who inked these classic caricatures within a day. I decided to give them each their own shirt and make a commemorative series out of them. Here are the first two: Andy and George. I’ll be posting more as we finish them, and hopefully screening info in the next few weeks.

-TH

On a related note, we’re still looking for a partner to donate time to develop this project. Any takers?

It’s been another few weeks, and that means more progress on the Tutor/Mentor project. The phase we’ve just completed was the creation of mood boards, which are mockups not of the website itself, but of the feeling and visual vocabulary it might take on. The boards look a bit like large print ads for the website – you might think of them as themes or templates, modeling, for instance, the way the new site might treat a headline or image.

Before making these, though, we created a spectrum of designs from which we could draw inspiration, covering a conference table in printouts of websites similar to T/MC and assorted magazine clippings. After selecting the examples we agreed were appropriate for the project, it emerged that there were two different design directions we wanted to explore. One was a more editorial aesthetic, with antiqued photos, newspaper-style type treatments, and organic colors and visual elements. The other skewed towards science and infographics, heavy on the transparency, with clean typography and bright colors.

The "editorial" feel on the left; the "infographic" on the right.

Inspiration found, Aaron and I went on to designing the boards, he exploring the editorial direction, and I the infographic. After several revisions, here is what we have:

I’m responsible for this design. I have to say that apparently somewhere along the line, Aaron and I wound up switching our directions; this certainly feels more editorial than it does like Wired magazine. I focused on a clean, readable diagram that expressed this quote from the T/MC site: “[Tutor/Mentor Connection is] the bridge that connects volunteers, donors and business leaders with students, families and schools.” The photos, too, are from the T/MC galleries. I like what came out of this, as I feel the sciencey diagram is balanced by the more personal touch that the quote and images bring to the board. It’s starting, as Tim said during one meeting, to tell a story, and I think the story is going to be compelling.

This is Aaron’s design. See why I said it seems like we switched directions? His is more content-heavy than mine; you can see he has been making these boards for some time. Aaron’s method was to show how the new site might make T/MC’s massive amount of content digestible by breaking it into clear, hierarchized chunks. His excellent typography does much to this end, featuring the quote we felt was key to T/MC’s message. Moreso than in my design, clear website elements are visible here, like tabs, body copy, and even a little footer with examples of a few ideas we’re still exploring to freshen up T/MC’s identity. Probably the cleverest elements on the page, I think, are the small bits of “school vernacular” Aaron included: dividers that look like “cut here” lines, a little pencil next to “Learn More,” checkboxes, and lined paper. His diagram illustrates same quote as mine, with arrows showing the connection TMC makes between the disparate groups. And don’t worry, we don’t really like the little people icons either.

As a personal note, I have to say that I found the mood boards to be the most difficult part of the process so far. They are a very high-level, abstract way of designing a brand, and yet the execution must be extremely concrete, with each part of the page there for a well-considered reason. I had some difficulty locating the line between conceptual branding and actual site design, but after all the revisions, I feel I have some sort of a handle on it now. In any case, we are moving on to creating actual webpages, and I’m very much looking forward to that.

The Ann Sacks catalog has been requested for permanent collection in the Newberry Library’s History of Print. If you’re not familiar with the Newberry or the collection, it’s absolutely amazing and always an honor when someone like Paul Gehl selects your work. Some info on the collection can be found here: http://www.newberry.org/collections/wing.html

Our little catalog will be in great company, with original works and printed ephemera dating back to the 15th century, including some of the first printed manuscripts and some of the greats of design, typography and printing, for instance: Bodoni, Goudy, Tschichold, Didot and Gill.

It’s a bit tangled up, right? Notice how Donate, in particular, is buried a few levels deep, and is actually located on another website.

So I dragged those little boxes around, reorganizing them into new categories (which everyone here calls “buckets”) that make sense for the amount of content the T/MC site has grown to contain. The first revision:

Which was a good effort, but as these things go, it’s now sitting next to me covered in red Sharpie. Krista provided some seriously helpful feedback, resulting in the current revision of T/MC’s sitemap:

I’m proud of the progress here. We’ve managed to reduce the site’s complex navigation to three main categories: About, Get Involved, and Resources. The hierarchy is much clearer; under Get Involved, for instance, a user may choose to “Give Help” or “Get Help”. Special consideration has been given to making the name of each bucket and page as unambiguous as possible, and key features of the site, like Donation, Newsletter Signup, and Contact, have been given permanent, prominent locations in the site’s sidebar and footer. As always, this is a work in progress, so everything might change at any time, but to me, this looks like a good candidate for tutormentorconnection.org’s new structure.

It’s no secret that our friends at Mozilla have a thing for online communities. However, their latest project, Mozilla Service Week, finds them reaching out to their loyal fan base with the goal of helping those who aren’t as fluent with the Web.

Mozilla Service Week (MSW) seeks to not only help people get online, but also improve that experience so that the Internet will do what it’s supposed to – improve our quality of life. It’s a logical social cause for a company like Mozilla and one that will be achieved through the energy and skills of the talented members of their online community. The “service” portion of this project will be fulfilled through hours of donated actions from Web-savvy volunteers taking the initiative to do things like teach a senior citizen how to set up an email account or spending the day showing a non-profit organization how to utilize social networking. But it won’t stop there…

Over the past couple of months the Royal Order has been helping Mozilla design the MSW website and collateral materials. Although this is technically a branding system we’ve created, we started with the website design in an effort to allow plenty of time for development while the rest of the branding and collateral was fleshed-out offline.

The purpose of the website is threefold: recruit volunteers and partners, document their actions, and inspire an online community beyond the week of the event. The design direction began with referencing the inspirational imagery of 1930s WPA murals and the various aesthetic and compositional styles of advertising from the 30s and 40s – then marrying that with a clean and versatile Web-friendly approach to the page layouts.

One overarching goal was to make sure the site design will work when translated in 17 different languages, and counting. Additionally, the design needed to direct both volunteers and those in need of help to the proper points of interest on the site, while providing them with ideas on how to get involved and inspire participation. Ultimately, we want users to register and pledge a desired number of hours, or find talented volunteers who can help with a specific need. The idea is that volunteers will then return to the MSW site to share their story of service and inspire others to get involved. They will be able to do this using not only their words, but also by linking to their online media like videos, photo albums, blogs and websites.

Some other interesting devices that will be used on the site are: Mozilla’s Lizard Feeder, which tracks content related to MSW and streams it live on the home page; a set of of site badges, ads, and branded posters volunteers and users can download to promote MSW and their volunteer actions; personalized certificates that will be generated for volunteers who return to log their actions; and a ticker that tracks the number or hours donated.

Mozilla Service Week is set to take place the week of September 14-21 of this year and Mozilla will be rolling out the web site (mozillaservice.org) over the next few months. We’re looking forward to seeing the site and brand in action as volunteers log their service stories and hours. As always, we’re honored to be a part of Mozilla’s distinguished online legacy as well as their bold visual design tradition. But The Royal Order is also proud to be participating in MSW as we help Tutor Mentor Connections/Cabrini Connections redesign their online presence. Check back for updates concerning the launch. You can also follow the progress and developments on Mozilla marketing guru Mary Clovig’s blog or follow them on Twitter and Facebook.

Other sites we’ve designed with Mozilla: firefox.com, mozillamessaging.com, spreadfirefox.com