The British Museum had recently undergone a huge re-branding exercise and had a new visual language and fabulous site design in place. However, some of the original implementation had not kept pace with current progress. I was pleased to help build a modular CSS framework and typographic grid to match.

Early into the project we established clear metrics for success. The museum has a huge global reach, so accessibility and browser compatibility were key. Working alongside the museum's design team, I translated Photoshop comps into working XHTML and CSS templates. IE6 was still widely used at this point, so a big part of this effort was building an ‘elastic’ twelve column grid system that used 'EM' units to allow every part of the design to scale using in-built browser controls.

We wanted to push the envelope a bit and that led us to implement a typographic system that adhered strictly to a strict, 16 pixel baseline. The results were really quite special. Pages flowed with a beautiful vertical typographic rhythm – content, text and design elements lined up across columns and throughout the page.

After the initial redesign project, we continued to build an extensible design system that allowed non-technical editorial staff to manage and create new content. I built a large library of visual and functional modules, including slideshows, image switchers and floorplans. Editors could then drop these components into new and existing pages, where they would be styled according to the template.

Through each of these efforts, page load times were reduced and the editors had a far easier time getting content onto the site.

The solution was a touchscreen interface that exposed detailed information and high resolution photos of every object in the gallery.

Visitors can type in a unique object number to pull up comprehensive academic text and additional photos.

The interface features a keypad with large touch targets to ensure ease of use. Each object has many associated photos and a series of thumbnails allows you to choose a larger view and zoom right in and move around, looking at the intricate details of the Chinese ceramics.

The interface is built using HTML, CSS and JavaScript, using the jQuery framework. An odd characteristic of the Samsung touchscreen system was its reliance on IE6. I thought this was a shame – the system could really have benefited from a smoother text rendering engine. Nevertheless, the end result was functional, polished and very easy to use. The image zoom feature was prototyped in Flash but the final version uses Microsoft Silverlight.

Multiple stakeholders were involved in approving the design and interface. To ensure maximum usability, we used an iterative, user-driven development process with comprehensive user testing. The interface was then integrated with a back end system developed by the British Musuem’s Information Services team.

The project was a great success – we received excellent feedback and responses from museum stakeholders and gallery visitors. A brilliant solution to an interesting problem.