Have you ever wanted to build a touchscreen wall?
Akron Children's Hospital
Using WordPress, a modified version of Google Chome, and an enhanced web server configuration, we helped build a completely user-controlled 5-panel touchscreen wall in the entrance of the hospital.
Project Completion Date
March 17, 2017
Managed Web Hosting
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
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?
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.