Honda.com

Honda.com was the first foray into truly responsive design for Honda and marked the beginning of the Razorfish / AHM relationship. The end result was a fully responsive platform that served as the lobby of the Honda ecosystem. 

Creative Director: Toby Past, Art Direction / Design: Joey Manfre, Design: Vincent Shi, Experience Director, Ralph Zenger, Associate UX Director, Jeff Yam, IA: Musangi Muthui, 

Creative Director: Toby Past, Art Direction / Design: Joey Manfre, Design: Vincent Shi, Experience Director, Ralph Zenger, Associate UX Director, Jeff Yam, IA: Musangi Muthui, 

Reinforce The Brand

There is this boundless sense of "What if?" at Honda and we wanted to communicate that right off the bat with etherial imagery and a strong brand statement. Few realize how massive Honda is. Not one, but two automotive brands, motorcycles, jet skis, private jets, lawnmowers, robots, you name it. If you can dream it, there's a good chance Honda makes it. They wanted to make a big deal out of this and show the breadth of their expertise.

Bounce If You Need To

Millions of visitors show up every month and stare at the screen in confusion. Most of these people are looking for cars. They don't realize that what they're really looking for is automobiles.honda.com. 

There had to be a way to redirect errant visits quickly and easily to their desired destination. Enter "The Exit Grid".

Part political minefield, part engineering nightmare, part design exercise, the exit grid is the most heavily trafficked section of the site. Each block showcases a hero product from a Honda division and links to the respective site.

The majority of Honda.com users are looking for Honda Autos, so that had to be the most prominent block that reinforced Honda Blue in the US. Honda Powersports is technically second in terms of pure business priorities, but lots of visitors are looking for Acura so they both get secondary billing with the 2x1 images and placement up top. The rest of the divisions communicate the sheer breadth of Honda's expertise and leadership in engine manufacturing. 

Let Them Dive Deep

If a user has scrolled this far they're in it for the long haul. They want to learn about Honda the company and we needed to have valuable content on offer. We highlight their social channels while also surfacing key content from key categories with Asimo taking the lead.

Responsive design motion study showing how content flows across browser sizes and devices, plus lazy load animation sequence for devs to work off of.

Edit & Motion by Nem Perez.

 

Phase 2: Evolving Into Something More

There was an idea floating around that Honda.com could actually replace Corporate.Honda.com as a source of information about the company as whole as opposed to primarily an exit grid. This exploration sought to answer that ask. The top portion remained largely the same, but everything else was overhauled. Bigger imagery, more information at the top level and more diggable content for each division section was the first step. Then we replaced the content hub with a more robust section that more thoroughly explains Honda's key corporate pillars.

We also felt it was important to tell the story of Soichiro Honda. He was a visionary, a racer, a preternatural businessman and a hell of an interesting character that most people know nothing about. So much of his ethos permeates the company culture and we wanted to make that public facing. 

Each of the corporate pillar sections have a quick expand arrow to show a quick view of the featured story to make the site feel more statefull and app like and less like a clickable PDF. The footer features visual links to each of the divisions in another take on the exit grid.

 

Navigation Detail

Again, there's an emphasis on ensuring that users looking for Automobiles.Honda.com can be redirected quickly. The nested navigation offers flexibility and animation opportunities. The new exit grid gives a quick description for each division while also showing what they make at a glance.