Building Help Center

Catherine, Head of the Orange Help Team, has been telling me recently about all the people that have commented on our new Help Center and enquiring as to how it was built. That being the case I thought I would give an overview of the history of the Xero Help Center and how we got to this point. It should be noted that the reason Help Center is cool is not the technology or the new look and feel – it’s the content. Half the problem with the old system was that it hid all that goodness from you – and now it’s far more accessible which is why it’s better. But on with the history lesson …When Catherine first started at Xero we had grand designs for the help being delivered over different formats (print, pdf, html etc). Therefore we decided to write everything in the then brand new Microsoft Office 2007 and publish that to the formats we wanted to support:


That worked pretty well – Catherine would write the help in Word 2007 with an eye to webifying the documents (lots of styles, bookmarks etc) and we wrote a Word 2007 plugin that would publish it to our production environment. To begin with all the help was delivered via the “Show Help for This Page” link (which I hope all our customers are familiar with). No index – no contents – just the static page. We also gave them the option of downloading the full help, and as you can see from the picture below we even printed it out:


Unfortunately the benefits providing the full user guide was also it’s biggest problem – it kept getting out of date! Our mantra of release-early release-often meant we were constantly updating the help (both adding new pages and updating existing pages). We realized pretty quickly we were building up a knowledge base second-to-none that needed some kind of the harness to deliver content in a more structured way, but still allowed the help to be updated regularly. Welcome to Help Center V1:


Now the help could be accessed from within the Xero app and also searched and browsed as you would any web site.

When we dropped the idea of different formats we decided to move to a complete HTML-based help. Catherine stopped writing it all in Word and started hand-coding everything using Dreamweaver. That gave us a wysiwyg editor for simplicity and the ability to go and fiddle with the raw code if we needed too. Also by using simple files we were able to incorporate our documentation directly into our Subversion source control system which gave us version control and also branching capabilities (allowing us to work on multiple versions of the help for the many different releases we have in development at any one time).

When we moved to Help Center V1 there was a big push to incorporate a search. We chose Google Custom Search as it allowed us to do something quickly but also leverage Google’s search algorithms to deliver better quality searches. Unfortunately Custom Search never really worked perfectly for us – it was difficult to get the right kind of Google-juice for certain pages so often the right page was buried deep within the search results. My advice would be to stay away from Custom Search if you want complete control but for small websites or forums I think it’s great.

So now we come to the latest version. In actual fact this was a proof of concept done over the Christmas holidays (I do love my JavaScript) that turned into a real project once the documentation team got their hands on it. From their point-of-view the real driver behind it was to surface as much of the great help content as we could so that our customers had the best chance of finding what they need. Therefore a redesign around providing more clarity on our help structure was required, and a new search engine needed to be built – one that could allow us to mix different content types and really control what was being returned.


As suggested in my last post the user interface for the new Help Center is built entirely in ExtJS sitting over an ASP.NET MVC web site and a SQL Server 2005 database. The web site acts as a service-oriented API passing JSON data structures back and forth – ASP.NET MVC is very cool and is great for this style of web application. The search is handled in the SQL Server database using SQL Server’s full text engine: we wrote a custom lexicon parser to break down the search text and turn it into a query that SQL Server could understand and incorporate a mixture of different search approaches to deliver the most relevant searches at the top but still provide even remotely relevant results just in case (similar to the way Google search works). Even though all the content is hand-coded in pure HTML (we didn’t want to change the way our documentation team worked) each page is pre-processed into the database for each region we want to deliver help too, allowing us to automatically localize the content and better track individual pages.

Speaking of tracking: it’s interesting to note that we hooked everything into Google Analytics for tracking usage patterns. Even though the site doesn’t really have “pages”, we’ve hooked into the Ext.Ajax request to mimic the tracking of pages and searches directly into Analytics. I’m also using Analytics new Event Tracking system to track videos, external clicks and to track searches run from within the Xero app itself (so we know what you guys are searching for and whether it’s actually helping!). One thing we’ve learned at Xero: you can’t understand how people are using your software without evidence of how they’re actually using your software. Numbers count!

Anyway, there’s still a lot to do but I think it’s working pretty well. Soon we’re going to be incorporating more social media aspects into Help Center – creating a community around the content we already have and providing a vessel for everyone in our ecosystem to contribute. In the meantime we’ve definitely had some positive feedback but any feedback is greatly appreciated – so please have a look and let us know what you think and what we can improve on.


Jeremy Shipman
January 15, 2010 at 3:11 pm

I was really hoping this was some 3rd-party tool that had been added to xero, which I could also use for my own sites. Oh well.

Thanks for sharing the history of the xero help center. :-)

Mike Block CPA
June 16, 2012 at 2:39 am

This was very impressive. I now see why the former Intuit website leader would be very good for you.

David Lundgren
September 4, 2012 at 1:14 am

Same comment as Jeremy above. You have the best looking Help center I’ve ever seen.

October 2, 2014 at 11:52 am

Jeremy & David,
have a look at Help IQ ( Looking under the hood, there are similarities in the code that suggest to me that one is based on the other. Are you able to enlighten us Xero?

October 2, 2014 at 6:19 pm

Jeremy & David, Manula, Help GIzmo or Help IQ may be good options for you to try. I suspect one of these is based on the Xero Help Center code (or vise versa).

Craig Walker Xero
October 3, 2014 at 2:26 am

@Stretch Interesting that HelpIQ is built using similar technologies. Maybe they were influenced by us? (I’d like to think so but I’m guessing it’s a complete coincidence). Note that HelpIQ started a couple of years after Help Center was built. And as far as the Xero Help Center is concerned I built that complete custom from the ground up.

Martin T
January 8, 2015 at 7:37 pm

Xero, please bring back the multi-pane design where the TOC is separate to the content.

As a Xero user I find the single page design used in the new look Help Centre is a major step backwards from what was the best designed help site on the web.

Craig Walker Xero
January 10, 2015 at 6:22 am

@Martin Thank you! I’ll take that compliment (even though I built the new one as well…)

What was it specifically you liked? The tabs across the top?

There were 3 big reasons for the change (I should probably do a blog post about it actually):

1. It was starting to look dated and needed a freshen up.
2. Because it was a single-page application it didn’t work so well with search engines. For lots of our users Google is a natural starting place when asking a question. The old help center just wasn’t conducive to search engine optimization.
3. It didn’t work on a mobile. When I originally built it, responsive web design, or even building for mobile or especially touch, just wasn’t something that was front of mind. It now has to be. While mobile isn’t a main use case, it had to at least work on mobile – and the old site basically didn’t. The new site is completely responsive and works great on mobile, tablet or desktop.

So there were good reasons behind why I wanted to rebuild it.

However I want to make it the best experience it can be for everyone. So let me know what worked best for you in the old app and we’ll try to figure out how to bring that experience across to the new one.

Thanks for the feedback!

Leave a Reply

Your email address will not be published. Required fields are marked *