An audio-visual touchscreen experience for the Universal Hip Hop Museum in NYC.

TIMELINE

6 months

ROLE

Designer, researcher, front-end developer

TEAM

Professor, doctoral student, project supervisor, PixelLabs

TOOLS

TunesMap, Bootstrap4, HTML/CSS, JS, SQL, Flask, Azure Chatbot

IMPACT

Created first prototype, Curated playlists, Co-authored in final research, Experience viewable in the UHHM

The Breakbeat Narratives Exhibit is a collaboration between the MIT Center for Advanced Virtuality's ICE Lab and the new Universal Hip Hop Museum in NYC.

Through this touchscreen tablet experience, museum goers learn about the history and culture of hip hop. The user feedback gathered from this experience formed the basis for my supervisor's doctoral research.

STEP 1: RESEARCH

Who is our target audience?

We envisioned having visitors of all ages from around the world and nearby Bronx, NYC who would visit our ‘Breakbeat Narratives’ exhibit to learn more about hip hop culture and history.

Wireframing the user flow:

I created this initial sketch to outline our two main user experiences.

1) Yellow Arrow: Minors (younger than 18) or adults who do not consent to the user survey would skip the post survey questions so none of their data would be collected for research purposes.

‍2) Green Arrow: Adults who consent to the user study would answer post survey questions and agree to have their answers saved for future research.

To simplify the experience, we removed the “Explore Narratives” ending screen so that the next visitor would not be overwhelmed by all the narratives and would just go directly back to the home page to start the experience again if they wished.

STEP 2: PROTOTYPING

First Prototype

I developed this initial prototype to implement the user flows and test the database backend.

To display all the custom narratives our team had developed on TunesMap, I linked the TunesMap API to our front end. This experience was later made responsive for the 55 inch Microsoft Surface Hub Tablet so users could interact with the narrative via touchscreen and listen to the custom playlist with bluetooth headphones. This video shows the web version without the touchscreen element.

Second Prototype

After showing our initial prototype to the UHHM Museum, we integrated their feedback in two ways:

1) We changed the order of our survey questions
We initially asked users for their age in order to determine their consent for certain questions. To give users their curated experiences faster, we moved this question to the end with the other post-survey questions and only saved the answers to post-survey questions based on their age and consent. We hoped that giving users their curated experiences first would make them more inclined to answer the survey questions afterwards.

2) We integrated a Microsoft Azure Chatbot
Moving between questions in the initial prototype involved reloading the page each time which was clunky and interrupted the flow of the background music. To fix this, we embedded the survey questions within a chatbot which made the experience more conversational. The Microsoft Azure Chatbot we used also had a built-in integration with Microsoft Azure Blob storage which removed the need for database maintenance via mySQL and Flask that our original prototype relied on.

1) Welcome: You are invited to begin the experience by pressing the red “BEGIN” button on the home page.

2) Meet the Chatbot: The chatbot introduces the hip hop elementals. You respond with the virtual tablet keyboard.

3) Audio-Visual Experience: Based upon answers to the chatbot questions, you are given the custom narrative "Fashion: From the Streets to Fashion Week" along with a custom playlist. Click "DONE" to return to your conversation with the chatbot.

4) Chatbot Farewell: Upon finishing the experience, the chatbot asks you how you felt before sharing the QR code of the custom playlist. You can now scan the QR code and take it home as a keepsake of the experience!

STEP 3: FINAL EXPERIENCE

Final Changes:

1) Using Spotify instead of Soundcloud
Our project was initially deployed with Soundcloud playlists as shown in the second prototype as they allowed us to work around a glitch with connecting via Spotify. However, once deployed we found that the Soundcloud audio was not compatible with the Microsoft Surface Hub Tablet and did not play. Thus, we switched back to Spotify playlists, and we fixed the initial bug that we had experienced with Spotify.
‍

2) Creating our Color Scheme and Typography
Our team hired professional artists John Jennings and Stacey Robinson to design custom artwork that would capture the spirit of the Five Hip Hop Elementals. With the guidance of the UX team at the MIT Center for Open Learning, the unique color scheme of the website was created to match the colors of the characters.

Final Demo:

This project debuted at the Universal Hip Hop Museum on December 2nd, 2019! In the photos below you can see how the final experience looks on the Microsoft Surface Hub Tablet. In the first photo, a visitor interacts with the touchscreen experience. In the second photo, a visitor shows the playlist they received after scanning the QR code. The last photo shows our team interacting with the space. It was incredible to see the digital project we had helped develop come to life in a physical space!
‍

Project Reflection:

It was incredible to see the product come to life from scratch, from the initial prototype I helped build, to the final project that was developed by the third party web development company Pixel Labs. Our work has been featured by Microsoft here, and my supervisor's paper was accepted to the 2020 CHI Conference, where I am honored to be featured as the fourth co-author here.

‍You can now view the live website here. Or better yet, visit the UHHM in person for the full touch screen experience!