Web Design and Development done right. Intelligently Built Websites for the Internet of Tomorrow

Five 60" Touchscreens combined to create an immersive timeline

Akron Children's Hospital

Akron Children's Hospital consulted with us to create a development plan to build a 22-foot touchscreen installation at their entrance to celebrate their 115th anniversary. In collaboration with AKHIA and Zenith Systems, we delivered a unique visitor experience.

Project Completion Date

March 17, 2017

Client Location

Akron, Ohio

Services Provided

Web Development
Managed Web Hosting
Installation Services
Touch Development

Client Industries

Health Services

Team Notes

This project was an amazing opportunity for us to combine our touchscreen development skills with our web development skills.

Learn about our process on this project.

Consultation and Planning

As we began the project, we worked in close collaboration with Akron Children’s Hospital, AKHIA, and Zenith Systems to fully plan out the project. As it was a multi-faceted project in terms of skill sets involved, as well as requiring physical modifications to the hospital entrance, careful planning was required. AKHIA was in charge of the design of the user interface for the project as well as working with Akron Children’s Hospital in gathering content. Zenith Systems provided the hardware expertise needed and worked with us to determine what type of systems were to be developed.

To guarantee that the interactive timeline display would work flawlessly upon installation, we built a prototype layout for the project and then stress-tested multiple methods of building the timeline. After doing so, we were able to provide exact specifications for the hardware we would require to achieve our goals.

As the last piece of the puzzle before beginning, we worked closely with the marketing team at Akron Children’s Hospital to select an open-source CMS that balanced performance, ease-of-use, and cost. The chosen platform was WordPress which leveraged a highly-customized administration section to cut down on administrative time.

Developing the Application and Content Management System

After the final architectural plans were submitted and the hardware was ordered, AKHIA was able to finalize the direction of the user interface which was then passed to us for development. We began shortly thereafter in our build.

Solving the “Separate, but same display” problem

The biggest challenge faced by our development team was implementing the idea of “panes” into the system. While the system was going to use five separate 60″ touchscreen displays, it would only appear that way to the user – the interface was actually just a slightly modified version of Google Chrome running in fullscreen. We leveraged some custom JavaScript to handle touch detection within each “pane”, or display, and were then able to target each display individually which gave the impression of independent controls.

Designing the Failsafe Controls

Now that we had the system working, we shifted our focus from developing the UI and CMS to handling edge-cases that could affect the displays in the real world. Our considerations were the following:

What if the computer running the screens restarts?

To address this problem, we did on-site testing at Zenith’s headquarters. We implemented Windows Scripts to automatically connect to the internet, launch Google Chrome, navigate to the server that was hosting the site, and load.

What if the server running the screens goes down?

We developed a system to automatically restart the server and configure itself to come back online. It would then text us that it had gone offline so that we could address the issue instantaneously.

How do we issue “refreshes” of the system when new content is issued?

Using another script, we configured the site to refresh itself every night at 2 AM. Alternatively, if the marketing team at Akron Children’s Hospital needed to make an immediate change and refresh the system, we implemented a “Refresh Now” button in the WordPress administration area. The nightly refresh also eliminated the possibility of JavaScript memory leaks in Chrome.

How the UI Works

Essentially, there are three key “panes” that appear in the UI with variants of each. These are the timeline view, the decade category listing, and the decade which contains a listing of all of the events.

The timeline view appears across all five displays, which are segmented into groups of years meaning that the first display contains information from the 1890s, 1900s, and 1920s. The second has the next three decades, and so on. Within each display, three unique facts are displayed that appear in random order and are color-coded with an icon indicating the category in which they reside. If one is touched, a user on only that display is taken to the category screen for that decade that lists out other facts.

The decade category listing is a screen of four panels that allows the user to see the four categories and a random fact from each category. If one of those is touched, the category screen for that decade is then shown.

Finally, there’s a category screen for each decade which lists all facts related to it. Throughout all of these screens, navigational controls are present to allow a user to quickly and easily jump through the vast amount of information.

And, lastly, we configured a two-minute timeout on each display so that if it was left inactive, it would default back to the standard timeline view.

Installation and Testing

After we finished our base development and testing, it was time for the on-site installation and final testing. We arrived at the hospital and quickly got to work. We had worked with AKHIA to parse all of the facts into a nicely formatted Excel Spreadsheet. We then used a custom-built import tool to parse the information efficiently into the custom CMS – cutting down 30 hours of data entry into a 30-second upload.

We then spent the rest of the day attempting to break the timeline in any way possible. After ensuring everything was functional, we officially launched the project.

Take a look at how it turned out.