Behind the Scenes of the New Elevated Third Site

sketch.jpg

A fresh agency website is something that is necessary, even critical, in supporting new business.

It is how we communicate that we’re on the top of our game, yet when great clients keep walking in the door it is easy to get complacent and keep coasting with what is on the domain now. After all, if it ain’t broke why do it all over again?

This is the classic agency marketing trap. To the average person it may seem obvious that an agency would make their own site top priority. It is usually the reverse. Clients always come first and we like to think they get the best ideas we have to offer. Sometimes we just don’t have a lot of gas in the tank left.

But at some point we got that itch once again to raise the bar. For us, the annual DrupalCon convention is a convenient (and immovable) goal to aim for a revised digital presence. It is always a nice way to have a date imposed upon yourself that can’t be moved. This particular revision began shortly after DrupalCon last year after a rather hasty last-minute design refresh we weren't particularly proud of.

Strategy in Brief

This time we told ourselves that we’d do things differently. We had gotten so use to cutting our own corners that we were winging the very thing that helps drive new business. So last summer we started a detailed creative brief and strategy, something we always do for clients but sadly never for ourselves.

And it worked.

As hard as it was to resist skipping steps, we forced ourselves into a slow, methodical research process over the next six months. We surveyed users, tested our current site versus competitors, did keyword research, in-depth analytics analysis and began testing marketing automation systems. This process resulted in a 25-page comprehensive content, positioning and strategic plan for the new site. It was our set of stone tablets, our commandments that would drive the process, based on a thorough understanding of our users and goals. Imagine that.

Prototyping

Through the ideation process we came up with some ideas we hadn’t seen anyone really try before, at least for a site like ours. Some of them were pretty scary. We knew we wanted to make an impression, but not one that was too-cool-for-school and alienated users. We opted for lots of small, testable prototypes to prove the concepts.

Wireframes

Hotgloo helped us with our static layouts. We really wanted to integrated different content by tying services to work examples and blog content for a really rich experience, but one that felt more like an app than a site. We also wanted to take advantage of big screen sizes. Static breakpoints gave us a general feel, but we needed more.

Reflow

We’ve been experimenting with Adobe Reflow and other adaptive prototyping tools and opted for Reflow for this project. In this example you can see how we used a quick, low-fidelity wireframe to show how the page would respond. It is a much more effective way to communicate responsive nuances than a static wireframe.

HTML Scroll Test

Here is another prototype used for live user test. We wanted to see if multiple scrolling areas was confusing to users. This prototype was built in an hour or so with basic html and image slices—just enough to get the point across. UserTesting.com allowed us to benchmark the prototype aginst other agency sites while monitoring for signs of confusion (without asking for feedback directly).

Content

While prototyping was in process, we were hard at work producing rich content for our services, work and profile pages. Although it looks small, our site constitutes around 75 pages (not including hundreds of blog posts) which no small undertaking.

Content for our services pages was written to be keyword-rich, easy to scan, and allow the pages to be used for PPC campaigns. We even went so far as to research how certain services-related terms are commonly searched for and incorporated the same phrasing into our titles, descriptions and page content.

For anyone who has ever worked on a project involving biography content from a large group of people knows it makes herding cats look easy. An internal survey allowed us to structure content about our team in a consistent and repeatable way. We had learned our lesson long ago: never to leave content to the last minute.

Design

Big and bold is our general theme, as you may have noticed. We really wanted to differentiate our website from the long-scrolling-banner trend. It has worked for a while, but it was definitely time for something new. We also have a lot of content to organize, so design elements are primarily used to draw attention to key CTAs and divide regions logically and without being overwhelming.

Overall, the design process was as minimal as possible. Page layouts in Photoshop were kept to a bare minimum and only really used to communicate contextual considerations like margins and alignment. A quick style guide helped flush out the elements that could be broken out and designed separately.

Grid

The photographic grid is an element we designed to help tell a bigger story. Rather than relying on a slideshow, we opted for a collage that gives a broader impression of a piece of work or person, rather than hoping a user would click a tiny “next” arrow.

Conclusion

The obvious moral of the story is to practice what you preach. By following our own process that has been evolving for nearly 10 years, low and behold, we put together something we can be proud of. So to all you agencies out there, don’t leave your own website to Friday afternoons (which never happen) or the summer crop of interns. Embrace it, make it a priority, and finish what you start. You might be surprised what you’re capable of if you do what you tell your clients to.