Blog

Eating your own dog food: Redesigning a modern inbound marketing agency website

Kulapartners.com screenshot

If you’ve been to our site before, you’ll likely recognize that we’ve completely redesigned the Kula Partners website. We’ve also introduced new positioning as the Conversion Optimized Inbound Marketing agency. Anyone who has engaged in a website redesign project knows it’s a huge undertaking with implications for management, marketing, sales, and many other departments and people within an organization.

The difference for an inbound agency that also focuses on website design and development is that the every aspect of the build—from content to design to coding–can all be completed in-house. Which, of course, means that everyone involved in the project is an expert in their field, leading to some fairly epic discussions about how to approach everything. It also means that there’s a huge amount of internal back-and-forth about the best way to do everything from copy to title tags to the design and typography of the site.

Most of the posts we put up on the Kula blog revolve around helping inbound marketers, HubSpot customers, and Kula Partners clients understand the state of online marketing. This post is in a similar vein, but it’s a bit more ‘inside baseball’. We want to share exactly how we approached this site redesign project, what we’ve learned, and where we’re going.

Evolving an Existing Website vs Conducting a Complete Redesign

In 2016, very few established organizations require a brand new website to be built from the ground up. Nearly everyone coming to Kula Partners (and, I suspect, most other agencies) is looking to update or evolve an existing web property.

As more and more companies have (wisely) invested heavily in content creation over time, the realization that this content has contributed greatly to their overall site rank has given many of them pause as they embark on a redesign. Additionally, sites that have been in-market for a long time tend to tread carefully when approaching a redesign.

Frequent site users dislike change—you need only look at the primarily negative feedback that every Facebook design iteration receives to understand that. Furthermore, if you look at major ecommerce players such as Tirerack.com, eBay, or Amazon, you’ll note that their interfaces tend to change very gradually versus drastic but infrequent changes. Behind the scenes, these major retailers have teams of analysts who test every interface element to see which variations improve conversions the most, and ultimately implement the winning versions based on data.

Enter Growth-Driven Design

HubSpot often advocates that a site redesign should be more evolution than revolution. In contrast to traditional several-months-long website redesign projects, HubSpot’s new Growth-Driven Design process favours making small, iterative improvements based on real usage data and data-driven decision making.

One of the first tenets of Growth-Driven Design is to reuse as much content as possible in order to stand up a new site faster, enabling you to begin immediate iteration and testing. This makes a ton of sense, and we have repurposed as much content on our site as possible; we chose to lightly edit what wasn’t broken instead of completely rewriting it. One area of content that is completely new is our positioning—more on that in a little bit.

Iterating our Interface

One of the other major principles of Growth-Driven Design is to iterate the interface design rather than implementing a complete redesign. As a visual design agency, though, we felt that our layout didn’t fully support our new positioning. We wanted to shake it up in a more fulsome fashion.

So, we actually rolled out a version of this layout for our HubSpot landing pages four months before we began designing the full site. The result was pretty solid—on our most popular asset landing page, the Executive’s Guide to Inbound Marketing, we saw a conversion lift of nearly 10%. This gave us the confidence to deploy the design more widely. Of course, now that we have a larger site in the new design, we’ll begin to run conversion optimization tests to continue to refine the performance of the site.

We’ve brought a clean Swiss modernist style to our layout with a focus on conversion, and a content experience that has been designed for readability. We’ve chosen a typeface called Acumin Pro, designed by one of my favourite type designers, Robert Slimbach. It’s familiar in its letterforms and looks gorgeous on small and large screens with a broad number of weights. We’ve also introduced a serious amount of whitespace and simplified the colour palette.

Under the Hood

Like nearly all of the sites Kula has created in the past six years, the layout is responsive with a focus on speed of rendering and performance. We know that a large chunk of our site visitors are viewing the site on mobile devices, so we’ve taken great care to ensure that the experience is as considered and enjoyable to use as the desktop version.

We’ve taken advantage of the unique interaction on touchscreens by integrating swiping behaviour on appropriate layout components, such as the testimonials on the homepage. Paying attention to the details, you’ll notice several little features that are designed to delight, such as the subtle animations on the homepage. These design features have been added using lightweight coding techniques that display as beautifully on smartphones as they do on the latest high resolution laptop display.

We’ve also taken this opportunity to implement an SSL certificate. It just makes sense to protect our site visitors, and it ensures that we avoid being called out by Google Chrome’s latest update for not being secure.

Evolving Kula’s Positioning

In similar fashion to the evolution of the site design, we wanted to maintain as much of our old content as possible. Doing so helped us accelerate the site development process and maintain our search rank, all while continuing to refine and enhance our messaging and positioning.

Kula has always had an interesting place within the HubSpot Agency Partner ecosystem. With our design and development experience, we can integrate just about any technology. Our experience with Conversion Rate Optimization (CRO) allows us to use data to evaluate how a website is functioning, and improve it over time.

If we’re being honest about it, it’s fair to say that we’ve struggled with how to articulate our offering in a sea of inbound agency sameness. In looking deeper at what we do on a day-to-day basis for our clients, we realized that where we provide the most value and deliver the highest impact is at the intersection of Inbound Marketing, Web Design and Development, and CRO.

Where these disciplines collide is where the magic happens. These are the Acceleration Points that truly move an organization’s marketing efforts forward quickly. As noted way back at the beginning of this post, we call this entire process Conversion Optimized Inbound Marketing. If you want to know more about it, have a look at our methodology page.

What’s Next?

As we begin to live with the new site, we’ll continue to eat our own dog food. We’re already running heat maps and visitor recordings using Visual Website Optimizer in the back end. Once we see how people are using the new site, we’ll begin to form a series of hypotheses and implement split tests to continue to increase conversion rates and overall site usability. Out of the gate, we’ll likely start by testing CTAs, headline copy, and offer descriptions. Look for another post at a later date about how things are going.

Making decisions based on data along the way has helped us learn from existing traffic and to test our ideas before implementing them more globally. With that said, even by following the Growth-Driven model for our site rebuild, there’s no question that it was still a relatively major overhaul and a significant undertaking.

Stepping back to better understand and articulate the true value we bring to an engagement—and painstakingly frame up that positioning—is something we often do for our clients, but rarely for ourselves. This experience has shown us how we can improve upon our processes when working with clients. In short, we’ve done everything we can to eat our own dog food, to learn from that process, and relaunch a site that will continue to evolve over time.

Drop us a tweet or an email and let us know what you think. We really appreciate hearing your feedback.

The Inbound Website Redesign Guide

This comprehensive 10,000+ word guide outlines a proven-process for developing conversion-optimized inbound marketing websites. Whether you want to improve your website’s mobile user experience, update your branding and positioning, or optimize your site for lead generation, this guide will help you put the proper plan in place to execute a successful redesign project.

Download Now

Other Posts

Good design considers the experience of the user

Coming up with ideas for web design on paper

Testing UX design assumptions with website heatmaps

Close up of a man using smartphone

Reimagine Your Manufacturing Brand Online: An Introductory Guide

tablet

Kula Partners Releases Synchrostack: the Integration Platform that Connects WooCommerce to Anything

Synchrostack Logo
Warning!

You are using an outdated browser. Things may not appear as intended. We recommend updating your browser to the latest version.

Close