Skip to content

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:

Help-Word

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:

helpdoc

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:

Help-Centre-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.

Help-Centre-V2

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.

 

Read more about Technology

 

3 comments

Jeremy Shipman
15 January 2010 #

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
16 June 2012 #

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

David Lundgren
4 September 2012 #

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

Add your comment





We welcome all feedback but prefer a real name and email address.