Touchscreen for Harte Research Institute for Gulf of Mexico Studies

Goals / Beginning

The goal of developing this touchscreen was to create a friendly, inviting, and intuitive interface that was enjoyable to use by non-technical users. The touchscreen also needed to be easy for administrators to update, without any dev assistance.

This new touchscreen would eliminate the need for a welcome desk, which means it needed to answer a visitor’s most common questions (who, what, where) and do it accurately, in real time. The information needed to be displayed intuitively enough that anyone wandering into the building could find the information they needed with minimal effort.

The decision to use React

Once we knew we could create the interactivity we wanted, we focused on building the structure to support it. The best part? All of the information already existed in the Drupal backend. The same content you see on the People landing page of the Harte site is the same content delivered to the touchscreen. We had both streamlined the editing experience and eliminated a redundant database. Because everything runs on Drupal, any content editor can update in one location to push to two.

Drupal is great for storing data, but for an instant-load environment like a touch-responsive screen we knew we would need to go outside of Drupal. We needed the display power of React. Because of the functionality of Drupal 8 and GraphQL we knew we could use Drupal to load the website content and React to load the touchscreen content. GraphQL is an API - a translation layer between Drupal and React. We love GraphQL because it gives developers the control of what data you get and how you get it to the person using it.

Some of the biggest strengths of React are fast load times and interactive UI. Using React for the touchscreen enabled us to display responsive, customized content for any visitor standing in the building lobby.

If we had built the touchscreen using Drupal, we would have had to build a second theme, and Drupal does not natively support multiple themes. With two completely different frontends you don't have to connect them in any way other than API. This enabled us to create exactly what would work best for the touchscreen.

Much of what is available on the site has been pared down on the touchscreen, removing clutter to make finding information quick and painless. For example, while downloading a person’s CV from the website makes sense, it’s completely unnecessary when you are standing in a lobby, simply wanting to know that person’s office number and how to get there.

How the touchscreen is different from the website

The touchscreen and the website have a similar, but divergent, aesthetic. While the website is designed like a traditional site, the touchscreen is more dynamic, with interactive, friendlier details designed to simulate a mobile app. Small design elements like the simulated weather icons add to this feeling.

The touchscreen also has built-in remote access so our development team doesn’t need to make the four hour trip to Corpus Christi if something goes wrong.

You can read our case study of the Harte website here.

Outcome

When you walk in the lobby at Harte Research Institute for Gulf of Mexico Studies, you see a touchscreen that shows you how to easily and quickly locate a campus building, find an office, or see upcoming events in the space. A silent video plays in the background of the “home” page which the user can make full screen (and enable audio) by tapping the Youtube-like play button. All of the features are aesthetically appealing and instantly familiar, inviting visitors to use it.

On the Directory, a touch-friendly Apple-esque sidebar navigation on the Directory allows visitors to jump through people on the page by simply tapping letters of the alphabet. The person’s profile can be expanded and closed using the provided X or simply by tapping away. The Directory, and all landing pages, are fully scrollable, by simply dragging your finger up or down the screen as you would on your mobile device.

This leads us to the map - a beautiful, tactile wonder. Beyond the typical, “You are here”, the map is as responsively interactive as your smartphone. Visitors can swipe, pinch to zoom and expand, and access all areas of the map with simple touch gestures. Visitors can tour the entire campus from the touchscreen, tapping the icons, and search through campus landmarks and area retail like coffee shops. You can even get directions!

The touchscreen resets to the homepage after 90 seconds of nonuse, a function that was designed to erase the history of the most recent visitor, wiping the slate clean for the next.