User interacting with gold iPhone

Effective Thinking

Agency Websites, Cobbler’s Shoes

A wise man once said, “Agency website redesigns are the cobbler’s shoes.” That wise man is a co-worker, Ryan Casey, whom I believe was referencing John Heywood’s Proverbes Part i. Chapter xi., published in 1546: “But who is wurs shod, than the shoemakers wyfe, With shops full of newe shapen shoes all hir lyfe?”

Pair of Shoes van Gough 1886

The point being, agencies that create websites for clients often don’t do such a good job on their own site. Ask why this happens and you’re likely to hear some recurring issues:

“We’re too close to our own brand.”
“Billable work always takes priority over an ‘internal project’ like this one.”
“We had too many cooks in the kitchen.”

We soft-launched our new website earlier this month. We have yet to implement the full experience we’ve designed for the site, or to begin A/B testing, but are quite happy with the response thus far. Given that, I thought it could be helpful to describe how we sought to overcome the issues that often plague agencies when creating their own website.

Addressing the ‘we’re too close to our own brand’ issue                                     .

We dismissed this notion and sought to get closer to our brand than anyone ever had, doing quite a bit of research and strategic planning before beginning the design effort.

Through our research we knew that a prospect coming to an agency website really wants to know the answer to this question:

“What’s the agency’s story in our space?” 

Yet looking at the way case studies are presented on other agency websites, we could see that a prospect would need to spend considerable effort to construct an answer to this basic question.

Our strategy: Make this question easy to answer … which proved to be quite difficult.

1. We segmented our list of 135 clients into 16 verticals, and then analyzed and sized those verticals to determine how to prioritize them.

2. We dove into the work we did for each client, in every vertical, to get at the best story to tell about our work in each space. We’ve been in business for 10 years, so we had hundreds of projects to explore. It wasn’t easy, but it was satisfying to emerge with each story.

3. Through our research it became clear that so much of the work we do, across industries, is focused on enabling the mobile workforce, improving enterprise applications, and enhancing data visualization and reporting capabilities. So, in addition to creating portfolio stories specific to a number of industries, we also created stories for each of these overarching categories.

4. We then gathered or produced the most fitting related images and content to accompany each industry/category-level story. We’re still working on this. You can see our progress by exploring the pages of our portfolio.

5. Our UX design team created the initial information architecture for the site, keeping in mind the importance of making our portfolio stories easy to find and explore.

new-site-architecture

In reality, the five-step approach outlined above was less linear than it appears, with a number of activities occurring in parallel. As our business grows, we will repeat this process to continually evolve and enhance our site.

I won’t go into detail on all the other research and strategy work we undertook in getting closer to our brand, but will briefly mention a few key activities. On the research side, we reviewed existing site research, user feedback, and SEO recommendations, while also conducting competitive research on messaging and content. On the strategy side, we documented the differentiating aspects of our brand, using this as reference material to ensure we were ingraining these elements into our design and copy.

Keeping an ‘internal project’ high priority

                    .

I think we can all recognize that creating a new website for your agency isn’t actually an ‘internal project.’ When you think about the number of clients, prospects, job seekers, analysts and members of the press who will visit your site, and why, you realize it’s one of the most important external projects you could undertake.

And when you think about the potential benefits a new site could bring to your brand and your business, you realize it’s too expensive not to make it a priority, e.g.:

  • A better understanding of who you are, what you do, how you do it … and why
  • Greater site traffic
  • More incoming leads
  • Better clients and projects
  • Improved service quality
  • Greater success with recruiting
  • More referrals and favorable social sharing

It’s easy, but dangerous, to confuse ‘high priority’ with ‘high urgency.’ Everyone in our company really wanted a new site as soon as possible, so the temptation to shortcut the design process was strong. But shortcuts often cause you to get lost and go in the wrong direction. Early on in the project, we made a pact to prioritize quality and respect for the design process over the sense of urgency we all felt.

When the first round of visual homepage comps didn’t quite capture what we were hoping for, we all were of the mindset that we should explore new approaches even if that pushed out our schedule. In fact, we opted to put the project in reverse, and go back to constructing moodboards. A few weeks earlier, for the sake of expediency, we had flown through an accelerated, somewhat informal moodboarding process based on a pair of Pinterest boards. This time, however, we opted to follow our more time-tested approach, just as we would for our clients.

The design team produced quite a few moodboards in order to center in on the right aesthetic. This one was our baseline – a reflection of our visual brand at the onset of the project.

baseline-mood-board

I wanted “bold thinking,” so I asked our team to investigate an aesthetic that was beginning to gain prevalence, typified by aqua, magenta and a zest for life. The results scared me, but I appreciated their willingness to explore.

bold-mood-board

After reaching the outer edge of our exploration, we began to dial it back.

new-site-moodboards

And then we locked in on a moodboard we called “Respite.”

respite-moodboard

Once we locked in on our aesthetic, we then moved back into visual comps, exploring options that aligned with the selected moodboard. The design we arrived at for launch takes its influence from both comps below.

new-site-comp1   new-site-comp-2

We solidified our visual design direction in late-September of last year. Beginning in October, we started designing site-wide wireframes, producing original photography, and crafting layouts for key parts of the site. In parallel we started the in-browser prototyping and development effort (HTML5, CSS3, JavaScript, Sass, PHP, Apache, SQL, WordPress, Bower and jQuery). Five months later our new, fully-responsive site went live.

effectiveui-new-site

Overcoming the ‘too many cooks’ phenomenon

             .

It’s easy for a website redesign to turn into a company-wide project. When that happens it can drag on for years, with an end-result that no one loves. To avoid that fate we kept the core team limited to five people, ensuring that each of us had a complementary, hands-on role to play with minimal redundancy. We didn’t, for instance, all sit down to write copy together; instead, just one of us wrote all the site copy.

With the blessing of our leadership team, we operated with a high degree of autonomy so we could remain focused and make decisions quickly. Our fellow employees put their trust in us to deliver, and several lent a helping hand on specific tasks in their downtime. We greatly appreciated their support, and welcomed everyone’s patience along the way.

For all those who have found that their own site falls short of the work they do for their clients, I hope our experience in addressing the issues outlined above proves helpful. If you’d like to learn more about our design direction and implementation, check out these blog posts from my co-workers Tim Wood and Noah Dempewolf:

Articulating Design: effectiveui.com

The Hidden Value of In-Browser Prototyping