UX Teardown: What We Learned by Auditing Our User Experience

Welcome to Part 3 of the Ladder 2017 Marketing Plan series! One of the easiest ways to find new things to test (or problems to fix) is to put yourself in the mindset of your customers. In this post, we’ll manually walk through the Ladder website to find room for improvement.

Want to go back to parts 1 & 2 of our 2017 Marketing Plan? >>


As marketers, we spend a lot of time doing complex statistical analysis. But sometimes we forget there are real people making real decisions and taking real actions behind the numbers.

Oftentimes just by doing a quick teardown of your user journey or running a user test, you can diagnose a number of (in hindsight) obvious problems. Better yet, these are problems you never would have seen in the data.

Let's get started with a teardown of Ladder's own UX >>

Table of Contents:


Section 1: User Testing

Because we tend to get tunnel vision when looking at our own website, let’s see it through new eyes by running a quick user test.

User testing is a quick and easy way to sense check that you’re not missing any obvious issues with your website. The general idea behind the product is to get people to talk out loud while trying to accomplish something on your website (or within your product).

Although you can go stalk random people in coffee shops or hope you get responses on Reddit, an easier (and free) way to run a user test is to use Peek, a service by UserTesting. Peek is extremely easy to use. You put in your URL and -- usually within 24 hours -- they send you a video of a user trying out your site for the first time.

peek by usertesting

The downside of the free version is that you don’t get to choose what demographic that person is in. However, I see this as an upside; if you can make your site understandable enough that even people outside your industry know how to navigate it and get your messaging, you’re doing well.

Side note: It can be particularly tough to get feedback from people from the right demographics / customer persona. The paid version of UserTesting allows this, but another way (used by Twitch) is to seek out people using your competitors at an industry convention.

Here are the results of two Peek tests we did for Ladder; one on mobile, one on desktop.

Mobile

mobile view http://peek.usertesting.com/result/63856105717640?autoplay=true

0:42 - “This website seems to plain to me, not very informative at all.”

...wow.

This snazzy website we spent so much time on just isn’t doing it for this guy. The best thing about user testing is that it forces you to eat humble pie.

0:57 - “What is this website for... it seems like it’s for growing your business, and ways of making money.”

Ok, getting better; even if this guy isn’t a marketer or startup founder, he gets that we grow businesses and help them make more money. Score!

growing businesses * 1:48 - “Request a free demo... no.”*

Ok, ok -- I get that nobody likes sitting on sales demos. Is there a better call to action here?

2:10 - “Talk to a Ladder Strategist”

Hmm... This seem to be a better call to action; that was a much more favorable reaction.

But oh boy... our button looks awful on mobile.

cta button

That’ll need a fix.

Next step:

unfair marketing advantage

4:27 - “What stood out was them getting into the monetary aspects of you getting an unfair advantage in the marketplace”

It seems like the ‘unfair advantage’ piece is really key. Whenever a prospect parrots one of your key phrases back to you, make sure you use it widely.

4:40 - “It doesn’t seem to really stand out and really grab your attention.”

Ok, fair enough. We thought our Tron-like 70s disco graphics were enough, but back to the drawing board.

Desktop

desktop view

http://peek.usertesting.com/result/34956105253238?autoplay=true

0:33 - “My first impression is that it is for people to have their own businesses and they want to be able to grow it, and this allows them to do so, in easier format.”

target demographic

Great - they know who our target demographic is (people who own their own business) and what we can do (help them grow). Pretty good stuff just from the homepage.

0:46 - “My first impression of this website is that it’s well designed, I really do like the graphics behind it.”

Take that, previous user testing guy!

1:00 - “Even though I don’t know what ‘increase ROI across every channel’ means.”

Oh... less good. She’s not part of our demographic, but perhaps we can make this clearer (for example if we tested saying ‘marketing channel’ maybe she’d get it...

1:15 - “I feel like it says, you know, that we’re a good website because we have all these nice graphics.”

Never underestimate the power of premium design!

premium design

1:30 - “The first thing I would like to do on this page is enter my email right away”

Perfect.

One of the biggest problems we normally see with our clients is that their call to action isn’t prominent enough. It’s a real conversion killer.

Don’t be shy about making it clear what you want your visitors to do.

hubspot demo

2:00 - “and it brought me now to a book a 20 minute meeting right away, so that’s super easy.”

A good onboarding flow can actually be a source of delight.

2:15 - “I think the thing that stood out to me the most was the graphics.”

Again, this is a really common insight; good visual design really makes a big difference.

2:41 - “If anything frustrated me was that some of the language I personally didn’t understand, but if you were a growth marketer... you’d maybe be able to understand.”

Alright, so it’s not a bad note to end on. It seems like there’s still more we can do to clean up the copy and make it intelligible, but ultimately this person knows roughly what we do.

Why do we care that someone who admits she isn’t a ‘growth marketer’ knows what we do?

Well, even if she isn’t in our target user persona, she may know someone who is. We don’t necessarily reach the decision-maker on our first try. The clearer we can explain who we are, what we do, and who we do it for, the easier it will be for someone like her -- a gatekeeper to the decision-maker -- to refer us to the right person.

Word of mouth is driven by a clear value proposition.

Section 2: Conversion Journey


Now it’s time to walk through the signup process on the Ladder website. This is probably one of the highest-value ways to spot new opportunities or issues. Even experienced marketers forget to do this and waste thousands of dollars through low conversion rates as a result.

First let’s check out the homepage. We know from our analytics audit that it’s where the vast majority of ad spend and organic traffic lands.

conversion journey

There’s a lot to be happy about here. First, there’s a very clear and prominent benefit-driven value proposition above the fold:

“Grow your business without the guesswork”

It’s followed by a more technical explanation, hinting at the test-driven, full-funnel approach that we take.

First, the visuals.

The premium, unique animated background video instantly communicates that we’re a bigger deal than the average 2 guys in a garage with a hacked together static page. Because it’s costly and technically sophisticated to produce one of these animated backgrounds, it’s a hard-to-fake signal that we’re a safe bet.

This is the power of premium design.

Then we ask for an email.

This might seem too forward to most marketers, but in our experience it really does work. Users want to know what the website is for, and in this case the goal is to get someone in touch with a strategist as quickly as possible. Even if they decide to click ‘tell me more’ and scroll down, they’re primed to expect to sign up once they have enough information.

The call to action also works well.

Rather than just ‘sign up now,’ ‘contact us,’ or even ‘book a demo,’ ‘talk to a strategist’ feels a lot more human and less sales-y. You’ll be talking to someone who actually knows marketing and can help you figure out if we’re a good fit. This is much more palatable for the prospect, and it actually converts a lot better for us too!

It’s also great that it asks for a ‘business email’ rather than a personal one; we’ve seen that increase lead quality.

Next up: What happens if we actually submit an email on the main call to action?

email submit

Ok, so this is pretty cool; rather than just waiting for us to contact them, they have something to do next. They can check out our blog (a resource that we’ve seen gets people very excited to work with us) or even just click through to schedule a call themselves via our Hubspot link.

hubspot call

This instant gratification both helps increase conversion (our lead booking rate is over 50%!) and puts our prospects in a better mood when they get on the call (because we didn’t waste their time with endless back-and-forth emails).

Now of course most people will enter their email and then click the button, but our job is to try and find things that are broken.

What if we click without entering an email?

success page

Oops. That isn’t good. They don’t have to enter an email and it still fires. This will inflate our conversion numbers and will be confusing to the user.

Side note: After further investigation, we also noticed that when people do this it passes a null value. This breaks our Zapier integration, stopping our leads from getting funneled into MailChimp until we reset it.

It’s common to find issues like this, so make sure you spend some time clicking around trying to get yourself in trouble. You’re likely to find a lot of edge cases that mess with performance, inflating or deflating your numbers.

Now let’s take a look at what happens when we click ‘Access’.

free trial

This is pretty good; the website has noticed I’m not registered and has dropped me on a registration page. I can click and see pricing, so let’s do that.

pricing page

This gives us some great information; we can see the ethos behind the company and the two different products they sell. There are two really clear calls to action depending on whether you want the self-service tech offering or the full-service agency package.

What’s missing here is more information about the product.

Remember, these people randomly clicked on ‘Access’ and then clicked through to ‘Pricing.’ They have no real idea what the product looks like yet, or what it does, save these given bullet points.

And since we're not planning on pushing a full SaaS pricing model out in the near future, we're best off removing the Pricing page and trial for the moment, in favor of a free demo of the Planner.

Ok let’s see what we get when we scroll down on the page.

tech powered services

The number of tactics and the amount of marketing spend that’s flowed through our system is pretty solid. However the ‘technology perfected by people’ headline is kind of nonsensical (at least until AI becomes self-aware, ALL technology is perfected by people...).

The bubble path graphic, on the other hand, is really great - not only is it another premium, hard to replicate design element, but it has so many buzzwords that someone is bound to find the one they’re looking for. 😉

We might want to reconsider the ‘get free demo’ call to action. In previous testing we’ve seen that ‘talk to a strategist’ has been stronger, and multiple CTAs can confuse a web browser. It can also lead to inconsistencies in tracking and onboarding, as it gets more complex to tailor these elements to which button they clicked.

growth team

This case study section is pretty good, but for testimonials you usually want to see a picture of the person (it helps you trust it’s a real review) and the call to action is a little weird.

marketing strategy

I like this section, but we’re seeing even further departure from our original call to action. It may be that offering differentiated CTAs as we scroll down increases conversion. However this isn’t normal practice, so we’d want to test this and make sure it’s the case. It could also be clearer in the text that we’re talking about full funnel marketing here.

marketing testing

Ah - more premium design assets. This chart going up and to the right expands out as you scroll up. What we want to test at this stage though is whether all this is too much - it’s definitely possible to overdo it with this type of effect!

minimum viable

At this stage we’re probably leaving people kind of confused. We haven’t explained what a ‘Minimum Viable Test’ IS at this point, and these buzzwords don’t really explain it.

wrkbench

Another case study, and this time there’s a face smiling back at us. However this talks a lot about branding - which isn’t something we explicitly do. We can maybe think of a better case study here that better fits what we offer.

transparency

Huh - looks like something’s going wrong here. There’s a huge gap in the graphics as we scroll down. This kills all the good will and trust we built up with premium graphics previously.

aarrr metrics

This marketing funnel graphic is good, and psychologically it’s great that revenue is the thing that’s increasing. However visually it doesn’t make that much sense for a funnel. Maybe we should rethink this, especially as a full-funnel tech+services agency.

growth made simple

Another case study. At this point we’ve really scrolled down pretty far and I’m not sure a case study makes sense. The ‘zero to 1’ call to action is a reference to a popular startup book, but we should avoid references like that in our copy as it’s more likely to confuse people than impress them. That being said, this case study is arguably stronger than the others, so we should consider moving it up to a spot where more people scroll.

growth strategy

Gain an unfair advantage in your market - we know this resonated in the user testing we did, so we should consider showing this higher. The box effect is refreshing and different from what we’ve had above - this is a nice way to show our value propositions, but perhaps it’s too far down the page.

ladder strategist cta

Hey, we got our call to action back! It can be really effective to put the CTA out of place like this (rather than all straight down the middle) as it draws the eye. Though it’s hard to read (and therefore spot it), the number of tactics needs to be updated as we mentioned over 1,000 before. It’s really common to find copy that needs to be updated when doing audits like this.

footer section

Ok we’re at the footer. Great to see another ‘talk to a strategist’ call to action at the bottom. One mistake people consistently make is forcing users to scroll all the way back up to the top to convert - give them multiple options and you’re almost guaranteed to get more signups.

broken landing page

Oh, weird. If we scroll all the way down, we have this weird gap. It’s also pretty common to spot styling / formatting issues like this during an audit. Anything sloppy like this really can kill the trust and credibility we’ve built up, and therefore hurt conversion rate.

Playbook sounds interesting - let’s take a look at that next.

growth playbook

Great clear value proposition and call to action, just like on the main homepage. The social proof of having 630 tactics, 41 added in the past 30 days and a 23% increase in ROI on average is all great.

However, this doesn’t jive well with the messaging previous of 1,000 tactics. This is because these are the ‘public’ tactics, whereas the rest you need to sign up for; this isn’t clear from the copy on the page and just looks like we forgot to update.

It’s also not clear what you’re getting access to when you click ‘get access’. We should maybe consider a different CTA here. The arrow also looks a little off brand.

growth tactics

When we scroll down we can see a number of tactics, all pretty clear. We can also search for specific tactics or choose from Traffic, Conversion and Retention.

marketing tactic

If we click ‘learn more’ we land on a page that shows more info about the tactic, with an illustration and a call to action to ‘test’ that tactic. It’s not entirely clear what ‘test’ means and the CTA could be a lot clearer here. The branding on this page also could do with being standardized to what we see when we’re in the product (screenshot below).

power user retargeting

One thing to note, however, is that it’s smart that we put each tactic on its own page (unlike the screenshot above).

Why? Well because on its own page, it’s SEO friendly because Google can read it and people can link to it. This means we’ve got hundreds of hyper-niche long-tail terms that we’ll automatically rank on as we grow our tactic database.

Back to the Playbook. If we scroll down, we see this pop up.

sumome scroll box

This is pretty solid - a ‘weekly growth playbook’ sounds good, as does getting new tactics before anyone else. Because this is a scroll box, we’re not being too obtrusive as a popup, or blocking people from converting on the main CTA. Now let’s scroll all the way to the bottom.

bottom cta

This call to action makes a little more sense than the one at the top. It tells us what we’re getting access to, and clearly states that these tactics are just the public ones - to get more you need to sign up for our platform. Still not that much information here, so we should look to improve it.

Next, let’s look at the blog.

ladder blog

Nice minimal style, with a clear call to action at the top. Here we’re not pushing for a lead - this is asking people to sign up for updates (new blog posts). Again, we’re leaning hard on design - each blog post has its own custom graphic, giving us a distinct style and building trust.

We can also see that the call to action on the top of the page links back to the website, asking if the reader is interested in Ladder. We should reconsider this - at this stage the user might not even know who Ladder are, particularly if they came in via social or organic search.

sumome exit intent

When I moused over to the top of the browser, this ‘exit-intent’ popup was triggered. This can be a highly effective tactic, and would be one of the first things we tried if it wasn’t already present. We should definitely consider A/B testing the copy and design here.

blog post

So here’s a typical blog format for us. It looks influenced by the popular design you see on Medium, but it’s adapted enough to look unique. The large image at the top with the title at the bottom of the page tends to work well, because it reassures readers they’re on the right page (it’s likely they saw this image as a thumbnail before clicking) and prompts them to scroll down.

The social share icons are also key - it’s important that we have these because it helps us make more of the traffic we get, as it makes sharing our article easier and doesn’t take long to set up.

There’s an author byline and links to tags (which help for SEO and navigation). A large font size is also great to see - most sites make the mistake of making their blog font way too small.

weekly growth playbook

As we scroll down we see the same scroll box we saw earlier - it’s great that we’re maximizing the chances of collecting emails, and I don’t think this comes across as too intrusive.

blog cta

At the bottom of the article, we have our famed ‘talk to a strategist’ button, with some custom intro text related to the article. We also have more information on the author (me!), giving credibility to what the visitor just read. We also recommend related articles, which helps improve time on site and pages per visit.

footer call to action

Finally, one more call to action at the bottom. If they haven’t signed up by now, we can’t say we haven’t tried!

Section 3: Heatmaps & Scrollmaps


Finally, let’s confirm a few of those assumptions we make as we reviewed the homepage and see how far people actually scroll down, as well as which call to actions people actually click. We can do that with heat maps and scroll maps.

First lets look at scroll maps - for this we’re using SumoMe, but there are a number of good providers out there. This shows you where people scroll down to.

sumome scroll map

Straight away this is interesting - 0% read the full page! Additionally, only 22% scroll down past the technology page. That means that any change below this section is only going to affect a maximum of 1/5th of site visitors.

scroll map

As we scroll down further, we can see that once people DO scroll down past the technology section, they keep going. We’ve only dropped from 22% to 19% by the time we get to the full funnel section. This is a pretty interesting behavior, let’s see if it continues.

scrolling down

Ok now people are starting to drop off - we’re now down to 15% by the time we get to the wrkbench.io case study. How many do we lose from the weird gap before the funnel page?

dropoff

Ok, not so bad, we only dropped from 15% to 12% - 3 percentage points. Considering we’d expect to lose some anyway, that isn’t too bad.

Now let’s look at the Heatmaps.

heatmap

Interesting - so it looks like about 1% of the clicks on the entire page are on the ‘talk to a strategist’ button. The vast majority are clicking on that tell me more link. Weirdly we’re also seeing a bunch of clicks in the bottom left - I’m not entirely sure what this is, other than maybe people clicking the animation (that’s where it originates...).

Unfortunately we’re also getting 4x more clicks on the ‘access’ button. This isn’t great as it means a ton of people are signing up for a product they don’t actually understand yet, without talking to a strategist. This is probably one of the biggest problems to fix, as it ties into what we see in our analytics (users sign up to the product, don’t do much and never log back in).

get demo

Scrolling down, we can see that we actually get more clicks on the ‘free demo’ button than the ‘talk to a strategist’ one. This isn’t a complete fair comparison, as the first one requires an email first, but it’s still pretty interesting that enough people scroll down and click this button.

click tracking

As we scroll down, it gets less interesting - almost nobody clicks on these case studies. Looks like all the effort we put into the page behind it was wasted!

Further down, we get some clicks on the ‘free demo’ button near the bottom, but not many.

demo cta

One major conclusion we can draw here is that our page is probably too long - in any event, if we don’t convert them in the first few sections, we don’t get the chance again!


And that's it for our UX teardown - we mostly focused on our blog and homepage here, as that's where the majority of our growth is driven. However, there is room for a teardown of the Ladder Planner, the tech platform that drives our services. Look for that in a later installment!

Need someone to tear apart your UX and find issues like the ones above?

Review your user experience with a Ladder Strategist:


Up next in the Ladder 2017 Marketing Plan series: a full audit of our CRM and email campaigns. Check it out!

You may also like