How we redesigned our marketing site to focus on solutions, not features

After months of work, we recently introduced an entirely new marketing site at GoSquared.

Thousands of people see the GoSquared website every day. Our hope is that an ever growing portion of those people sign up for a trial of our service, and ultimately go on to become customers of ours. That’s how we make our business work.

The new marketing site has been a project involving our best thinking in business, design and engineering.

We hope sharing the process will enable you to also produce a better marketing site for your business.

Let’s dive in!

Making GoSquared as simple as ABCD

Until now, we have always focused primarily on our products in our marketing. We’ve highlighted their different features and explained what they do. This has been great for a more technical audience who can figure out for themselves what they can do with every feature.

But our audience is growing, and we’re attracting more and more people who need more help with articulating what GoSquared can do. We needed to be explaining how GoSquared helps you.

Jobs to be done

We turned to the work of Clay Christensen to help form a better understanding of how GoSquared helps our customers. It’s important to understand the personas of the people using the product, but we wanted to know more about why they use the product. What motivates people to use us instead of anyone else?

We spent months talking to customers, forming ideas, questioning our assumptions, and trying to figure out the key reasons people use the existing GoSquared product, and how we fit into their lives. We started zoning in on a handful of key high-level “jobs” that people use us for, and eventually got to:

• Acquire – turn more visitors into leads that can then be passed onto sales.
• Build – gain a better understanding of product usage to inform product decisions.
• Close – win more sales deals by interacting with prospects personally.
• Delight – give dramatically better support by understanding the customers you’re talking to.

We found each of these high level job categories conveniently lent itself neatly to an overarching role within a company:

• Acquire – for marketing teams.
• Build – for product teams.
• Close – for sales teams.
• Delight – for customer service teams.

Also, frankly “ABCD” is a lot more catchy than anything else we came up with.

Importantly, the ABCD strategy has become far more than just a few pages on our marketing site. It’s become the mantra we keep repeating to ourselves to align the team on making the product as valuable as it can possibly be to our customers.

Now, before we build anything, or work on any page, we start with ABCD and use it as our frame for how every line of code, and every pixel, is going to help add value.

Going with the flow

Before diving into redesigning every page of the site, we looked at our different “jobs” and their associated company roles. We wanted to understand how visitors were arriving at the site, and what their ultimate intentions were.

For example, product managers have very different intentions from sales people – they likely hang out in different circles, read different blogs, work in different offices, and have very different perspectives on what makes a compelling piece of software.

Before we could design a website that had a chance of converting visitors into happy, paying customers, we’d need to figure out what each of our audiences were looking for.

Introducing personality

GoSquared is all about helping you understand your users and customers better. A lot of tools focus on data and numbers, but we’ve always been very focused on reminding you that your customers are real people. So we wanted the new site to emphasis this point.

We’ve introduced a series of characters that we’ll be getting to know better over the coming months. Some are excited, some are confused, but ultimately they all end up happy and delighted thanks to interacting with the GoSquared platform.

The new faces don’t all have names yet, so please send in suggestions now!

Reduce, reuse, recycle

We took the opportunity of introducing a series of new pages to remove a few older, less relevant ones.

It’s always challenging removing existing pages on a website – how should we redirect visitors who might still try to head to those pages? Is there any content on those old pages that we still think is valuable? How will the sitemap look without those pages? What do we gain from removing those pages?

It’s always a balancing act, but we always try to prune the site whenever we can. Fewer pages means fewer moving parts, which means fewer things to manage, which ultimately means fewer things that can break. Fewer broken things is usually optimal.

The issue with old, out-of-date pages on the site is they still impact visitor’s impressions of us. When we have as little as 15 seconds to convince someone we’re worth taking a look at, we need to have a very carefully crafted message. We can’t bombard the visitor with 500 different messages and hope one will stick. We have to focus on fewer, but more meaningful messages.

In terms of existing links from external websites, we’ve tried to redirect visitors heading to these over to our support documentation that can help get questions answered faster. The support site also has a search bar, making it easy to jump to other pages if that first page wasn’t ideal.

Responsive design across devices

The previous marketing site had one responsive breakpoint – you were either on our “desktop” site, or you were on our “mobile” site.

The experience of the site on devices that sat awkwardly between these two sizes was poor – if you were looking at the site on an iPad in portrait orientation, or on a ridiculously huge phone like the iPhone 6 Plus, then it was challenging to navigate around the site.

Many pages – pages where we’re trying to show you that we care about the customer experience deeply – consisted of layouts that didn’t flow well on a multitude of devices that weren’t quite desktop and weren’t quite mobile.

So we added a new breakpoint to ensure a less abrupt jump in layout as you move from small phones up to huge desktop screens.

Pages where you can see the new breakpoint in action include our new homepage, and our new fluid plans and pricing page.

User testing

If you haven’t used UserTesting.com then you’re hiding from the truth.

To clarify, we’re not on any commission to sing the praises of UsertTesting.com – there are plenty of other services out there to experiment with user testing too. But it’s what we have been using for a while, and we’re addicted.

Anyone who’s done user testing before will tell you “do more user testing!”, but it takes some courage to finally pluck up and make the jump.

The reality is that doing your first user test is easy. It’s really easy. The results might not be as easy to swallow, but actually starting and setting your first user test is a trivial process.

Here’s what you need to do:

1. Pick a tool, like UserTesting.com
2. Sign up.
3. Ensure your website is in a testable state (publicly accessible from a URL of some sort).
4. Use some of their built-in questions and tests.
5. Hand over $50.
6. Watch and learn.
7. Cry, wipe up those tears, and get fixing.
8. Rinse and repeat.

Once you’ve done it, you won’t be able to hold yourself back from running another test.

In addition to UserTesting.com, we’ve also been carrying out user testing at our office in London – inviting people in, running through the tasks in person, and getting the team to watch a live screen capture of the session in another room. Running our own user tests has many other benefits over UserTesting.com, but it requires significantly more time and effort to organise and run.

Next steps

Testing different homepage designs and copy

A few questions we have:

• Would a screenshot of the product meaningfully improve people’s understanding of what we do?
• Would a series of quotes from successful customers persuade people to sign up on their first session?
• Should the homepage focus on pushing you to one of our “ABCD” pages, or should it provide more information to encourage you to signup from the first pageview?
• How much impact would a video have on conversion? What should we put in the video to convince visitors to sign up?

Pricing page experiments

We’ve made many improvements to our plans and pricing page based on feedback we’ve received into our support channels, and through user testing observations.

Pricing is an extensive topic, and a thousand blog posts of a thousand words each could never fully cover this hybrid of art and science. We won’t dive into our product pricing in too much detail for now, but what is worth focusing on in this piece is the changes we’ve made to how we visually show you the plans and pricing of GoSquared.

One of the key concepts to communicate to customers is that we have a sliding scale – we don’t currently have multiple “tiers” of pricing that jump up suddenly. However, our previous pricing page caused many potential customers to make this assumption, and likely drove away considerable amounts of business. Our new pricing page shows a slider that you can drag up and down to find the level that matches your usage closely, and instantly updates the price tag at the side.

We’ve put considerable effort into making the sliders and overall pricing page slick on mobile devices with touch input. We’ve seen a higher-than-expected number of visitors check out our pricing while on a mobile device, and it’s an area we previously overlooked on anything other than desktop sized screens.

Extending themes into the product

Marketing isn’t confined to our public website. Marketing is everything we do – from the moment you first see GoSquared to when you’re a happy paying customer, and beyond.

In the near future, we’re going to be rolling out improvements to the core GoSquared product, and continuing our themes from the marketing site to ensure a level of consistency that brings the site and our products closer.

Particularly in the early stages of on boarding, many services seem to forget what the visitor was looking at as soon as you’re past the “join” page. We want to make you feel comfortable and ensure consistency from hitting the homepage, through to the signup flow, through to installation, to payment, and carrying the themes through in our emails and other messaging.

Because of this, the new marketing site is in many ways just the starting point.

Check out the new GoSquared marketing site for yourself.