top of page
identifyer-code-1.png

Wayfinding App

A mobile game app that streams stories and music activated by i-beacon signals as users wander through a world-class art museum. Visitors have the option to personalize their experience with Voice Memo.

THE CHALLENGE

Build a way finding app that integrates i-beacon signals and an art collections database to help visitors locate real works of art in museum galleries.

The museum has 200 i-Beacons and 240,000 objects installed throughout two floors, four wings, and 14 galleries (over 250K sq. ft. of space). Galleries are organized by geographic regions, styles, and represent 2,000 years of art and culture.

 

Our game app was the brainchild of Kotaro Fujita, team lead and master iOS Developer. He had been thinking about making a mobile game for Austin Seraphin, a Philadelphia-based developer who also happens to be blind. Austin suggested that games with stories are his favorite because stories launch imagination and feeling!

Based on his conversations with Austin, we went ahead with Kotora's vision for an audio-immersive application that incorporated original music scores to set a mood (feeling) and short audio stories to trigger visitors' curiosity. We added Voice Recording to encourage them to personalize their responses and reactions - on their own terms. At the end of the day, the app enables all visitors, regardless of their abilities, to have creative, intellectual, and emotional access to visual works of art.

TIMELINE

Six-weeks

MAKE OF THE TEAM

iOS Developer

Digital Music Composer

Experience Designer

Neural Network Engineer

GOAL

On-site user testing of an MVP.

MY ROLE

Art Direction | Audio/Visual Production

I created audio and visual content inspired by time periods, works of art, and places around the world. 

I mocked up color palettes to capture the look, feel, and mood of specific times and styles in art history. The boards helped me write entertaining 'art stories' and guided thematic music scores composed by Alex Cole.

 

I designed the icons based on Mondrian's abstract paintings. His style translates perfectly to User Experience Design. He simplified his compositions to the most basic elements of color and line – always leaving plenty of white space.

I also contributed my expertise in museum programs and beginner vanilla JavaScript by recognizing that the ToolKit library was lacking location identifiers for the i-beams. Kotaro and Deep were able to collaborate with the other engineers to find a location.json file that solved that coding problem.

Wayfinding App Mood.jp2

How It Works

Original pre-recorded music and audio

Music scores were created to fit the mood of a particular time period in history, create a mood, and pique the visitors' interest. Think opening music score of a feature film. We created four thematic scores for three branches of the museum: The Grand Hallway entrance, The Arms and Armory Gallery, and The Medieval Gallery.

 

Art stories were written in response to specific works of art installed inside the gallery branches. Stories are fun and quirky rather than didactic intended to encourage curiosity and engagement with the art.

Voice Memo encourages visitor to record a personalized message.


 

Music

00:00 / 00:43

Art Stories

00:00 / 08:18

Voice Memo

00:00 / 00:55

How It Works

i-Beam Signals, API, and pre-recorded audio

The museum's proprietary API was used to map or key specific works of art from the Collections Database to real works of art inside the gallery branches and their corresponding i-beacon signals.
 

The app "listens" for the nearby i-beacon signals as the visitors walk around.

The audio volume increases as she gets closer to the gallery entrance. The music score will fade when a visitor is out of range. A new audio file will stream as she walks closer to a work of art. To record a personalized audio file, she clicks on Voice Memo.

 

start-screen.jpg
great hall stairs.JPG
Branch_Arms_Armor_Second_Floor_1.jpg
iBeacon_Map_Second%20Floor_Armory_edited
identifyer-code-1.png
  • Facebook - White Circle
  • LinkedIn - White Circle
  • Twitter - White Circle

Demo

bottom of page