Beacon-Enabled Museum App

In the fall of 2018, I began my job as the Exhibit Preparator at The St. Augustine Lighthouse & Maritime Museum. Some months prior to my start date, the Museum signed a contract to implement site-wide beacon technology with the hope of providing visitors with an additional avenue to learn and explore. While my primary role in the project was to create content that would be uploaded to the beacons, I quickly became fascinated by the prospect of also designing the app.

Unfortunately, I left the organization before the application was fully developed, but I have used this experience as a jumping off point to further study UX/UI design. The following case study presents my contributions to the early stages of research and ideation and ends with design mockups that I created after resigning from my position.

Context

The St. Augustine Lighthouse has a rich history that traverses the Spanish Colonial Period, the American Revolution, the Civil War, and the modernization of Florida. Not only is the site rich in history, but also cultural heritage. Hosting a team of archaeologists through the Lighthouse Archaeological Maritime Program (LAMP), the Museum is often engaged in excavations that reveal stories about Florida’s coast and beyond.

Despite the abundance of stories, the site struggles with spatial constraints and keeping visitors engaged.

The Challenge

The Museum needs to expand its offerings in a way that is both engaging and mindful of spatial constraints. Visitors need a different way to explore the site that not only gives them ownership of their experience.

The Solution

Beacon technology would not only allow visitors to interact with the site, but would also allow for self-guided exploration. At the same time, a mobile app presents the Museum with an opportunity to optimize revenue, increase its social media presence, and track visitor engagement.

Beacon Technology

Beacons are small devices that use bluetooth low energy to send information to nearby, bluetooth-enabled devices. When used in conjunction with a mobile app, beacons can be powerful tools for enhancing a visitor’s experience by creating opportunities to explore exhibits and access information.

Other museums have used beacons to create virtual tours. When a visitor approaches a beacon, push notifications alert the user and launch interpretive content stored in the app.

———————————

Users & Audience

Located in a popular tourist destination, the Lighthouse receives tens of thousands of visitors each year. Perhaps the most important demographic factor of the Lighthouse’s audience is age. The bulk of the site’s visitors are between ages 40 and 70, with the majority of this population representing married couples and families. Younger adults and families make-up a smaller, but increasingly important percentage of the Museum’s audience.

A key differentiator between older and younger audiences is the way they prefer to receive information. Older audiences tended to prefer detailed accounts and stories while younger audiences preferred condensed information and interactive components.

Personas

Through my site shifts and tours, I conducted a series of informal interviews that helped me learn more about our visitors. These discussions gave me more information about the different reasons visitors came to the site as well as what they enjoyed most about their visit and what would have improved their experience. I After speaking to several people, I constructed a persona, Mary, to help me think about how I could better help our visitors.

———————————

Features

Sitting down with my team, we discussed common feedback provided by visitors and brainstormed different approaches that could address these problems. Some of the proposed features included:

  1. Social media integration
  2. Game ideas and instructions that parents could try with their children
  3. Information about the surrounding area to help visitors plan their trip
  4. Clear information about tours and programs
  5. The ability to purchase tickets for specialty tours

———————————

Design Goals

Considering our audience and wish-list of features, I drafted three guiding principles that would shape the design and content of the app.

Inform and Educate

Provide visitors with additional information about the site’s history, the Museum’s activities, and the surrounding area

Inspire Interaction

Bring to life the site’s history through historical images, activities, photo opportunities, and immersive storytelling

Support Exploration

Allow visitors to curate their own experience by offering birds-eye views as well as opportunities to dive deep

———————————

User Flow

In mapping out the information architecture, I realized the app would have to support two different experiences. Centralized to the home screen functions, the first experience would support information gathering. Meanwhile, the second experience, which was rooted into the beacons, would support interpretation and entertainment.

To think more deeply about this structure, I created a flow chart that considered the user’s journey before, during, and after their visit to the Museum.

Because the home screen would precede the visitor’s interaction with the beacons, I felt it was important to also create a user flow for this experience. The flow chart allowed me to get a sense of the amount of pages a visitor would encounter and how we could incorporate some of the features we had identified earlier in our planning.

———————————

Wireframes

After getting a better sense of the type of information and experiences the app would support, I created low fidelity wireframes to experiment with different layouts and features.

In designing the home page, my goal was to provide resources that would address the key questions posed by visitors, like “What types of activities does the Museum offer?” and “How can I participate in these activities?”

The primary function of the home page is to support information gathering. By providing resources that to learn about daily programs, exhibits, and additional experiences, users are given the opportunity to better organize and plan their visit. However, this experience is completely separate from the beacons.

While the home page provides context for the visit, the beacons enhance the experience. Museums provide a physical and intellectual experience. They encourage visitors to explore galleries and other spaces, learning about different topics by reading, listening, and examining objects. In order to enhance this experience, mobile content should be immersive, interactive, and above all, it should tell a story.

As a part of my process, I studied other museum apps to dissect the ways they enhanced visitor experience. Specifically, I studied apps for the American Natural History Museum in New York, the Art Institute of Chicago, the 9/11 Memorial & Museum, the Rijksmuseum, and the technology non-profit organization, Urban Archive.

I noticed that similar apps centered audio-visual content, creating audio tours and photo galleries. I also noticed that these apps incorporated modal sheets and cards into their designs to make visitors feel as if they were truly interacting with collections objects.

To think through these different types of elements and their effects, I created wireframes for five different beacon locations. Each wireframe explores the following experiences: playing, listening, building, deducing, and re-creating.

The beacon for the maritime hammock encourages visitors to learn through play. Both individuals and groups can engage in the I Spy activity. Meanwhile, the WWII beacon encourages visitors to learn by listening by sharing captivating first-person accounts.

By incorporating elements frequently seen in social media platforms, the beacon for the lighthouse tower offers a familiar layout. The timeline of historic images allows visitors to time-travel and the interactive features enable them to feel as if they are a part of history.

Artifact cards in the Wrecked! beacon re-creates for visitors the process of maritime archaeologists. Not only does the content for this beacon simplify the didactic materials in the actual exhibition, which can be overwhelming or boring for younger visitors, the beacon also encourages visitors to play by imagining they are solving a mystery.

While the Museum’s boatbuilding area hosts a group of boatbuilders who are able to share their craft with visitors, the group of volunteers is not on-site during all visiting hours. This beacon will allow visitors learn about the building process even when there is no boatbuilder or interpreter on site. Moreover, swiping through the different stages of the building process will bring visitors closer to the craft. The background images will allow them to draw parallels between the mobile content and the construction scene in front of them.

———————————

Design Mockups

In designing these mockups, I looked for ways to incorporate the Museum’s brand. To accomplish this, I examined the Museum website and used the same colors and font types