Designing for scale and context, knights and dragons

Michael Neault
Jul 6, 2017 · 7 min read

As visitors walk through the galleries of many museums, they often encounter objects removed from their geographical and historical context, making it difficult to understand the works’ original purposes. At the Art Institute of Chicago, our latest installation sought to tackle that challenge — contextualizing objects through both the design of the actual gallery space and in the accompanying digital tools. Working on the latter, we aimed to surround our artworks with stories of the past, filling in the details that may have been lost to time.

This post details the process and principles the Digital Experience team used to create a series of in-gallery media experiences that weave narratives around art objects. The project was produced for the reopening of the new galleries dedicated to medieval and Renaissance art but also designed with the intention of expanding it to other galleries in the future. Supported by Bloomberg Philanthropies, the in-gallery interactives are part of a larger initiative to use digital media to connect visitors with the history, context, and emotion of objects through storytelling.

Demo video of the galleries and digital experience.

Think beyond the project — design for scale, design for pattern.

At the museum, we stage over 30 exhibitions a year. Demand for digital interpretation is high, and while we have an in-house media team, it’s challenging to create something unique for every exhibition. With this project, one of our goals was to create a system (not just an application) that could scale to other galleries and exhibitions.

Two years before the galleries’ reopening, project development began with a discovery phase that defined organizing principles and articulated the digital vision. Media design is often about being the flashiest or the most attention-grabbing (consider an airport or Times Square). In our case, we took a much different approach. Rather than drawing attention to the media itself, the digital design is intended to draw visitors deeper into the artworks, enriching their experience and understanding of the objects in front of them. There is a dynamic relationship between media and art, but the focus remains on the art.

Attention is a limited commodity; respect its value.

Our design consultant on the discovery phase, Michael Yap, would refer to attention as a “commodity” — a metaphor for considering audience bandwidth during a museum visit. When you think of attention as a limited resource, it helps decision making and cuts out needless features. With this idea in mind during concept development, we generated a few simple rules for the interactive:

  • Focus on a single storyline to guide the narrative
  • Limit content to no more than a dozen points of interest
  • Create a direct visual correlation between the digital display and the art on view

By artfully limiting the volume of content, we also limited the amount of UI. Building off the idea of a hyper-focused presentation, we decided to eliminate menus and restrict the interactions to natural gestures. This idea would take us down a path that seemed like an easy decision. It wasn’t.

Get out of the way of content. Omit needless interface.

Creating a system with an ultra-minimal interface was inspired in part by our past experiences with in-gallery interactives. Based on evaluations, we observed that layered navigation often resulted in visitors losing their path. People tend to visit museums with other people, so their attention is divided between social activity and viewing art. A sophisticated interface is hard to learn when you have limited attention. In addition, we observed that dense navigation tends to accidentally hide the best content. Rather than bury the content, we decided to bring everything to the surface.

In terms of content, we also observed that visitors tend to be motivated by general curiosity. How was this thing made? What does that symbol mean? What was this used for?

The synthesis of all these learnings inspired an experience with exceedingly limited UI and maximum attention to content. Interaction is constrained to gestures, like swiping up and down, swiping to spin, and pinch and zoom. While we hope the gestures are intuitive, we include animations to help orient and guide the visitor. With interface constrained, content takes center stage.

“Unlike any other digital experience I have personally worked on,” said Kirsten Southwell, interaction designer at the Art Institute, “the process for developing the front-end of these labels ended up being about 90% content strategy and 10% user experience and design. We knew the story would have to carry the weight of this experience and there was no design sizzle that could save us if the content wasn’t strong.”

There was nowhere to hide if the story was bad. This created a new type of challenge for the design team.

Step away from the desktop and storyboard with partners.

Often designers are in the business of creating templates more than creating stories. In this case, we had to visualize the story and the templates. With the in-gallery interactives, we were working with a medium that was new to the museum. And because there was no precedent, we had to invent a process that would sync design and content.

With a conventional process, a designer creates a system of templates and hands them off to the content team. This system works when the system is more text based. Here, the system is predominantly visual and required a designer to help craft the visual language along with the copy.

Our resulting process became known as “design improv.” With a series of workshops, the process generally began with a slideshow presentation from curators. Next, we would deconstruct the slideshow and start assembling the visuals on a whiteboard. Designer Kirsten Southwell would storyboard the concepts and then, in real-time, respond to suggestions, sketching and re-sketching until a consensus emerged. The formula looked something like this:

And here’s what it looked like in action.

Kirsten draws pictures—rapidly.

With design improv, we used traditional Hollywood storyboarding to visualize the narrative before a single pixel was set. It became an invaluable tool for collaboration and storytelling.

Moving from coarse sketches to a refined prototype.

Your craft is only as good as your toolkit.

With our original vision of scaling the project, we knew it would warrant a stellar content creation tool. Often in museums, the CMS design is either out-of-the-box and readymade, or an after-thought. In early conversations, we positioned the CMS design as being equal in importance to the front-end designs.

On the surface, the single-page, vertically scrolling application is exceedingly simple. But it’s deceptive. Underneath, a complex system allows for that simplicity.

Early prototype demonstrates interactivity.

“We are constantly challenging the status quo of UI norms to make the user experience faster, easier, and more enjoyable,” said Matthew Goshman, designer at Instrument, the creative agency on the project. Desire for a beautiful, user-friendly CMS influenced technology solutions as well. ReactJS was chosen for both the front-end and CMS, which immediately allowed for a close relationship between the two layers. Admins can see the results of their content without a clunky preview workflow. “My approach was simple,” said Goshman, “create an interface where the user can view the final experience as they are creating it.”

If you watch the interaction, the pages appear to seamlessly transition between slides, with the object persistent in the background. Most applications would solve this by creating baked-in animations. Here, the fact that it had to scale precluded animations and required a programmatic solution.

The CMS is based on a series of templates with modules, allowing for endless variety in the layout while still maintaining quality control with look and feel.

A sample set of the templates.

To achieve the impression of seamlessness, we created a module nicknamed the “Ken Burns effect.” This tool allowed us to glide and hover over high-resolution imagery. It even allows discrete positioning on 360° PNG sequences, a trick that would normally require an after-effects animator.

Demonstration of the “Ken Burns effect” module.

When you consider the investment required in making a piece of publishing software, it is essential to consider the long-game and create a tool that is modular, repeatable, and scalable. As Kevin Delaney, editor at Quartz has said, “I’d rather have a Snowfall builder than a Snowfall.” In other words, great storytelling alone is great, but having a way a way to deliver that storytelling — again and again — is even more valuable.

And so far, the tool is working. In June, we rolled out the application for a completely different type of exhibition: a retrospective of the distinctive Post-Impressionist Paul Gauguin showcasing his restless creativity.

Michael Neault

Written by

Executive Creative Director, Experience Design. Covering design + digital @artinstitutechi. On twitter @michael_neault.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade