Back to imamuseum.org

Behind the Scenes with IMA’s New Website

SPOILER ALERT: If you’d rather skip all the words and play with the new site, scroll to the end of this post, find the groundhog and watch the short video for login instructions.

One great pleasure of working in a creative environment like an art museum is that on occasion, we actually get to create things that are unique, tangible, and if we’ve done our job… useful.

Matt Gipson - Web Designer Extraordinaire

It’s one of the reasons I love to cook.  The process of pulling together all the right ingredients and a little skill to create a delightful experience that can be shared with others seems so personal, meaningful, visceral.  In short, very different from most of what keeps me busy on most days. So, it was a great honor to have the chance over the last six months to work together with so many talented staff from around the museum in creating and reformulating a new website for the IMA.

Over the last several years, the IMA has invested a lot of energy and resource in understanding and making use of the web in ways that help the museum meet its goals and carry out its mission.  Along the way, we’ve learned a lot.  We are constantly learning from our audience and visitors – watching the way they interact with content, reading comments, and listening to feedback.  We’ve learned immensely through our relationships and collaborations with other museums about what has worked and not in the past and about new thoughts, strategies and approaches we might try.  If I’m honest, we’ve definitely learned the most from our failures.  Hopefully, we’ve disguised most of them cleverly, but come join us for a beer in the cafe and we’ll share a bunch of the “less-than-superstar” moments.

In talking about how we might launch this new site we’ve been working so hard on, it only seemed right to give the first sneak peeks and behind-the-scenes privileges to our online followers.  So, like any great dish, this one’s hot off the grill and just for you!

One of the first things you’ll notice about the new website is that we’ve gone with a completely different design-feel from our earlier site.  Part of this is inspired by a new brand for the IMA which you’ll notice featured prominently across the site.  We wanted to shoot for a design that is clean and well structured, but still very visual and full of color.  You’ll notice that we stuck to a consistent grid layout on the site which lets us be pretty modular in the way we mix and match content.

As you dig deeper into the site, you’ll see that we kept the visual stimulus going, using a mix of video, photography and some interactive elements to capture attention and provide an engaging experience.  On most pages, you’ll notice a sidebar called “More Like This”.  This sidebar features content relations from across the web that relate to the to the current page content.  These relations are a mix of automated suggestions as well as hand-picked content that relates to the page you’re looking at.

MegaMenus

One of the issues we wanted to address with this redesign was to make it easier for online visitors to find content on the site. One primary focus of this work was the simplification of the menu navigation.  The IMA is an organization with an amazing breadth of programming and collections, so it was a challenge to streamline the navigation of the site and make it easier to find information. You’ll notice a single layer of top-level menus that expand when you roll over them. These menus are the same across every page of the website and provide a consistent anchor for visitors to turn to as they navigate around the site.  Since many of our visitors enter the site from search engines, a significant number of them might not ever reach the front page of the site. You’ll see that we expanded a few of the menus to include additional information and tools.  These Mega-Menus provide an easy way for visitors across the site to access tools for searching the collection, getting directions to the museums or linking to featured pages of content.

Live Search

One of the core areas of the site that has undergone a complete transformation is the underlying search engine technology.  This is one of those features that can’t be explained in a glossy image or paragraph of techno-jargon.  You really have to experience it to understand its power.  One of the easiest ways to play around with the search engine is with the Live search feature in the upper right-hand corner of the site.  You’ll notice that as you start typing, the Live Search automatically provides a number of suggestions for you that might match your query.  You’ll notice that these are broken out by type (Artwork, Exhibition, Artist) and provide thumbnail images when appropriate.  What you may not notice at first is that in addition, this search can also access videos on ArtBabble, posts on our Blog, even images from Flickr.  Every time you press a key, we’re searching over 60,000 pages of content to return the best answers to you.

Another area of the new website that benefits from the work we’ve done on the search engine is the Collection Search Page.  We wanted to provide an experience that would let someone who has a specific search in mind, find what they want quickly… but also an interface that could support an enjoyable browsing experience that is both visual and simple.  As you roll over the thumbnail images on the page you’ll notice that we add more information about the work you’re hovering on and show the full thumbnail of the work.  From this roll-over you can easily tell whether the work is on view today, access a magnified image and link to a page with the full information about the work.

You’ll notice that when you type in a search, the left-hand menu expands to allow you to filter your results by creator and also by descriptive tags added by other users.  Doing so provides a really powerful way to combine the information from our collection databases with the way these works are experienced and understood by visitors.

If you click on the “More+” button on the collection search toolbar, you’ll unroll some additional tools which let you restrict your search by department, materials, object type and a few sliders which let you set a date range you’re interested in.

In my experience, one of the most frustrating things about museum websites is that they frequently have really terrible calendars!  Our own website was a prime example of that phenomenon.  I must admit, it just wasn’t very good.  In our defense (and the defense of all the museum webmasters screaming into their laptops), the problem is that museums have crazy calendars.  The problem is just pretty darn hard.  Some events repeat, some don’t.  Some events (like exhibitions) last for months, others last only one hour.  Events like classes meet many times over the course of a few weeks.  Our desire, is that all of these events be accessible on one nice neat little page of boxes…  aint gonna happen.

We’ve decided to take a little bit different approach for our calendar this time around.  Instead of a traditional list, or box-based calendar, we’re opting for more of a timeline.  In our design process, we found that timelines supported the kind of variation in events that we see in our museum much better than any of the more traditional options.  In one eyeful of timeline, we can show you an entire month’s worth of events at the museum.  Pairing the somewhat novel timeline interface with a traditional date picker on the left will be a nice fall back for those who prefer a more traditional interface, and provides a nice way to index directly to dates you’re interested in.  The scrollable action of the timeline will let users browse to find out more about the pattern of offerings here at the IMA.    A clickable legend in the right sidebar, lets visitors filter events down to see only the ones they’re interested in.  Every event is available at your fingertips and it’s easy to see what exhibitions will be on while you’re here.

One of the things I think we’re all aware of is how much the mobile web is changing the way we seek and access information.  As we’ve watched our web statistics, we’ve seen a steadily increasing number of users coming to our website from mobile platforms.  We can only anticipate that this trend will continue.  As such, we wanted to be sure to offer a specialized experience for mobile users which still let’s them bail-out easily to our full website.  The new website features a specialized mobile page with information you might want to check while you’re on the go… hours, directions, showtimes etc…  If you’re looking for the main site, just click the button on the bottom of the page.  You can always toggle back to the mobile site by using the call out from the IMA homepage (note: this mobile page icon only appears in mobile browsers)

Buy tickets easily on the new website

In addition to the calendar, the other area that was not very good on our old site was the way we handled ticket sales and memberships online.  Not that there was anything insecure or hacky about the software, just that it was darn hard to use.  We’ve done an extensive amount of work since that time to replace those systems with a new one that we’ve integrated in-house and customized to make this process as easy and painless as possible.  Why should it be hard?

Finally, one of the new areas of the site that I’m most excited about is called “Interact”.  Maybe this is preaching to the choir since you ARE reading this on the IMA’s Blog… but we’ve been doing some really amazing stuff around the web in the last few years.  We’ve been sorting out the kinds of content and social media tools that give audiences an inside scoop on a pretty amazing institution.  We’ve also been learning a TON from YOU.  I think all of us here get totally jazzed when we see a really insightful comment on the Blog or when someone tells us a really cool story about experiences they’ve had at the museum.  You also take us to task occasionally which is good for us, and helps us grow and get better!

The problem is that most of that content was really buried on our previous sight, and unless you knew where to look, you probably missed it.  The Interact section is a much stronger attempt at providing a home where many of these efforts can live.  Interact will be an easy place for you to find links to our social media efforts, comments you’ve left for us on twitter, on the site, or tags you’ve added to describe your favorite works of art.

Stay tuned to Interact for some pretty fun ideas we have about how to continue to give you all more and better sneak peeks and insider info on what’s next at the IMA.

Take unique and quirky tours of the IMA's collection online

One of the things that we’ve been dying to put together for a while is called TagTours.  This new area of content on the site gives you a novel way to bring together works from across the collection that might not otherwise be thought of as connected.  Need a way to impress a date?  Like Sports? Animals?  These tours provide a unique way to experience the IMA’s collections online.

Enough of the chatter, let’s get on to the good stuff… but first a word from our sponsors. Click through and watch this video to get the super secret and ever-so-clever username and password to access our new site

Click through to watch this video and get access to the new site

Over the next few weeks staff from the IMA’s webteam will go into a bit more depth on each of these features to explain a little bit more about how they work and why they do what they do.  As always, the IMA is committed to continuing to help other museums develop better tools and techniques for succeeding online.  We’ll be examining which of these features might be released as open-source tools that can be picked up and used by any museum that needs them.

Thanks for sticking with this rather lengthy article.  As always, please leave comments / questions / suggestions for us in the comments.  As I mentioned above, we learn a ton from you and your input and would so much appreciate your thoughts!  -Rob

Filed under: Technology

14 Responses to “Behind the Scenes with IMA’s New Website”

  • avatar
    Matt Roth Says:

    I took a quick look at the new website, all I can say is FANTASTIC! My family loves spending weekends at the IMA, this appears to be a great portal to the museum’s offerings. Well done!

  • avatar

    The redesign is a great improvement to what was already a benchmark. We are in the midst of reworking our online presence…and I’m interested in the underlying platform(s), and the integration with your ticketing: any chance of another posting on some of the nuts and bolts?

  • avatar
    Ed Says:

    Hi Michael,

    The site is built on Drupal, as was the previous incarnation. As for more about nuts and bolts… you might have to tune back in on Tuesdays for the next few weeks… or months. ;)

    Thanks for the great feedback!

  • avatar
    Paul Rowe Says:

    Great job! The Live search is a really nice feature. The filtering and advanced search options on the collection search results page are laid out very cleanly and are easy to follow.

  • avatar
    Robert Says:

    Very nice work!!

  • avatar

    I think the new site is awesome, and is actually worthy of being inside the museum as well…
    Offline hanging on the walls…

    Thanks and Regards

    Noel for Nopun.com
    a graphic design studio

  • avatar
    Effie Says:

    For some reason, the user name/pw isn’t working.

  • avatar
    Rob Stein Says:

    Thanks Matt, Michael, Paul, Noel,

    Glad to know that things are working well so far! We all poured our hearts into the project over the past few months so it’s gratifying to know that people like it!

    Matt, I hope the new site gives you even more reason to get down to the IMA and hang a bit! Hope to see you around!

    Michael, as Ed said already, Drupal has been a great platform for us and a wonderful open-source alternative that has proven to be very flexible… Our ecommerce integration leverages Ubercart and Google Checkout with custom code to support our membership and ticketing needs as well as to synchronize with our membership database…

    We’ll be publishing on Tuesdays for a while I suspect and giving away all the nitty gritty details… As I mentioned in the post, we’ll also be releasing pieces as open-source where it makes sense…

    Effie, I just tried the name/pw from home tonight and it seems to work… if you still experience problems please email us at web@imamuseum.org

    -Rob

  • avatar
    Matt Says:

    If you were having trouble logging in, go to http://www.imamuseum.org/new and refresh the page. Click the button at the bottom of this page and it should then prompt you for a password. The issue should be fixed now.

  • avatar

    The IMA website allows access which enables the visitor to gain a more holistic … Showing behind-the-scenes activity and featuring artist interviews..

  • avatar

    great work, especially the button !!

  • avatar
    Dolores Says:

    I really love the redesign – it’s crisp, and links are easy to follow. Especially love the ability to see what you’re looking for on these uncluttered pages. However, agree that plain text on white background is boring in comparison with rest of site, not to mention it’s hard on “older” eyes.

    Some background music options would be nice. It feels kind of off that videos offer music, but rest of site is so quiet.

    Otherwise, great job!

  • avatar

    I also like the new web site very much. However, I was quite surprised that there were NO pictures/photos in the descriptions of the exhibitions or the talks. We are visual people, and we want to SEE a little taste of the exhibitions and the content of the talks. Please correct this oversight.

  • avatar
    Rob Stein Says:

    Hi Kathryn, Dolores,

    Thanks for the feedback, glad you like the redesign so far! It’s generally agreed that black text on a white background provides the most readable experience for the most viewers which is one reason we chose that direction. The high contrast between text and background works out pretty well on most displays, but maybe is a bit bright if you have a bright display… We’d also hoped that the design would translate well to print as a number of our visitors like printing out dates / times / directions / or to read longer text from the web.

    While we’ve been known to groove to a good set of tunes during the development of the website (Miles Davis’ Kind of Blue has been a cathartic experience at times)… We’ll probably steer clear of background music on the site for a while… we want to keep the download size as trim as possible… and respect all those read-from-the-office-while-your-supposed-to-be-working visitors :)

    I guess I’ll own up to stuffing the site with lots of images… which for those of you on slow connections, might make you curse us :)

    Kathryn, we’re visual creatures too and will try to include as many images with our exhibitions and programs as we can. One reason why these areas may have less pictures than other parts of our site, is that we frequently run into licensing issues to show you images from films / speakers / or works of art that are not owned by the IMA… We frequently pay royalties so that we can display these online, but sometimes those fees are just out of our league :) We hope you’ll understand!

    Again, stay tuned… we’ve got lots of new stuff up our sleeves and just couldn’t stuff into this initial launch… that, and we wanted to save some good stuff for the rest of the year!

    -Rob

  • Trackbacks