WM Bamford & Co Ltd

Bamford - homepage

Website: bamford.co.nz (site has since been redesigned) - view screenshots

Size: 12 template pages

My professional status: independent web designer/developer

Website client: WM Bamford & Co Ltd

Dates: November - December 2008 with ongoing additions until 2015

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

Brief: WM Bamford & Co Ltd is one of New Zealand's leading independent medical supply companies, supplying medical consumables, equipment and pharmaceuticals to public and private hospitals as well as to doctors, dentists, veterinarians, rest homes and pharmacies.

The company needed a new website which would reflect and complement their new print brochure - and which would allow potential customers access to their substantial product listings as well as providing information about Bamford's supply agencies and partners. I worked with my business partner Tom St George to design and build the new website, which was integrated by Tom into the Expression Engine CMS.

Hey Ali & Tom! I wanted to thank you both for all the hard work on the website and getting your end of things done on time... I would like to make dinner sometime for you two lovely people if you would like to come...

Noeline Cummings, Marketing Liaison, Cummings & Partners Ltd

My responsibilities included:

  • Writing the proposal for the website fixed-price contract
  • Development of the information architecture and site schematics
  • Project management and ongoing liaison with the client in order to achieve all their aims for the site, and to work through a range of technical and implementation issues with them
  • Design of the site - including look & feel, graphics, and navigation - using the new Bamford brochure as design guide and inspiration
  • Development of the site in CSS and HTML 4.01 Transitional, which would then be integrated with the Expression Engine CMS built by my programming partner Tom St George
  • Hand-coding in HTML 4.01 Transitional to a reasonable level of accessibility, and following NZ e-government Guidelines
  • Creation of dynamic graphical effects including a number of different accordions, automatic child > parent relationships generated in the subnav, and a timed animation for the homepage - all of which I wrote using the jQuery JavaScript library
  • Utilisation and re-styling of the Superfish jQuery plug-in for main nav dropdown menus
  • Design and creation of a Flash animation for the logo on the homepage, using swfObject as the image replacement mechanism
  • 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; Firefox, Opera
    • Mac: Firefox, Netscape, Opera, Safari
  • Ensuring that every page and stylesheet had been validated using the W3C Markup Validation Service and that it conformed to HTML 4.01 Transitional requirements
  • Ongoing liaison with Tom, to ensure that the template pages could easily be integrated with the CMS
  • Ongoing additions and alterations to the website during the content-loading process - including adding a new section to the website, with subsequent alterations to main- and sub-nav areas
  • Ongoing support and consultation with the client, in order to help her work through the necessary alterations to the site.

I really enjoyed working on this project. Noeline Cummings, our contact at Bamford, is a lovely client - and it was great fun working with her. Tom and I worked hard to develop a comprehensive Information Architecture that would enable the display of products within categories and sub-categories, while at the same time minimising the number of clicks required to reach an individual product.

The use of collapsed jQuery accordions within the agencies and products sections of the site allowed us to display a large amount of information within a relatively small space, with the user clicking on linked headings to reveal the blocks of information they wish to view. This functionality was repeated at lower levels of the subnav, again in order to allow easy access to large numbers of subnav links without overwhelming the user.

The website design was based on the look & feel of the new Bamford print brochure, and I was very pleased with the way I was able to reflect this, while still allowing the website to have its own character as an extension of the existing branding.

Tom and I continued to work with Noeline from time to time, and in 2009 we began work on the companion Bamford Medical website, which was put on hold halfway through and then completed in 2010. We helped Noeline with updates and alterations to both websites until 2015.