The two great challenges of your agency site: Branding & the portfolio

Paul Boag

I am excited to announce the latest versions of both the Headscape and Boagworld sites. In this post I share some of the reasons behind the changes and why we felt they were needed.

Whether you are a freelancer or run an agency, one of the most painful things we have to do is design our own website. We procrastinate, nit pick and never quite get around to finishing it.

The most painful parts of what is a horrendous process, is the creation of your brand identity and portfolio. At least that was the case for the redesign you are seeing now.

In this post I want to share our experience of creating this site and provide you with some inspiration along the way. At the least I should show that you are not alone in struggling with your own website.

Let’s begin by looking at the complete mess my company had got into over branding.

A branding disaster

To understand quite how bad a mess we had got ourselves into I need to provide a bit of background. In 2002 myself and two others founded our agency Headscape. Four years later I took to blogging on my personal site Boagworld. My personal blog contained a mixture of content, but it focused on me sharing what I had learnt about web design. Within a few months of starting the blog I began experimenting with podcasting and the Boagworld Show was born.

Fast forward a few years and my mistake was obvious. Boagworld had become somewhat of a success and turned into a known brand. It was attracting a lot readers and listeners who would be perfect clients for Headscape. Boagworld had turned into the perfect marketing tool. Unfortunately most of my readers had never heard of Headscape! They only knew about Boagworld. They were under the impression that I worked as a freelancer. They had no idea I had a big team behind me.

The brand identity I had created for Boagworld came from the podcast. It was fun, playful and friendly. This was perfect for the podcast, but didn’t reflect the kind of high value corporate work we did at Headscape. Most of our clients are large public or commercial bodies who expect a certain level of professionalism.

What we needed was a single unified, professional brand. But, getting there would not be easy.

Sorting out the branding mess

We considered everything. Maybe we should dump the Headscape brand and build the company around Boagworld. Unfortunately that would focus our offering on me. Not to mention that Headscape had become well respected in certain circles.

We experimented with making both websites look the same. But this lead to people emailing me pointing out that Headscape had ‘ripped off my design’.

Unifying the design did little to encourage traffic between the two sites.
Unifying the design did little to encourage traffic between the two sites.

I tried referencing Headscape more on Boagworld. But whatever I did we weren’t seeing much traffic move between the two sites.

We even considered dropping the Boagworld brand and redirecting it to a ‘Headscape’ blog. Unfortunately that would have had a huge impact on the SEO juice I had. It was also sure to alienate my loyal readers.

In the end we have decided to combine the two sites through a single navigational structure. You can still visit either a Headscape or Boagworld homepage, but will see a single ‘dual branded’ site beyond that.

We merged the two sites by creating a dual branded navigation.
We merged the two sites by creating a dual branded navigation.

On the Headscape homepage, boagworld posts appear alongside case studies. While on Boagworld a consistent header and footer leaves the user with no doubt this is a Headscape blog.

Boagworld maintained its own homepage but reinforced its relationship with Headscape.
Boagworld maintained its own homepage but reinforced its relationship with Headscape.

The navigation also makes it clear which brand covers what aspects of the business. For example the podcast and blog appear under the Boagworld logo. Our services and people appear under Headscape.

As well as bringing the two sites closer together, the redesign provided us with an opportunity to address the styling. We could jettison much of the playfulness that was inappropriate for the Headscape audience. We also created a much more readable experience for the Boagworld blog.

This then left us with our other major challenge. Creating a portfolio that worked for the modern web.

The portfolio challenge

We were unhappy with our portfolio pages. I think most web designers are.

The problem with portfolio pages is that they struggle with competing requirements.

You want to communicate the depth of your work. But posting anything more in-depth than a screenshot and a few sentences can become work intensive.

Users want to see pretty pictures. But modern websites are so rich and interactive that you cannot hope to show them at their best with a screenshot. A screenshot cannot show how a website will respond on different devices.

We further complicated things because I wanted to create case studies that could work as blog posts for Boagworld. That meant they couldn’t read too much like traditional case studies designed to sell.

In short the portfolio page was a delicate balancing act.

Our portfolio solution

We solved one problem with a simple revelation — not all case studies had to be the same. We knew that providing a detailed case study for each one was impractical. We just didn’t have the time. So we decided to establish the least we would do for each case study. This consisted of…

  • A visual of the project (more on that in a moment).
  • A paragraph about the project.
  • A link to the live site.
  • An outline of what exactly we did for them.

But there was nothing stopping us going beyond this basic case study. Others could be more in-depth. They could include longer articles focusing on a particular aspect of the project or even a video tour. These would then make great content for the boagworld blog. This would further reinforce the blogs relationship with Headscape.

Where things got interesting was in how we wanted to show users our work. We wanted to show how these sites responded to different devices and allow the user to see any interactive elements on the site.

It was a tall order, but Ed Merritt and Dan Sheerman came up with an elegant solution you can see in action on our site. They embedded the case study site on a case study using an iframe and then used css transforms to scale it down in size.

Our new interactive portfolio allows the user to navigate the site and get a sense of what it would be like on different devices.

With the basic site now embedded in the page they used javascript to rotate and resize the iframe when a user clicks various icons. For example by clicking a mobile icon the iframe will resize down and restyle to look like a mobile device. Clicking the desktop icon will increase the size of the iframe and wrap it with a desktop style.

Because the iframe contains the live site, resizing the window forces it to adapt. This allows the user to see what the site looks like on different devices and still interact with the site as you would normally.

[icegram messages=”21585″]

Some inspiration

I realise this post doesn’t expound some amazing new technique or provide a how to guide. But, I hope I have encouraged you. Maybe you now feel less alone in struggling with your own site. Maybe you feel inspired to have another go.

At the least I have shown you different approach to portfolio pages and highlighted the complexity of branding.