NMAACH Audio Tour

Date: September 8, 2017
Category Mobile Application
Client Clearly Innovative

In the spring of 2017, while working at Clearly Innovative, I was fortunate enough to assist on the design and development of an audio tour application for The Smithsonian National Museum of African American History and Culture. Our team was tasked with creating a modern audio tour experience for the iPod touch. Our goal was to mimic some of the common functionality from podcast and music players, while maintaining the NMAAHC branding that Clearly had developed on their previous project, Mobile Stories.

On the team, my role was to design and build the front end of the application in Swift 3.0. In the design phase, I worked under the lead designer to generate wires and to organize small user testing experiments. To do this I used Principal to create various interactions and animations. Following the departure of the lead designer I took over the role and managed the transition of the design from low to high fidelity.

To speed up the transition I began building the interface in Xcode so we could begin running our interface tests on devices. My role on the development side was to complete the interface and to build in state machine functionality using ReSwift. The lead developer built in the caching functionality while my second teammate built the back-end.

This project was a great experience to implement the full breadth of my skill set and is due to be in used at the museum this Spring.

These are the initial user flow options for the application on both low and high fidelity. The challenge was to determine where to place the introduction to each exhibition and the transcription of the audio files.

After meeting the client we a made the decision that the audio should be split into chapters to allow for more targeted navigation. To handle this we created new mock ups to illustrated how the chapters will be organized and utilized drop-down organization to hold the audio transcription. After approval this became the final flow of the application.

As the low fidelity design process was coming to a close, I begin work on the first functional prototype. The goal of this was to test out some features we had spoken about and to give the client something physical they could begin to interact with as we moved to finalize fonts, colors, etc.

Features shown above from left to right: Auto-scrolling text with audio, dark mode for the dark areas of the museum like projection areas etc., and text-sizing for ease of use for all visitors.

Along with the UI of the application I was tasked with executing the indoor mapping feature. To do this I used GeoJSON mapping data provided to the museum by Apple and then illustrated a set of maps. The data also allowed me to place the illustrations directly onto a MapView to allow for indoor mapping through the tour experience.

These are the final illustrated maps used within the application.

nmaahc_b2b_01
nmaahc_b2b_04
nmaahc_b2b_05
nmaahc_b2b_06
nmaahc_b2b_07
nmaahc_b2b_02
nmaahc_b2b_03

These are the final wire frames of the application.