The project

National Disability Services' previous site made it pretty much impossible for members to find what they needed, thanks to clunky tech and a messy Information Architecture.

NDS’s members (non-government disability service providers) range from huge to tiny, and the organisation’s services are equally varied. Access to tons of useful content, of all different sorts, is governed by complex rules about membership levels. New members had to be able to join up easily on site too.

Our mission: forge clear navigation paths that members – both old and new – could follow.

At the same time as we were weaving our magic on the site using Joomla as our Content Management System, NDS were moving to Microsoft Dynamics as its Customer Relationship Management system. Our CMS had to talk to the new, customised CRM for NDS staff to add content, so NDS had someone else developing an API. (Yep, we love an acronym.) In plain speak, different people from different organisations were working on different parts of the whole, and just as the systems had to communicate, so did the different teams. Our mission: forge a clear path for the project itself.

To give you a feel for the mind-bogglingly hugeness of this project, our Agile project management log shows that we completed 1,472 individual pieces of development work. That’s a lot.

image of old website

Results

Pages per session up 35%

35% icon

Average session time
up 39%

 icon showing 39% increase

WCAG 2.0 to AA

w3c logo

The design

We always center our design around functionality, and never more so than for NDS. We modernised the look, of course, boosted the number of images, and made the site responsive, so it works on phones and tablets.

But even more important was easy-to-understand user pathways.

Multiple menus were a must because of the complexity, so we differentiated clearly between the different levels. The most popular or current stuff also appears in large blocks on the home page. We’ve even colour coded different types of content like news, policy, info about events and training. Users may not notice straight up, but it’s a subtle way to guide them.

image of NDS new design

The Solution

image of NDS new website

First up: working out how we were going to work. Agile was the obvious choice, because we needed to be flexible – agile even – in our approach with priorities changing fast.

Agile meant the client had input and we found that getting constant feedback through showcase meetings meant we got things right early on.

Sorting out the IA was a big part of the project. Members needed to find content by following pathways and also through searches.

We introduced tagging, working closely with NDS to figure out how many tags there should be, and what they should be. This was a big deal, what with 765 pieces of content being tagged.

Given the client, following WCAG guidelines was a must. We built to WCAG 2.0 Level AA, keeping WCAG in mind for both design and development. This meant extra coding, but thankfully this is the kind of challenge our developers love.

image of NDS new responsive websiteimage of nds new responsive websiteimage of nds new  responsive website
image of NDS new responsive website

Testing was such a big part of the development that, inspired by Extreme Programming, we started calling our approach Extreme Testing. We tested super regularly, to cut down potential time lag, and as soon as the tester found a bug, the developer fixed it. Programmer and tester often sat side by side, making sure that everything worked.

As always, we gave power to the client. On tagging, for example, they can add new tags to the CRM and we’ve set things up so the tags automatically go into Joomla and populate the menus. Just as we cleared a path for the user, we cleared a path for NDS so they can take charge.

image of php file

Tech talk

Complexity reared its head here too, so simplicity and clarity were key. We reckon the site itself and the coding it required are up there with bank sites.

We also had to make sure we didn’t lose people while they were waiting for the CRM to sort through all that data. We spent a lot of time on performance optimisation to get complex pages to load quickly.

WCAG threw up extra challenges, especially in a responsive environment and with the site needing to work on all browsers, including IE7. All this means our developers had to write more code. 45,000 lines all up. And with all that extra code we used a PHP Mess Detector as a quality controller to tell us if the code wasn’t of high enough quality, or it was too complex, either N-Path complexity or Cyclomatic complexity. We were after simplicity – not just for elegance but because it makes the code more maintainable and easy to change. Simplicity in a complex environment actually takes more time and effort. But it’s so worth it.

You’ve reached the end of the maze

Click image for next case study