User Handbook - Help Center UX
Start date: August 2014
Client: SWIFT
Category: UX - web development
The Brief:
SWIFT's User Handbook is based on a collection of over 700 published print manuals. The content of these books is currently available in the support section of the website in various forms: xml files, pdf or other downloadable files. The search for the right information is tedious for new user, and the actual search process needs to be 'learnt' to find the right information quicker. Most users that have trouble with the online documentation, depend on downloading PDF files of the documentation to search for the right information. But this is not ideal when you want to make sure the user has access to all the latest updates.
So SWIFT team approached me to take a look at their existing documentation search tool, to diagnose where the issues are, and suggest a UI (no design at this stage) to make their documentation more useable and accessible. This would also help them define what the users really needed, so that if they encountered a ready-made solution they could use, they could easily evaluate the product by comparing it with my proposal.
A swift search to the right answer.
Step one: UX Heuristic Analysis
I first started out looking at the current situation of the online User Handbook. I diagnosed all the issues/bugs I encountered that hinder the user from properly understanding and using the tool. I classified the issues depending on how they would impact and frustrate the user. This allowed the team to know what was urgent to fix.
Step two: Wireframes
I then started creating a wireframe of an alternative UI for the User Handbook, that I called Help Center. The Help Center needed to have a clear and easy navigation and search system, to be more intuitive (no need to 'learn' how to use it any more), and make the user prefer using the online Help Center.
User interviews and testing
At different stages of the project, I conducted user interviews and tests.
In the first stage of the project I observed people using the current existing tool. The users would show me how they would use it, what they liked about it, what frustrated them.
During the wireframe stage (step two), I would ask some users to take a look at the different screens to see how they would react to it and get feedback. From this I was able to make adjustments, until I and the users were confident that we have reached a good compromise.
The last stage of user testing, was once the prototype was ready (step three). At this stage the users could see a simulation of the Help Center and were able to give SWIFT valuable feedback about what they liked about it and which features they thought were most useful.
Step three: Prototype
I created an HTML prototype from the wireframe I created (no design work at this stage). This was so that the team could present their vision to colleagues and customers, and show where they were heading or to get feedback. Although the prototype wasn't a real databased-driven search engine, it simulated all the different functionalities. I also presented a walk-through script that they could follow, to demonstrate all the functionalities in a minimum of time.
They were able to present, to a few key customers/users, the prototype and an existing ready-made solution they were thinking of using. They wanted to see if the existing solution was enough for their users, or if they needed to look further, or even develop it in-house if no other solution fits the bill.
