Mock Chatbot & Data Visualization

An accessible museum kiosk that also works on a visitor’s phone and accompanying charts, for the most visited museum in the United States.

Problem

The Smithsonian’s National Museum of Natural History had been dreaming of an exhibit about cell phones for about a decade before tapping Northern Lights Productions (NLP) to help bring it to life. NLP, in turn, needed a web expert to build one of the main interactive pieces in the exhibit: a series of mock “chatbot” kiosks that asks visitors questions and, elsewhere in the museum, a display of aggregated results. In addition, the Museum wanted visitors to be able to access the chatbot experience from their phones - if a kiosk is occupied, a visitor can scan a QR code and have the same experience as one using a kiosk.

Solution

The backend selected by the client was Drupal 9 to fit with their current workflows and developer expertise. While I didn’t need the full content management power of Drupal, I created a custom module that serves a React app and provides JSON API endpoints for collecting user responses and processing the data for display.

The React app was the primary product, addressing the challenges set by the dual environments of the kiosk and the phone, as well has the high bar for accessibility.

For the kiosk, I created an Electron application that launches a browser window to the same web page that could be accessed on a phone, and communicate directly for separate logic between the environments.

Accessibility was focused on improving the experience for the vision-impaired, and consists of an announcer system that differentiates between the kiosk environment and the phone environment. On the kiosk, I utilize the browser’s text-to-speech API with a custom wrapper to enable additional functionality not provided by the browser, such as speeding up or changing the volume of speech mid-sentence. On the phone, I utilize native browser accessibility features and shadow the more dynamic (but less accessible) React app with a more-accessible, hidden, vanilla JavaScript mini-app.

The data visualization is a slideshow-style application that I animated using React Spring and uses Highcharts for an accessible charting library. This uses the same accessibility scaffolding as the Chatbot.

Results

The results are available to view from the National History Museum - the next time you are in Washington, D.C, you should check it out!

Despite many challenges on the client side during construction, both my immediate client (NLP) and my ultimate client (the Museum) reported that they were very pleased with the product, with no required maintenance after opening. In fact, I’ll be continuing work on this product by adding functionality to enable the Museum to ship an app to additional museums around the world who would like to create their own mini-version of the main exhibit. While the opening encompasses a great deal of work beyond my own contributions, it has met with positive reviews from NPR, The Washington Post, and others.