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

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.

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.

  • Love the new design Paul! The Interactive Portfolio is very cool.

    • Thank you so much. Ed Merritt and Dan Sheerman worked incredibly hard on that feature and it really looks great.

  • CyndyMcC

    The site is great, and I love the work Ed and Dan did – really beautiful.

    • Thanks Cyndy. We look like grown up professionals now. Nobody will ever know the truth :)

  • thefairystamp

    Wow! I love it! Its nothing like Id expected it. So decent, very editoral-ish. Great Job!

    • Yeah we decided it was time to go a bit more grown up. Our clients are large corporates so we felt we had to be more professional.

  • Benjamin Milde

    I love the style of the new layout. The navigations is a great solution to merging your sites. The only thing that bugs me, is the size of everything. I just zoomed the page out an found it much more harmonious. While being on a 27″ imac gives you the choice to use the space, I found that everything looks a little to big. But it’s great reading your thoughts, as I’m in that “you need a new portfolio”-phase right now, after finishing college.

    • Thanks for the thoughts Benjamin. I felt the same to begin with looking at the site on a 27” mac. However, the more I thought about it the more I became convinced that Ed and Dan (who produced the site) were right. Essentially the typography and layout adjust to the available space. You can always scale the browser down or resize the fonts. It is consistent with the fluid nature of the web.

      • Benjamin Milde

        While writing my comment I already thought about that and saw the smaller typo for smaller sizes. That’s why I’ve included the part about on which screen I’m viewing the site. Sadly the comments section here can’t be styled as well as the rest of the site. It’s one of few sites, where I actually love to participate in the comments, instead of just glancing over them.

        • Yeah I have neglected comments for too long. I really want to try and build up the community again on this blog. Get people actively participating again.

  • I love the redesign, although it feels like very recently you were going through the whole public process of redesigning from the original blog, and even then it seemed to be in a constant state of redesign.

    I think the idea of embedding a live site in a case study is inspired, and you’ve pulled it off brilliantly. Nice job.

    • Wow. That was several years ago now. Its amazing how fast time goes :)

  • Alex

    Thanks for sharing so freely and frankly your design process and the thinking behind it! Because it means to admit to the world that not everything works out perfect and fine right from the start – sometimes you have to give it the time to flourish and have to make your experiences. I know not a single agency website or Blog over here in Germany which would discuss those things so openly and frankly like you do. When you read agency sites here, everything ist always perfect, shiny and “we are the best and the most professional guys anyway”! – Urrgh!
    So reading and following your Blog and Podcast gave me a lot of enlightening moments over the years and very interesting and inspiring insights. Keep on like that!

    • Wow that is so nice of you to say Alex. To be honest I don’t think I could be any other way! I am not very good at pretending to be perfect. Far too much like hard work :)