Homepage Teardown: Xero

Disclaimer: I’m a Xero user and a fan of the software. But let’s put that aside for a moment and take a closer look at their homepage. Of course, my professional opinions in this teardown are all my own. Xero is one of the giants in the accounting SaaS space. But does a great product, first-class reputation and a few billion in market capitalisation translate into a persuasive, effective homepage? Short answer: they probably wouldn’t care. But we can learn a lot from seeing what they’re doing right, and anything that might be room for improvement

First Thoughts

On landing, it feels like there’s a bit going on, quite the opposite to my experience with the Survey Monkey homepage. There’s headlines, an image, plenty of buttons, a longish menu or two… it’s all happening here, as Bill Lawry famously said on more than one occasion. Is it too much? It might be a little, but the image pulls the eyes to the headline and hero section pretty well, so the clutter may not be too distracting. More importantly, does it pass the 5-second test? I’d say yes: the “beautiful accounting software” copy in the top-left and the subheadline do enough to spell it out (either way, the benefits of a well-known brand might mean you can take a few liberties here). rt answer: they probably wouldn’t care. But we can learn a lot from seeing what they’re doing right, and anything that might be room for improvement  

Headline

Like a lot of companies, the homepage headline is more a tagline. And this one has a nice enough ring to it. It also seems likely to ring with their target audience (i.e. small businesses), since it directly calls them out. However, it doesn’t tell you what Xero is or what it does. And assuming visitors know what you do on arrival isn’t something you take for granted with catchy but unclear headlines. Fortunately, Xero aren’t leaving the headline (and readers) in the lurch: the supporting text underneath is 100% clarification. It doesn’t get much clearer than “Xero is online accounting software…”. It’s not quite value prop territory, since there’s nothing unique in here, but it does give the readers a concise summary of what Xero’s about.

Hero

As mentioned in the first thoughts, there feels like a fair bit going on when you first arrive on Xero’s homepage. Let’s go through the elements that are visible:

• Headline image
• Headline
• Supporting copy
• Two high-contrasting CTA buttons
• A “double-decker” menu bar at the very top

Personally, I don’t get the sense that the Hero’s cluttered, as it’s arranged quite nicely. But a few things that strike me with this Hero… The Image It’s even clearer that Xero wants to target small business by showing one in action. The distiller isn’t doing anything with accounting (or even money), but by showing “business in action”, it helps to reinforce the headline, which is the key message in the Hero. (Lack of a) Benefit Doing “business beautifully” is nice, but it’s not a super clear benefit. Does my accounting get done in half the time with Xero? Do I save a motza on their subscription plans? Does my business soar to new heights with their streamlined, turbocharged processes? The Hero is the perfect place to lead with your big benefit – SurveyMonkey went with “getting the answers you need” – but there’s nothing concrete here. A Video? I’m a big fan of showing the product where possible. On the surface, Xero seems to a perfect candidate for a video, so it’s a little surprising there’s none in the Hero. Two reasons why they haven’t gone this route spring to mind:

1. It’s too difficult to encapsulate the product in a single video or the risk of leading viewers to wrong conclusions is too high (plus, there are product-specific videos down the page)
2. They’ve chosen the user stories over a product demo (both videos are credibility messages, but the social proof might’ve been deemed stronger)

Interestingly enough, Xero did have a demo video just underneath the Hero mid-last year, so it’s possible Point 2 was tested and the user videos proved to be more effective.

Navigation

This is an interesting one, as there aren’t too many sites that adopt a “double decker” approach to their navigation. And that might seem a bad sign at first. A short hover over the “Features & tools” or “Why Xero” reveals sub-options. A lot of sub-options. “Half the page is blocked out by options” lots. This ain’t no simple accounting tool, yo. The myriad of options explains the search bar in the top-right: with so much content to wade through, search functionality makes sense (on a lot of smaller sites, it’s useless). It also explains putting the “Free Trial” and “Login” buttons on a separate row to the main navigation menu. It helps to reduce clutter on a menu that’s already busyish. In a nice touch, the navigation menu merges into a single line “sticky” menu as you scroll down, retaining the “Free trial” button that’s the primary CTA of the page.

CTA

On landing, you’ve got two very green and contrasting CTA buttons staring at you. It’s obvious what the primary page goal of Xero’s homepage is: signing you up for a free trial. It’s a common goal for SaaS sites, and it’s a solid move. Getting people into your software as quickly as possible:

1. Lets them see how good it is for themselves firsthand
2. Allows the business to expose the prospect to more personalised and deeper marketing (e.g. onboarding email sequences, in-app messaging)

The button copy is nice and clear. “Try Xero for free” and “Free trial” is simple but tells you what you need to know: it’s a trial, and it’s free. The only thing you might add is the trial length, but that’s a minor detail (and is stated down the page). The secondary CTA in the Hero – “Learn more” – is a great supporting choice. With a complex product type (financial software) that’s an integral part of most businesses, people often want to know more before committing. This CTA caters to those curious cats. Plus, its simple white doesn’t upstage the bright green of the primary “trial” CTA. One final note: there are more CTAs down the page, like exploring features or customer stories. I’d hazard a guess that, just like the secondary CTA, Xero are happy for people to browse and discover more about their product, rather than trying to do the “1 page close”. While it’s just a theory, it’s a smart play if it’s the case.

Credibility

You can make all the claims you want on your homepage. But if you answer the “so what?” question in visitors’ minds, then fail to satisfy the “prove it!” that’s sure to follow, you’re not much closer to converting than when they first landed. So it’s interesting that the first thing after the Hero is a strong statement of social proof: “Over 1 million subscribers love Xero”. Two videos of happy users follow, with a button allowing people to see more stories (and there’s a lot, lot more). If the homepage message hierarchy is anything to go by, establishing credibility is a priority. And while the homepage isn’t peppered with proof elements after the strong top-of-page, it does finish with a final flourish. Twin 5-star ratings, one from an agency and the other a respected reviewer in all things Mac help give the page a final credibility “kick”.

Other

A few other things caught my practiced eye as it perused Xero’s homepage… Feature breakdown: The “Popular features that will change your life” headline is a big claim! It kinda feels out of place, as the rest of the copy on the page is more under-stated — especially the features immediately below, where the copy’s very matter-of-fact. Pricing plans: A few observations…

1. Sometimes it makes sense to show the prices and sometimes not. Xero have no problem showing them up-front. (and have done so for a while, according to the Wayback machine)
2. There’s the usual “Most Popular” highlight on the middle-tier plan, which helps guide user buying decisions.
3. The plan names themselves are reasonably unimaginative, though clear enough. Starter implies a limited version (and it is), but I have no idea what the “5” in the “Premium 5” plan is supposed to mean (while explained on the pricing page, it’s still initially cryptic).

Sign up: The supporting copy that clarifies the trial conditions is a nice touch (needing a credit card for a trial is a classic objection users have with SaaS), though the phone number field is not mandatory, so I’m curious why it’s even there.

Final Thoughts

Similar to SurveyMonkey, Xero’s proof elements are the strongest parts of the page. However, unlike SurveyMonkey, Xero’s homepage feels more like a “classical” SaaS page…

• It contains the feature break-down found on many other SaaS sites
• The pricing table’s prominently displayed on the homepage
• The sign up form is also on the homepage

Plus, the page isn’t too long, or over-loaded with copy and doesn’t try to introduce too many ideas beyond its product and the claim of being a business favourite. Clearly, whatever Xero’s doing is working, and their website homepage appears to be a solid part to their marketing.   Image source: Deposit Photos   Want a better idea of what makes a successful homepage tick? You can download a free checklist and guide that breaks that down for you right here.