The Museum of the Order of St John

We created such a successful ‘temporary site’ for this London museum that it was five years before we replaced it with a new, responsive site with WordPress CMS.


In Clerkenwell, just outside the City of London, the remains of the Priory of St John (all but destroyed during the reformation) are now home to a fascinating museum. The Museum of the Order of St John tells the unique story of this ancient religious order. From their role as Knights Hospitallers during the Crusades, through to the founding and charitable work of the St John’s Ambulance.

St John's Gate at night

The gatehouse of The Museum of the Order of St John.

A hidden gem amongst the bustle of the capital, their magnificent gatehouse, secret gardens and ancient crypt are also all available for weddings and event hire.

The new website is cleaner, bolder and fully responsive to different screen sizes; delivering key content to its audiences, with clarity.

In 2010, following a major renovation project, the museum reopened to the public. They asked us to create a simple ‘holding’ site, of a couple of pages, until they were in a position to commission a full site. Those couple of pages grew into a few pages but, as it was never intended to be the full site, we hadn’t implemented any kind of Content Management System (CMS).

We all knew that one day they would need to invest in a full CMS-driven site but we were perhaps a victim of our own success because that simple holding site was remarkably effective and popular with audiences.


Early discussions in the offices, hung with historical portraits.

In 2015 (five years after that holding site went live) we finally got the go ahead for the full website, built to properly accommodate mobile, tablet and desktop screen. And of course, it needed a fully-functioning CMS so the team could add their own content and make updates.

This was an unusual brief because we are used to being asked to rethink a site (and particularly the aesthetics) from scratch. In this case our clients were keen to change as little as possible, in terms of the look and feel of the site that we’d previously designed. But we were still keen that our work and recommendations were informed by research and knowledge.

The first stage of our research was a group visit to the museum (we turned it into one of our monthly Cog Nights – you can read more Ross’s review elsewhere in this Journal). It felt very special to have the museum’s Director, Tom Foakes, giving us a personal tour of the archives and normally hidden areas of the museum.

Tom Foakes

Tom Foakes, showing us the archives in the museum’s basement.

We also did a lot of desk-based research: interpreting analytics data from the existing site, studying the sites of peers and competitors, reading through audience feedback, and chatting with museum staff.

Our research pinpointed the three main reasons for visiting the website: details about visiting, event details, and venue hire information.


Michael and Ross, discussing on-screen typography and colour.

We were also keen to introduce new content. Specifically, we wanted to add a blog, to give the staff a platform for a more informal interaction with audiences. And we wanted to start putting the museum’s archives online; we knew that this would only be a small percentage of the collection at this stage but it was important to show what might be possible in a future upgrade to a fully integrated archive system.


We worked with our clients to decide on the simplest possible navigation for visitors. We stripped back a lot of ‘top level menu items’ and added a simple hierarchy of ‘sub menus’, making it easier for visitors to decide on their own path through the content. To further aid the process we used informal, descriptive language like ‘Our story’ and ‘Your visit’.

Screen Shot 2016-01-19 at 14.03.33

Retaining the previous website’s aesthetic, we tightened the typography and strengthen the simple colour palette. To make the most of the museum’s images we added large slideshows and striking headers at the top of each page. On larger screens these headers extend outwards in a dominant colour, automatically picked from the image.


And we worked hard to craft every detail, including the transitions between pages and menus to maintain a finessed user-experience across all platforms.

Training session at the Cog studio.

Training session at the Cog studio.

we’ve all been having a great time adding content and gazing adoringly at our new website

The site is built with hugely adaptable templates that can accommodate a wide range of different content. The museum team now have complete control over their website, and (after a brief afternoon of training at our studio) we’ve been thrilled to see how easily they have found it to update the content.

The new website is cleaner, bolder and fully responsive to different screen sizes; delivering key content to its audiences, with clarity.

Our longstanding relationship meant we were able to work swiftly, with a lot of trust on both sides. From initial research to launch was a little over three months.

Launched: July 2015
CMS: WordPress

Add a comment

Your email address will not be published. Required fields are marked *