Bamford Medical

Bamford Medical - homepage

Website: no longer online - view screenshots

Size: 15 template pages

My professional status: independent web designer/developer

Website client: WM Bamford & Co Ltd

Dates: May - July 2009 and March - May 2010 with ongoing support until 2015

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

Brief: following the successful launch of the Bamford website in December 2008, the company requested that we create a companion website, Bamford Medical, which would allow them to sell online a selection of the wide range of medical products they supply.

The templates and CMS backend of the new site were based on the original Bamford site, with a completely different look and feel so that they were easily distinguishable from one another.

Hi Ali & Tom! Bamford are so happy with their website - the images have just turned XX (Sales Manager) into a happy man. Thank you a million times for sticking with it and helping me get through this - you are both the best.

Noeline Cummings, Marketing Liaison, Cummings & Partners Ltd

My responsibilities included:

  • Development of the information architecture and site schematics (based on those already developed for the Bamford website)
  • 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 Bamford Medical logo as design guide and inspiration
  • Development of the site templates in pure CSS and HTML 4.01 Transitional (based on those already developed for the Bamford website), which were then integrated into the Bamford ExpressionEngine 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 using jQuery - including an accordion for the FAQs page, and automatic child > parent relationships generated in the subnav
  • Utilisation and re-styling of the Superfish jQuery plug-in for main nav dropdown menus
  • 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 3, Google Chrome, Opera
    • Mac: Firefox 3, Opera, Safari
  • Creation of a print stylesheet tested in IE6, IE7 and Firefox on Mac and PC to ensure cross-browser printing consistency
  • 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 new sections to the website, developing the registration and sign-in process, and adding thumbnail images to various pages
  • Undertaking a thorough QA, including proof-reading the entire site once the content had been loaded, in order to ensure that all pages displayed as expected, and to tidy up any pages that didn't look quite right
  • Training Noeline how to use Photoshop to create thumbnails and larger product images, how to clearcut and tidy up product images and how to prepare them for inclusion on the website
  • Ongoing support and CMS consultation with Noeline, in order to help her work through the necessary alterations to the site.

When we designed and built the original Bamford website, it was with Bamford Medical in mind, because the company was thinking ahead to the online sales site right from the beginning of the process. This meant that we had planned to re-use both the HTML/CSS templates and the CMS and to expand these for the Bamford Medical site - saving the client time and money in the process. This worked out very well, and because I'd done the original design and built the original templates I was able to re-skin these for Bamford Medical while still creating an entirely new and different design.

The project ended up being carried out as two separate blocks of work, almost a year apart - we understand that decision-making is sometimes a long and involved process for companies, so it wasn't really a problem to put the site development on hold for a while. Noeline Cummings, our contact at Bamford, is always heaps of fun to work with, and she had a lot of really good ideas about how she wanted the site to work, and how she wanted product imagery to be incorporated into the original design.