Overview:
HOK is a global design, architecture, engineering and planning firm with over 1,600 employees and 24 offices. They have a nice little “equation” on their site that says Design + Thought Leadership x People = HOK. I think it’s a good summary of the type of culture that exists there and a good lead in to what I’d like to profile today.
Experience:
There isn’t any doubt that when you visit hok.com, that they have a very specific path planned out for their visitors. It’s design first, thought leadership second. And it works amazingly well. For instance, whatever size your browser window is, the image slider will resize to showcase their current project almost from top to bottom (sans some simple top level navigation). When you mouseover the image, selective content appears. It could be a snippet of info from the designer, a video about the project or a factoid about the innovative steps they are being taken in the design. The nice thing about it is the fact that it is content you can ingest in a few seconds. Not something you have to sit and read for 5 minutes. If you choose to find out more about the project by clicking the “+” you will be brought to either the news section or a news article from an outside source where the article originates. Again, it all feels very natural in terms of user experience.
If you scroll down below the image or the fold (Hmmmm, does the fold really matter? Not here.), you will see “tumblr-like” tile layout of content. It’s filterable by design, thought leadership, people and stats. It’s a very simple and effective way to show the most curent happenings around the firm and the work they are doing. All of which is pretty outstanding. Click on any of the tiles to expand more in detail. One of the things you’ll notice is that when you click on anything tagged “people” you will be brought to their blog, hoklife.com. But we’ll talk more about that in a lil’ bit.
One of the things I wanted to quickly touch on has to do with the structure of this content section, and subsequent pages in the site, is the fact that it is built with responsive design in mind. Meaning, depending on the size of your browser window, the information and layout will reorganize and adapt to the space you give it. It’s not something you would immediately notice because how often do we change our window size while we are actually visiting a site, but the fact that it does just shows how they are thinking ahead and taking into account the multitude of ways a visitor may view the site. Not surprisingly, this translates very well to their mobile site. Seeing this, makes a good case for responsive design on mobile. The entire “about” landing page works seemlessly in this way. Shifting content, locations, projects and services to fit the browser window.
Much like the homepage, the rest of the site has the tumblr-like tiles of content below the main info for that page. It really makes the site feel less “templated.” Gone is the traditional “your side navigation goes on the left, your main content goes in the center and your side bar goes on the right.” It a nice release from the seemingly standard and mundane. But the thought leadership page is where it all really comes together. By simply adding in more categories-Research, Workplace, Sustainability, and Innovation- it allows the user to really dial in to what type of content they are looking for. And what makes it so great is that it is a good mix of articles, videos, interviews and news events. By involving actual people to express what makes something so important, you add that human face to a large firm and it makes it feel much more personal. It’s also a nice departure to have that variation from just written blog post after written blog post with the inclusion of video and info graphics.
But that leads us to one of my favorite parts of the entire experience at hok.com, and that is the hoklife.com blog. To use their words, “Over at HOK.com you will find plenty of gorgeous images showcasing our work for wonderful clients all over the world — that’s our living room, where we display our best art. On this blog we want to introduce some of the HOK people and personalities behind these projects — the group hanging out in the kitchen, where all the good conversation is.” A group hanging out in the kitchen is such a great metaphor. And while on a very top level, these posts do relate to some of the key messages at HOK, it also feels like you ae having an interesting and casual conversation with employees. Like you can really get a sense of the type of culture that exists at HOK. Posts about travel, influences, events and even fun items like showing the San Francisco Giants World Series parade that went in front of their office there just add to that relaxed feeling.
Conclusion:
All-in-all, I love just about everything they are doing. From design aesthetic, to the use of some very dynamic web technologies, to the way they spread their content and thought leadership all over the site. It all just works. In this day in age, they are a good model for how a firm can showcase themselves both visually and intellectually and have it all work pretty seamlessly.