Occupational Therapy New Zealand

OTNZ - homepage mockup

Website: nzaot.com (site has since been redesigned) - view screenshot

Size: 17 templates for a large website of over 550 pages at launch

My professional status: independent web designer/developer

Website client: Occupational Therapy New Zealand

Dates: July 2013 - March 2015, with ongoing support after delivery

Categories: Scoping/pitching/quoting, Client liaison, Project manager, IA & UX, Website designer, Front-end developer, Govt web standards tester, Writing for the web, CSS-based layout, CSS3, HTML5, jQuery/JavaScript, e-govt/WCAG compliance, SilverStripe, Large sites

Brief: An occupational therapist is a registered health provider who uses the theory of occupation to improve well-being and quality of life. Occupational Therapy New Zealand Whakaora Ngangahau Aotearoa is the national association representing occupational therapy professionals in New Zealand.

Their existing website was very old and tired, and needed updating. OTNZ asked us to quote for a completely new design, new HTML/CSS templates, and a new CMS. At the same time they took the opportunity to completely re-write the content for the website.

Thanks Ali and Tom [for launching the site] - already getting positive feedback.

Peter Anderson, Executive Director, Occupational Therapy New Zealand

Achievements:

  • Guided the project from start to completion through three Executive Directors, five versions of the original quote, 14 change requests and a total shut-down of the project at one point - never giving up and always having my focus clearly on the end result - the successful launch of OTNZ's new website
  • Enabled and inspired the OTNZ team to completely re-write their website content at the same time as the new site was being designed and built
  • Doggedly pursued performance issues that showed up during content-loading. Tom identified and fixed a bottleneck in the page load and this, together with the implementation of SilverStripe's Static Publisher module, took the website download speed from ok-but-could-do-better to lightning fast. This resulted in the following message from the Executive Director:

Wow - response now close to the speed of light. Smiling from ear to ear - well done guys.

Peter Anderson, Executive Director, Occupational Therapy New Zealand

My responsibilities included:

  • Writing the proposal for the website fixed-price contract
  • Creation and refinement of the information architecture and site schematics, including template wireframes and sitemap
  • Project management and ongoing liaison with the OTNZ team in order to achieve all their aims for the site, and to work through a range of technical and implementation issues with them
  • Project management of the WebWeaver team (myself and developer Tom St George) including the development of design/development timelines within a programme of work and ensuring that we achieved all our project milestones in a timely fashion
  • Design of the site - including the look & feel, graphics, and navigation - beginning with a number of different homepage designs in order to give the OTNZ team a range of design directions to choose from
  • Development of a set of 15 templates in HTML5 and CSS (using LESS as my preprocessor), which Tom then integrated into the SilverStripe CMS
  • Hand-coding in HTML5 to a very high level of accessibility and e-government compliance
  • Testing the site for e-govt compliance using Firebug, the Firefox Web Developer toolbar, Wave, and the Juicy Studio Luminosity Colour Contrast Ratio Analyser
  • Incorporating dynamic graphical effects via jQuery - including the prototype for the Find an OT filters - and ensuring that these elements were still accessible when JavaScript was disabled
  • Incorporating a range of CSS3 effects within my stylesheets including border-radius and box-shadow - which had to work in (almost) all the browsers on our test list
  • Ensuring that IE6 styling/display was as close to the original design as possible without the CSS3 enhancements
  • Extensive testing of the site at all stages of the development process, ensuring complete consistency across the following browsers and platforms:
    • PC: Internet Explorer IE6, IE7, IE8, IE9; Chrome (latest), Firefox (latest)
    • Mac: Chrome (latest), Firefox (latest), Safari (latest)
  • The creation of a sitewide CSS print stylesheet also tested across the full range of browsers and operating systems
  • Ensuring that every template had been validated using the W3C Markup Validation Service and that it conformed to HTML5 requirements
  • Sorting out the move to a new web host (ISP) and dealing with various hosting issues
  • Building the skeleton site in SilverStripe so that all the pages would be ready for the OTNZ web editors to input content quickly and efficiently
  • Training the team of three web editors at OTNZ to use the CMS, together with ongoing support as they developed their SilverStripe skills
  • Ongoing liaison with the OTNZ team, to ensure that the new templates and backend functionality were working as expected, and to provide additional HTML, CSS and content graphics as required.

This was a two-person job - I did the initial quote and quote re-writes, information architecture, site schematics, ongoing project management and client liaison, design, HTML and CSS, testing, accessibility and e-govt compliance, CMS training and ongoing support. Tom integrated my templates into SilverStripe, programmed all the site functionality and sorted out the Single Sign On (login) via Membee, and also provided ongoing support to the OTNZ web team.

The site was divided into two halves - for Public and Members - with the Members' side of the site being password-protected and requiring login. The organisation used Membee as their membership management tool, and the website login ran through a Membee iFrame embedded on the website.

It was a long project - one of the longest I can recall being involved with from start to finish. This was partly because staff changes required the project to be put on hold at one point, and partly because OTNZ decided to rewrite all the content for the website - which at over 550 pages on launch day is no small undertaking.

I think the end result was well worth waiting for, although I was sad not to be able to do my normal QA process before go-live, due to cost considerations. The site was not responsive, but was designed using a clearly-defined grid, which means that the new design could easily be used as the basis for a responsive site in the future (and was!).

A mammoth effort on the part of the OTNZ web team - and very well done!

Post-launch we continued to work with the OFLC team to identify any missing functionality that they had in their old site but which they were not able to include in the initial specifications for the new site, due to budgetary limitations. Our aim in this second phase was to find ways of providing them with everything they were used to in the old site and would love to have again, without breaking the bank.