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.

Project:
Two interactive kiosks for Project Blue Boy exhibition
Client:
Huntington Museum, Pasadena CA
Team:
‍Exhibition development: design, conservation, curatorial, editoral
My Role:
‍Front-end Development, Strategy, Creative Direction, UX Design, Visual Design

huntington team:
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.

goal one
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.

goal two
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:

1. Animation should be compelling, but ambient/atmospheric. Often it has long duration and moves slowly. Animation is a huge interaction cue, far better than a generic textual hint such as "touch to start". Long duration is a cue that the animation is a screensaver for other content.
2. An animation that hints at, but does not truly fully reveal screen content. You could call this "click bait", though it has far better intentions than a misleading news headline.
3. When screens have different content, they should have different attract screens (though they can look related.)
4. Text prompt (remembering that not all visitors read English) should hint at content and motivation as well. Best case, it also varies per screen content. Examples: "Touch to explore the history of portraiture" or "Learn more about how dinosaur eggs hatched."
5. The exhibition designer or team should be key reviewers for the attract screen, as it must harmonize with exhibition design and visual narrative.

goal three
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.

goal four
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.

Comparison, two ways

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.

Usability testing

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. 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.

What's Next?
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:

1. Early prototyping helps the team understand and make choices about content: how will a user interact with it, how can we orchestrate an engaging experience, how much to ask the user to read and how to coordinate ideas in a non-linear experience. Writing this interactive took LESS TIME and less drafts because of these early decisions!
2. It's possible to pull off a "unicorn" role - being both designer AND developer - with today's coding tools. Because I did both design and dev, I was able to render the exact design and animation I wanted to craft, quickly and efficiently.