Royal College of Music

A public online interface for the RCM Museum and catalogue.

The RCM are continuously developing their online presence and following a recent re-brand, were ready to make their previously-unavailable museum catalogue available online.

The Brief

  • Design a search interface to the catalogue for research professionals and general users alike
  • Provide tools to create virtual exhibitions as alternative ways to expose material
  • Be responsive to a range of device sizes and optimise the experience appropriately
  • Follow brand guidelines and ensure the interface is strictly on brand
  • Create a flexible interface to accommodate large and small amounts of data
  • Can be accessed by users with disabilities
  • Surface links to related content
  • Design within the confines of the AdLib API

Extending the brand

Peter from Surface Impression had developed a set of mobile wireframes so it was my job to refine them where possible, work out how the interface would adapt to larger screens and implement the brand guidelines  to create a seamless integration with the existing site.

With a limited colour palette, established typography and set of layout grids, my job was to extend the branding where appropriate into the mobile platform; providing new use cases and patterns where required in a sympathetic manner.

Due in part to the constraints of the AdLib API, we decided to implement a two-stage search mechanism; a generic search across all sources followed by the option to refine the results using the available facets such as time periods, location and collection.

One of the advantages of this two-stage approach is that it allows up to present a simpler initial mechanism. This works especially well on mobile where we are wanting to reduce form inputs due to the fiddly and cumbersome nature of interacting with them on a mobile device, or one where a virtual keyboard is used.

Responsive UI

For many objects, there is a lot of meta data and descriptive text to show that is relevant to researchers, our primary users.

In the desktop version we present this alongside the object to give it more emphasis and visibility; it has equal footing.
In the mobile version however, we decided to collapse this information at specific data points so that the user can get a better feel of the whole content that is available.

Similarly on mobile, we show image galleries as swipeable slideshows.

Get in touch

Drop me a line if you'd like to discuss your product or service.

Can you tell me a little more about your project. If you leave a contact number, I will get in touch.

Or follow me at

Other projects