Museum of Design in Plastics

A Drupal site drawing data from a MODES collection management system and using Solr search and Javascript.

Our relationship with the Museum of Design in Plastics (MoDiP), began in the summer of 2009, when we were asked to provide a specification for a new website. Once the specification had been agreed, development  began in the autumn of 2010 and the site went public in July 2011.

The website uses a Drupal content management system to provide the staff at MoDiP with full control over the editorial page content, menus and sidebar blocks. We also wrote a series of step-by-step illustrated guides to the various editing functions in case they, or sometimes we, forget how the site works.

Since the museum collection is a specialist research resource, the artefacts are displayed with accompanying metadata and this metadata is linked to the search system.

MoDiP html prototype

HTML prototype

To specify the website we met with the staff at MoDiP to discover their needs and those of the site's audiences: students, researchers and the public at large.

Rather than producing a large written specification, we instead built an HTML prototype of the site, pictured left. This defined the architecture and page layouts and enabled the menus, links and content areas to be tested.

We did also include a short written summary of those parts of the work not covered by the prototype.


 

MoDiP Omni Graffle design

Graphical design

The design includes prominent links to the three main channels of information in the site.

Images are available for around one third of the artefacts in the collection. These are large and of good quality, so the artefact pages include big pictures, together with thumbnails of alternative views. The metadata for each artefact is displayed in a panel below the main image.

The page layout is based on a 12-column grid, 960 pixels wide and was done using OmniGraffle, one of our favourite applications for this sort of work.

An OmniGraffle design for an artefact page is shown left, with the 12 column guide visible behind the content layers.


 

MoDiP Home page design

The site

The site has three main sections: The Collection, Resources, Exhibitions & Events. These are linked from the large buttons at the top of the page, while the secondary navigation is by a smaller set of buttons in the footer.

Resources and Exhibitions & Events contain most of the editorial content, while The Collection is where users can find the 10,000+ artefacts stored in the website database.

Javascript is used on the home page to randomly swap the featured image each time the page is loaded.

There is also a blog feed, a feed from the Exhibitions & Events section and three other block that are all editable by MoDiP using the Drupal CMS.


 

MoDiP artefact page design

Artefacts

The artefact data displayed in the website originates in a MODES collection management database.

An XML export from MODES is passed through an XSLT transform to remove curatorial information not required on the public website.

The filtered XML data output, together with nine taxonomies, is then pre-processed on our server to provide linked metadata for each artefact, which is then stored in the Drupal website database. In addition, each artefact is tagged with the relevant taxonomy terms.

On the left you can see a typical artefact page.

Clicking on a thumbnail image will load an alternative view of the artefact, a process handled by Javascript to save re-loading the whole page.

Below the large image is a text description, beneath which is the classification hierarchy and then the metadata, with most of the terms (those in blue) linked back to the search page.


 

MoDiP collection page

The Collection and Solr search

The whole of The Collection section sits on top of a Solr search engine.

As well as a free text search, Solr provides a faceted search interface that enables users to filter the data by the following terms: available images, date, person, organisation, country, classification, material, method and colour.

Clicking on one of the linked data terms in the artefact page also returns the user to the search page with that term selected as a filter.

This is way more complicated to describe than it is to use!

Try it for yourself, here:
http://www.modip.ac.uk/