A deep dive into an icon: his story, his meaning, and the science that will preserve him.Thomas Gainsborough's painting, The Blue Boy needed to come off view for significant conservation treatment. Rather than disappoint visitors who'd love to see him, the Huntington Museum created an exhibition showcasing the history of The Blue Boy and the science of conservation.
Two interactive kiosks for Project Blue Boy exhibition
Huntington Museum, Pasadena CA
Exhibition development: design, conservation, curatorial, editoral
Front-end Development, Strategy, Creative Direction, UX Design, Visual Design
Christina O'Connell, Conservator
Melinda McCurdy, curator
Jean Patterson, Editor
Nicole Trudeau, Exhibition Designer
Lana Johnson, Head of Exhibition Management
One of the most iconic artworks in British and American history, The Blue Boy, made around 1770 by English painter Thomas Gainsborough (1727-1788), will undergo its first major technical examination and conservation treatment in public view, in a special satellite conservation studio set up in the west end of the Thornton Portrait Gallery in the Huntington Art Gallery. The "Project Blue Boy" exhibition offers visitors a glimpse into the technical processes of a senior conservator working on the famous painting as well as background on its history, mysteries, and artistic virtues.
I was invited to collaborate with the exhibition team to produce two interactive screens on large vertical iPad Pro touch screens. The first would be a roundup of historical information about The Blue Boy, from the painting's creation to today. The second would be an overview of conservation science, with spectral images from conservation work on The Blue Boy.
Start with visitors, understand them step by step.
When I approach any in-gallery interactive screen as a UX designer, I have a baseline of great research about museum visitors to draw from. Many museum professionals are familiar with John Falk's excellent book, Identity and the Museum Visitor Experience. Falk's five visitor archetypes are a great starting point for understanding a visitor's motivations as she engages with an exhibition. Each of the five archetypes have different needs and behaviors in reaction to an exhibition.
Keeping Falk's visitor archetypes in mind, I always kick off a project with a simple user flow diagram. This shows a granular set of steps a user will go through, and it's always unique. I use it to understand what visitors will need to get interested in a screen, and what will spark them to continue experiencing its content. The user flow is also a great starting point for an exhibition development team to plan content for each key screen template within the interactive, as well as within the greater flow of the exhibition.
Catch visitors' eyes, but don't overwhelm the rest of the exhibition.
An “Attract Screen” is the screen visitors see when no one is interacting with an interactive and it has been idle for a period of time. Looking at the above user flow diagram, this is the first screen moment for users - and it has a big job to do. Visitors need to quickly understand that a screen is touchable, that it is interesting, and that it is worth their time!
There is a real art to create a visual design that harmonizes with an exhibition design, but also answers all these visitor questions. If we create too absorbing a screen, one with a distractingly rich animation, then visitors will be compelled to watch but not interact. Design too generic a screen (tempting for many exhibition teams, since this will not "compete" with the physical exhibition) and visitors might not interact at all.
Many prototypes, usability testing, and gallery observation have led me to the following rules:
Best practices for attract screens:
Help visitors make historical connections.
My initial UI design approach for the history screen was an animated timeline with parallax vertical scroll. I figured this would be a good frame for the content plus a delightful interface for visitors. To test this UI idea with the team, I created a coded interactive prototype to show "how it works, not how it looks". Once this was presented to the team, we quickly decided that this was NOT the right approach for PBB historical content, as it placed too much emphasis on dates and did not create enough connection between related images, such as the portraits of Gainsborough's nephew that the painter created across many years. Instead we used three thematic chapters containing interactive slideshows, which allowed more screen space for beautiful big images.
Make complex scientific concepts visible.
An important concept in conservation science is the electromagnetic spectrum, which includes a wide variety of ways a painting can be imaged: X-Ray, Infrared, visible light, and ultraviolet. Each imaging type can reveal interesting clues to a conservator, and tell fascinating stories about how the painting was made. Allowing visitors to explore conservation by exploring the electromagnetic spectrum proved to be a great visual concept for UI design for the conservation interactive.
We had a wealth of images of The Blue Boy already created by conservation imaging prior to the exhibition. The conservation interactive lets users compare visible light photography to other imaging types with a swipe, revealing different information about a painting's makeup or the process of painting it. It also features animated highlights helping the user look closer at fine detail.
Once the screens were coded, guerrilla user testing confirmed some of our choices and led to tweaks and refinement. Success! the attract screens were eminently engaging: "I'd tap that!" Fail: the first design for the comparison slider UI was too small to be recognized and explored by users. We made it significantly bigger before launch.
Here's how we make better interactives.
Project Blue Boy is currently installed and being enjoyed by Huntington visitors. I hope to do some usability observation while the exhibition is open to confirm some of the choices we made.
I have some very positive takeaways from Project Blue Boy: