Read Comments

Building a successful museum website

It’s been a year since the launch of the award winning MCA website and enough time has passed that I can reflect of the process of UX, design and development and a make an honest assessment of the project.

When I first started working at the Museum of Contemporary Art, the main website (www.mca.com.au) had a flash header, an early 2000s aesthetic and scrolling ticker in the header (see below if you don’t believe me, those little people walk around at page load). There was no online collection, every exhibition – big or small – looked the same, there was no mobile support and the site was clearly in need of some love. Happily for me, the MCA had already begun work on a new web presence.

The old MCA website homepage

The old MCA website homepage

At the 2013 Museum and the Web conference I’ll be giving a paper about the eCommerce aspect of the physical and digital rebuilding process the MCA undertook in 2011/2012. Entitled Open systems, loosely coupled: Creating an integrated museum eCommerce system for the MCA it is a the walkthrough of what we did, how we did it and what learnt along the way. An interesting read for those looking to resolve the eCommerce questions their gallery/library/archive/museum no doubt face. For those more interested in the core website planning, design and build process, read on.

UX – User Experience

I take user experience (UX) really seriously. So does the Interaction Consortium (the company we hired to work on the site) and Grant Young from Zum.io (the person Interaction Consortium (IC) brought on to lead the UX design). Over a period of weeks Grant, IC and MCA staff worked together to build an understanding of what were the Museum’s core content needs and what users stories we wanted to support, further how we would prioritise these, often competing, intentions. Through a series of large then small, open then focused, rowdy and fun workshops and meetings we began to refine down to a core set of user experiences that turned into webpages, sections, connections, utilities and APIs that Grant set about turning into wireframes and functional specifications.

I also worked in small groups with key people from various departments on subsections that needed focused attention, the What’s On pages for example. The two key battle grounds for any site, especially one for a museum with many competing messages, is real-estate on the homepage and in the global navigation. After a long debate, those in favour of a clean, simple navigation with (what we took to calling) a Mega Menu won out. In response to the power of search, it’s important to keep in mind the idea that every page on your website should act like a homepage. The navigation we developed cleverly supports this need.

The Mighty MCA Mega Menu

The Mighty MCA Mega Menu

One, almost hidden, UX/design feature of the navigation is that it tells a story. A story that is one of the core aspects of the Museum and one of the most common uses of the web site.

WHAT’S ON to LEARN ABOUT ARTISTS & WORKS

MCA header

With the UX done and wireframes starting to role in and it was time to start working on the design in earnest.

Design

While Grant, IC and I were working on the wireframes, another group began work on the design. IC had enlisted the help of the Sydney-based design studio Toben, who had attended a number of the workshops and already had a good idea of what the MCA was trying to achieve. Working with a group from the Museum’s Design, Marketing and Digital Media departments, Toben were tasked with teasing out the key aspects of the MCA brand story. This was made more difficult by the fact that as well as undergoing a physical rebuilding project and a digital rebuilding project, the Museum was also rebranding itself as the Museum of Contemporary Art Australia. What Toben came up with exceded our aspirations. A modular, clean and modern design that is a great digital match to the facade of the new wing that opened in March 2012.

MCA Sydney

There are a lot of great little design features such as the overlays on the exhibition tiles on the What’s On page (http://mca.com.au/whatson/), the subtle “On Display” stamp on art works from the MCA Collection that feature on the homepage and are currently on display in the Museum (http://mca.com.au/), the background image that is a texture from within the building, the bold quotes from arts and curators throughout the collection pages (http://mca.com.au/collection/work/200916/) and the way the images of artworks feel like they’re floating on the page (http://mca.com.au/collection/work/200974/).

Development

The Interaction Consortium (IC) was selected for the project, in large part, because they would be utilising and improving upon the GLAMkit web toolkit that has been especially designed for the galleries, libraries, archives and museums sector (http://glamkit.org/). Further, they committed to making the resultant code available as an open source project, an initiative that the MCA strongly supports.

In January 2013, with the support and encouragement of the Museum of Contemporary Art Australia, we’ll release the code for www.mca.com.au – minus the MCA-specific parts – as version 0.1 of the free, open-source GLAMkit CMS, for anyone to install, use, or contribute to. (GLAMkit rebooted, Greg Turner) 

Finding a partner who understands the museum sector and had built properties for museums and galleries in the past was important. IC’s previous experience was invaluable when it came to refining which features we should focus on and how we could support some of the more complex elements on the site such as how events, exhibitions, series, festival would interact with each other, and how these would in turn interact with the MCA Collection, the MCA’s sponsors and co-exhibiting institutions.

The What’s On section of the site is one it’s triumphs. I say this for two reasons: the majority of visitors who arrive via search for “mca exhibitions”, “what’s on the the mca” or the name of the exhibition get straight to the right page, stay for a time and then bounce (a successful user story) and because I’ve had colleagues in digital departments in other institutions ring me for advice as their public program colleagues have asked them to build events pages “like the MCA has”.

The other aspect of the CMS (GLAMkit’s content management system is Django based) that IC built is the modular way you can create pages as a stack of different content types. The same tools are used to build a large, complex, image rich pages such as the ARTBAR series page (http://www.mca.com.au/series/artbar/) as is used our venue promotion pages, complete with panoramic interactive (http://mca.com.au/about/venue-hire/harbourside-room/).

Feedback

Almost all the feedback the new site has received has been positive. On the first couple days we had some caching issues and some users complained about the speed of the site, this was quickly resolved. A few months after launch, someone complained that the animated people has disappeared, which was their favourite part of the site.

Hi,
Just wanted to say the new web-site is terrific. It’s really easy to navigate around and looks fantastic – congratulations to all involved.
Thanks, Marina

Congratulations on the new website – it is really good.  I especially like the use of roll over on images – it makes me want to explore the images to see what is under them. Great UX.

Industry reception has also been positive, the website won Best Museum Website and Best of the Best at Museums Australia Multimedia and Publication Design Awards in 2013.

As I’m a nerd, so I had to look at the numbers to. I could do a whole post on these, however the headlines are:

Unique browsers were up around 50%, this is due to a number of factors.
Page impressions doubled, which I believe is due to a deeper, richer site.
Time on site almost doubled, which I also believe is due to a deeper, richer site.

For any institutional web site there are two main constituencies that you must support and respect, your audience and your colleagues. That this site provides for the needs of many departments, including Marketing, Creative Learning, Sponsorship, Philanthropy, Curatorial, the Store and, of course, Digital Media, is another measure of its success. As always, there is more to do, however the next round of work on the site will be on a very solid, and totally gorgeous, foundation.