Master Plumbers, Gasfitters and Drainlayers Inc

Master Plumbers - homepage 2009

Website: masterplumbers.org.nz (site has since been redesigned) - view screenshots

Size: 10 template pages in four different colourways for a 250+ page website

My professional status: independent web designer/developer

Website client: Master Plumbers, Gasfitters and Drainlayers Inc

Dates: April - October 2009, with regular ongoing support until March 2016

Categories: Scoping/pitching/quoting, Client liaison, Project manager, IA & UX, Content designer, Website designer, Front-end developer, Writing for the web, Content-loader, CSS-based layout, jQuery/JavaScript, SilverStripe, Large sites

Brief: Optimation was ceasing their support of the Rex system within which the old MPGD site was housed, and recommended us as a web design company that might be a more suitable partner for the MPGD.

Our brief was to replicate the functionality of the old site within a completely new design, integrated into a more user-friendly CMS. We also planned a phased approach towards introducing new functionality in the longer term.

Hello Ali & Tom. May I say thank you for your thinking and the solution you have determined. I now understand what the hesitations and issues are and agree with your thinking – thank you for the initiatives you have taken.

Fiona Gavriel, Chief Executive Officer, Master Plumbers, Gasfitters & Drainlayers NZ Inc.

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
  • Content design throughout the site, including member logins, site search, Find a Master Plumber search, interest group and online forum access, course booking interface and Single Sign On
  • Project management and ongoing liaison with the MPGD 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
  • Ongoing project management once we had designed, built and integrated the website in response to client requests for changes to the backend functionality of both the membership database, the CMS and the website itself
  • Development of a web colour palette for the Plumbers brand, as their logo consisted of one colour + white, and they had no other colours defined for the brand
  • Design of the site - including look & feel, graphics, and navigation - within a four-color design solution using colour as an ambient signifier to indicate to users which of the three main site sections you are in
  • Development of a set of 10 templates in four different colourways in CSS and HTML 4.01 Transitional, which Tom then integrated into the SilverStripe CMS
  • Hand-coding in HTML 4.01 Transitional to a reasonable level of accessibility
  • Restyling the SilverStripe-generated forum widget so that it matched the design of the rest of the website
  • Incorporating dynamic graphical effects for business and information partner logos in the footer of all templates, based on the jQuery jqDock plugin
  • Programming the jQuery to provide progressive enhancement while still allowing complete accessibility for those users with JavaScript disabled
  • 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; Firefox
    • Mac: Firefox, Opera, Safari
  • The creation of a sitewide CSS print stylesheet
  • Ensuring that every template had been validated using the W3C Markup Validation Service and that it conformed to HTML 4.01 Transitional requirements
  • Content-loading virtually the entire site (approx 250 pages) within SilverStripe and proof-reading everything
  • Running a series of CMS workshops with various MPGD staff including the web editor and membership support staff to demonstrate how to use the CMS, together with ongoing support for the web editor as she learned to use SilverStripe
  • Ongoing liaison with the MPGD web 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
  • Rebuilding and then reskinning templates provided by Learning Source, to whom the management of online course bookings was outsourced after the site went live.

This was a two-person job - I did the initial quote, information architecture, site schematics, ongoing project management and client liaison, design, HTML and CSS, content-loading, testing, training and ongoing support. Tom integrated my templates into SilverStripe, integrated Master Plumbers' original database and programmed all the site functionality.

Originally, the Master Plumbers site was divided into three main sections - Public, Trade and Members. I designed the site to display templates in three main colourways - one for each main section of the site, plus a default colourway for non-sectional pages such as the homepage, contact us etc. The Public and Trade sections were open to all, with the Members section being accessible only to MPGD members via membership login. Within the Members section were five interest groups with an online forum for each. Access to each interest group was restricted to members who paid a subscription to belong to that group.

The site included a Find a Master Plumber search engine, which allowed visitors to search the MPGD member database and find a Master Plumber in their local area. Within the Members sections we also had a Course Calendar, which was populated from within the CMS and was fully searchable online.

The integration of the CMS and database was a fairly complex job for Tom, partly because of the legacy nature of the original Optimation database, and also because it had to perform a number of different functions including storing login info for the Members section, storing interest group and forum access for members, and storing work type info which determined which members showed up in the Find a Master Plumber search results.

The client requested that members be able to login using either their email address or the name of their company as their username, as they knew that some members didn't have email addresses. This added an additional level of complexity to the database functionality. There was quite a bit of discussion between us and the client around this request, as we could see a number of issues that would arise, not least of which would be the possibility that members with even slightly complicated company names (Fred Bloggs & Co Ltd, for example, which could be written a number of different ways) wouldn't be able to remember their login.

The project took longer to reach completion than we had initially anticipated, partly because the client took the opportunity to rewrite the majority of the site content, which took a while and meant that I ended up doing most of the actual content-loading to take some of the pressure off the site editor. There were also a number of client-led changes to site and database functionality and also to the CMS, which meant that although we delivered the original site on-time (as we always do), there were subsequent alterations which pushed out the launch date somewhat.

We were all very happy when the site finally went live - sometimes it seemed as if we'd never get there - and although we all experienced a number of bumps along the way, we really enjoyed working on this site and getting to know the Master Plumbers crew. The site looked great, and the new content written by site editor Beverly Sellers was really rather good.

A few months after the site went live, Master Plumbers decide to outsource management of their course bookings to Learning Source, who supplied us with their HTML master templates. I stripped out much of the chrome and replaced it with our original chrome so that the new Upskilling section would match the rest of the site. I then spent a considerable amount of time going through all the possible screens within the Learning Source application, restyling every element so that it matched our look & feel.

Tom re-purposed the original Upskilling CMS functionality so that Master Plumbers could use this to promote national and international events via an events calendar. I put together a comprehensive task list in order that all parties (WebWeaver, Learning Source and various Master Plumbers staff members) knew what they needed to do by what date. It was important to facilitate the transfer of upskilling functionality across to Learning Source at the same time as the new events calendar came online, and I project-managed this process to ensure it ran as smoothly as possible.

A couple of years after the site was first launched, we simplified the architecture and divided the site into two main parts instead of three - Public and Members. We also did away with the five interest groups within the Members section and instead made all member content available to all members.

Later changes included layout updates to the homepage and the transfer of membership info to the iMiS database, rather than being controlled within the CMS. We added public-facing and members-only banner advertising to the header and sidebar of the site in 2014, which included additional programming by Tom so that ads could easily be updated by Beverly within SilverStripe.

In 2015 the Learning Source connection was concluded and training information transferred to a different website. Tom and I also put in a good deal of work on helping to develop a Single Sign On process between the existing website and the new training website, plus potentially an additional new "Find a Master Plumber" website sometime in the future.

Tom and I continued to act as consultants on the website until 2016, adding bits and pieces of new functionality along the way. I worked with Beverly regularly and helped her with stuff on the website whenever she needed it - she's a very good web editor and the site continued to grow and develop under her steady hand. In 2016 the website was redesigned and rebuilt by another company.

Hey, thanks Ali & Tom for all these years with the MP website. I’ve enjoyed every minute of working with you. Cheers, Beverly

Beverly Sellers, Communications Consultant/Editor, Master Plumbers, Gasfitters & Drainlayers NZ Inc.