Tangerine Development

Every year in March at their Einstein Gala, The National Museum of Nuclear Science and History gives out the National Award of Nuclear Science & History to an individual who has made significant contributions to the nuclear field, either through direct research, historic preservation, public policy, and more. Previously they hung plaques on the wall of the lobby, but after over 20 years of giving out the award, they ran out of real estate on the walls. They asked me to program a kiosk program that would allow people to read more about not just these amazing people, but also their previous trustee leaders and outstanding volunteers as well.

The museum wanted the kiosk to have two components - a smaller touchscreen, and a larger monitor to mirror the content. This ensures both ADA compliance (people in wheelchairs can use the kiosk) and greater impact with the bigger screen. I thought that a pseudo-mirroring scheme would be best because otherwise people might see UI elements on the large screen and assume it was a touchscreen. This was a bit easier said than done, as usual. Haley Wakefield, my go-to user interface designer, created the UI for this program to ensure that the role of each screen was as clear as possible to visitors and was professional and compelling.

A short sample of the attract screen animation - it cycles through all of the award winners.

I used Electron to create an application with two windows that communicate with each other and synchronize content, then I used CSS to change the display of content based on whether it was the touchscreen or auxilliary monitor. For the most part, the touchscreen called all the shots. The only exception to this rule was in playing videos, which led to some tricky UI challenges. We wanted to only play the video on the large monitor and only pass the timestamp to the touchscreen. Playing the same video on both screens would lead to syncing issues that would make for bad user experience.