Master Plumbers, Gasfitters and Drainlayers Inc

Master Plumbers, Gasfitters and Drainlayers Inc

Link: masterplumbers.org.nz

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 ongoing support after delivery

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 are also planning a phased approach towards introducing new functionality in the longer term.

My responsibilities included:

  • Writing the pitch 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 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 they are in
  • Development of a set of 10 templates in four different colourways in pure 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 matches 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
  • 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.

The Master Plumbers site is 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 are open to all, with the Members section being accessible only to MPGD members via membership login. Within the Members section are five interest groups with an online forum for each. Access to each interest group is restricted to members who pay a subscription to belong to that group. The site includes a Find a Master Plumber search engine, which allows visitors to search the MPGD member database and find a Master Plumber in their local area. Within the Trade and Members sections we also have a Course Calendar, which is populated from within the CMS and is 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 determines which members show 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 don't have email addresses. This added an additional level of complexity to the database functionality.

The project took longer to reach completion than we had 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've really enjoyed working on this site and getting to know the Master Plumbers crew. The site looks great, and the new content written by site editor Beverly Sellers is 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 repurposed 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.