Case Study: An Interactive Touchscreen for Harte

a user selects the directory of the touchscreen

While building a brand new Drupal site for Harte Research Institute for Gulf of Mexico Studies we discovered they had a large touchscreen display that wasn’t living up to its full potential. We realized we could create two different frontends, using both Drupal and React to make the most of their website and their touchscreen too. The project goals were to create a friendly, inviting, and intuitive interface that people would enjoy using. The touchscreen also needed to be easy to update for administrators, without any dev involvement. 

The touchscreen was being used as a directory of sorts for the building and ran on a proprietary software they paid a monthly fee to maintain. That touchscreen could be navigated via clunky left and right navigation arrows and was very slow to load. In addition, updating content required developer time, and due to its very controls-heavy interface, was difficult for visitors to use. After experiencing the fresh, intuitive site we’d built for them, the team at Harte imagined a much friendlier experience for the touchscreen in their lobby.

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.

We were game to see if we could deliver this experience, and eager to see if we could somehow tap into the Drupal site we’d already built to make it happen.

We started by researching hardware options and interactive screen interfaces. There were a few options, but most screens we found were limited by the same controls-based navigation that made the original touchscreen so cumbersome and dated. If we were going to build a touchscreen, we wanted it to be as intuitive and responsive as a mobile experience.

We also determined that third-party apps and subpar touchscreens weren’t going to cut it, until we landed on a product that allowed us to replicate the speed of a native mobile experience without the lag. The vendor produced a giant touchscreen that promised to replicate the experience of an iPhone using their proprietary software. The irony was that this solution was eventually scrapped and the beautiful iPhone aesthetic we had been looking for was achieved by… a Windows box! The windows computer displayed the site beautifully and the built-in drivers for the touchscreen overlay translated gestures and taps into scrolls and clicks better than the software ever had. With a few adjustments to enable kiosk mode and Chrome running fullscreen, we now had a beautiful place to display and interact with a website.

Realizing we were no longer restricted to app-based technology, and could instead use a browser to display the content, we were freed to do what we do best: create an ambitious and elegant digital experience, using the client’s beautiful new Drupal 8 site.

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

Drupal is great for storing data, but it’s not the best choice for displaying it, especially in an instant-load environment like a touch-responsive screen. For this, we would need to go outside of Drupal, we needed the display power of React. The plan: we would retain the Drupal frontend for the website, and pull in React to load the touchscreen content.  

two front ends

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.

When you walk in the lobby at Harte Research Institute for Gulf of Mexico Studies, the touchscreen offers a simple, interactive way to find an office, locate a campus building, or see details of any upcoming events in the space. On the touchscreen, 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 the user in.  

a video plays in the background

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.

a directory with alphabetical shortcuts

Much of what is available on the site has been pared down, 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 simply want to know that person’s office number and how to get there.

This leads us to the map - a beautiful, tactile wonder. Beyond the typical, “You are here”, the map is as responsive 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 to them.

an interactive campus map

The touchscreen and the website have a similar, but divergent aesthetic. While the website is more traditional in appearance, 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.

There were so many great opportunities to level up our React knowledge on this project. One example was implementing the beautiful animations our resident awesome designer created. Because we wanted to level up, as well as create something awesome for our client, we learned the first principles before turning to helpful libraries created by other developers.

faculty information in the directory

Creating the touch screen not only let us learn how to bring an entirely new interface to decoupled Drupal, it also let us create a unique and useful interface to help our clients in a super specific way. Nothing makes us happier at Amazee than when we can make our clients happy while learning something new. Check out this video of the touchscreen and the Drupal website here.

the touchscreen installed at Harte

“As a large research institute that hosts visitors and scientific meetings, we needed a digital directory to greet people who walk into our building when we sometimes can’t. Amazee previously designed our well-received website and built out our large touch screen directory on that platform. It syncs with the employee profiles we already have on our website, allowing visitors to quickly find someone they might be looking for in our building, and offers our visitors some new content like an interactive Google map of our campus and nearby stores and restaurants.” --Nikki Buskey, communications manager, Harte Research Institute for Gulf of Mexico Studies at Texas A&M University Corpus Christi

March 28, 2018
Tags
1 Comment

Get our Newsletter

 
 

Comments

Thank you for a real world example of the use of React and Drupal. The elucidation of the design goals gives one an inside view of the why and how of the technical choices.

By John Taylor
6 months ago

Add new comment

You must have Javascript enabled to use this form.
icon
What is Amazee Labs?