Background

The Birmingham Museum of Art (BMA) houses a diverse collection of more than 26,000 paintings, sculptures, prints, drawings, and decorative arts dating from ancient to modern times. Their mission is to provide an unparalleled cultural and educational experience to a diverse community by collecting, presenting, interpreting, and preserving works of art of the highest quality. 

SmART Guide

Coinciding with BMA’s contemporary collection exhibition opening (Third Space) we designed and developed a Smart Guide that users can leverage to learn more about artworks on display. 

The Vision

When it came time to replace their previous guide, BMA let us know they needed to create a helpful, but not necessarily linear, way for visitors to tour collections of artwork.

Their vision for the guide, based on internal goals and discussions, included the following:

• A mobile-first way to browse the museum’s collections, while in the museum
  
• Ability for admins to manage the tour from one (existing) WordPress install
  
• Integration with BMA’s online collection and associated meta data (leverage existing data)
  
• Ability to seamlessly present rich media and audio to visitors
  
• User-friendly links to external, related content
  
• Flexibility for users to bounce between pieces of art at random
  
• Flexibility for site admins to frequently update content

As we discussed these elements in detail with BMA, we realized that they envisioned an “app-like” experience for their visitors, and this really excited us. Our gameplan became

1. meeting every element of their vision in-browser
2. via an app-like interface.

To kick things off, we buckled down on some mobile mockups (based on the recently revamped site and existing brand standards) and identified a design for the interface.

We shared these designs with BMA via Invision (where they could easily view and comment on design files) and then incorporated their excellent advice into a round of revisions.

After a few iterations, we nailed down a firm design direction and turned toward development.

The Framework: React + WordPress REST API
In choosing between several framework options, we knew our setup needed to:

• Pull data from the existing WordPress install
• Manage large audio files
  
• Handle and display many images
  
• Provide an app-like interface
  

The first and last bullet points in particular led us to choose React and the WordPress REST API for the job. Why these two? The WordPress REST API let us give BMA the same admin and content-management experience they’re familiar with, while React allowed us to spin up the super sleek user interface BMA envisioned.

On a more technical level, all stops for the guide are stored in WordPress as custom post types. The guide itself is a React app that fetches these stops through the WordPress REST API.

Note: React is a JavaScript library that’s really handy for building user interfaces. The WordPress REST API (application program interface) allows developers to more-or-less separate the WordPress backend from the WordPress frontend. The API in particular is what allows us to use both WordPress and React in this project.

Attention to Details
While the overall setup is pretty cool and a testament to how flexible WordPress is, we also paid a good bit of attention to the finer details that helped define both the user and admin experience of the guide.

Upfront Loading
When a visitor navigates to the guide, the longest pause they should ever experience is their first second or so (don’t worry, there’s a nice background and a custom loading state). This is because we load all stops upfront so there’s very little delay when users open other stops along their tour.  

Custom Loading State
Upfront loading definitely called for a unique loading state. We knew we wanted to use something other than a standard spinner, but that “something” also needed to be on-brand and match existing styles and colors. After talking through a few animation ideas, we decided to animate a svg of their logo, via CSS, for the loading state.

Content Syncing
To make use of the data already available on the BMA website, the guide automatically imports a default set of fields for each piece of art. For example, if a BMA admin selects “Work A” to add to the guide then images of Work A plus the artist’s name, title, medium, date and credit line associated with Work A are all automatically added to the guide as well. This minimizes the amount of effort it takes admins to create a new stop.

Pinch Zoom
For visitors who value details, we added zoom functionality and an icon denoting zoom functionality to all images. Tapping the icon pulls up the image up in a modal, where users can then pinch the image for zoom capabilities.

Analytics
To help the museum understand how users explore the guide, our development team added Google Analytics event tracking to most specific interactions. This means that user interactions with the guide, like viewing a stop, opening a modal and listening to an audio piece, are all recorded as an event (as a specific action the user took). We also paid particular attention to the museum’s iPad users. In that specific use case, we reset sessions so that each individual user is counted in the museum, even if all visitors use the same iPad that day.

The Result
Users can access the React app, called the Smartguide, at artsbma.org/guide. When a user first arrives at the guide, they’re greeted with some friendly copy and a prompt to enter a stop number. Stop numbers are located next to pieces throughout the museum.

This approach, as opposed to listing all available stops or a suggested first stop, is based on the assumption that visitors will navigate the gallery in a nonlinear fashion. Since they’ll be bouncing from piece to piece (as opposed to moving sequentially from piece A to piece B and so on) their primary need to is to explore the stop that currently interests them.  

For this reason, we also built accessible transitions into each stop page. Via the right hand corner of every page, visitors can enter a new stop number at any time. Tapping this area automatically opens a numeric keyboard on iOS.

Sara Cannon is a Design and Digital Strategy Consultant, UX/UI Designer, Creative Director, & Artist.
Have a project I could help you with? Contact me at sara@saracannon.com.