Special thanks to Jes Foster who designed the user interface.

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.

It’s my task to finish the T / MC website. All of the groundwork has been laid out thanks to Jake; I just have to design within the system.

I’ve not posted here in some time — the Tutor/Mentor Connection Project took over my workdays with increasing determination, right up until the end. Although the site development is still up in the air, I’m quite proud of how the project has turned out. The site looks great, if I say so myself, and is certainly the most stylish, navigable, and unambiguous nonprofit site I’ve seen throughout this process. What an upgrade from the current version of tutormentorconnection.org! It’s fantastic that (eventually) my work will actually be used by real people to satisfy their needs. That the site aims to improve the lives of impoverished children only adds another level of reward to this project.

Perhaps it would be helpful to post some of the current, near-finalized mockups. (To see these images at full resolution, right-click them and “Open Link in New Window”.) The best examples will be the first pages that any user will see when they start to use the site, “Get Involved” and its subpages, “Give Help” and “Get Help”. Here is the first of the three:

Notice how we have simplified the user path into an extremely easy dichotomy: either you need help or have help to give. No more obscure “Hot Links” full of ambiguous, offsite tools. If you fall into the first category, you’ll see a page like this:

This simplified program list is filterable and offers convenient links to T/MC’s excellent mapping tool. On the other side of getting involved, we have Give Help:

With a solid grid, clean, hierarchical typography, and helpful icons, the site’s many resources become transparent. Their multitude of purposes is no longer confusing.

Finally, here is the Resources section of the site, a landing page from which visitors may pick from T/MC’s vast databases of articles and links:

That’s where this project currently rests. Once again, I’m very proud of the progress, and I genuinely enjoyed working on developing this design. The icons in particular were fun to do— make sure not to miss the “T/MC Times”.

I’ve also been lightly working on a logo for Kyle McCarthy’s father-in-law, who owns a company that sells table pads. Concepts I tried to express were the product’s old-fashioned nature, the idea of quality and tradition, and the product’s structure of layers of protection. Here are some of the various stages of development of this identity.

So that is what I have been up to. Now I have only fifteen minutes left, and I must say that my time in the Royal Order has lived up to the promise that the firm’s name provides. I had as much fun as a king, or at least a prince, and I must have learned at least what I do in the course of a semester. Web design, it turns out, isn’t so bad after all. Yes, there is a lot of wrangling with the technology, and yes, clients will erode the quality of a designer’s work, but for all its hassles, the challenge of designing an interactive page is fun and fulfilling to take on. With the considerations of information architecture, user paths, fold lines, search engine optimization, and interactivity, it’s sure a step up from posters and book covers.

So to the Royal Order: thank you for taking me under your crown and making me one of your own for the past two months. Regal metaphors aside, I can’t imagine a better thing to do at this particular moment in my career, and I certainly can’t think of a better environment to work in. As I make the transition from the admin of this blog to just a lowly reader, I know I’ll recall this internship with nothing but fondness. All I ask is a little reciprocation: never forget Roy Mendelsohn.

At first glance, Fire Rift is impressive. The CMS has set out to make life easier for developers by only managing your content via the CMS. No more hacking of your html and css to fit the limitations of your CMS’s templating system (often archaic and completely different across various other CMS’s.) With Fire Rift, you cut and code your psd and let Fire Rift take care of the content via css class names or javascript.

Meet the interface:

Creating content looks dead simple thanks to a back end that is hands down the cleanest I’ve seen from any other cms editor. See the overview video for more info.

Ahead of it’s time:

With every new CMS there are issues that may get in the way of fulfilling your project requirements. The biggest debate centered around Fire Rift is the questionable handling of content for SEO. The problem is that Fire Rift is a javascript based CMS. That means the actual content on the page relies on javascript to be displayed. Try a view source of this Fire Rift powered example page to see what I mean. Google’s search engine reportedly only has the ability to index content via an onClick event. Meaning google only sees your html framework sans the content from the CMS. This fact alone is the EPIC FAIL flaw of Fire Rift. It may just work against you when competing for top results against other server side CMS systems serving up similar content in the page.

In my opinion this is a great step forward for dynamic content. As many browsers focus on boosting javascript performance and treating the web as an app thus blurring the lines between desktop and cloud computing. But this CMS is not ready for primetime. Unless google finds a new way to index content via javascript (completely possible but not in the near future) or you go ahead and also serve up static content html pages (rendering the idea of a cms useless), I would consider it a beta idea that would be fun for designers/web developers to experiment with or use on sites that truly do not need to be spidered every day for content.

Garrett

The real kicker is to see Leo in the Hong Kong press. There’s also a  thumbnail of the book, which I am awaiting a copy of.

-TH

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