WELCOME TO
5155 FINANCIAL WAY

Mason Tech Center

Touch Screen Directory

Applications Utilized

Challenge

To create a digital directory experience for guests and visitors to the Mason Tech Center building and to do it only utilizing current available resources and hardware, meaning no budget.

My Roles

To design and implement a planned solution for the lobby of both 5155 financial way and 5412 Courseview Drive, Mason Ohio. Code and build a web based experience to be played on the touchpanels running windows 10. Requirements: To allow for an easy way for current occupants to display notifications on the home screen of the touch panels, to display events taking place in the building by whom and where they are located. to display each floors layout and where to find a specific resident company. To display an easy updateable directory for each business located at that location.

Solution

Interactive Touch Screen Directories for
5155 Financial Way & 5412 Courseview Drive

Home Screen

To prevent burn in a simple fade in and out animation was used for the Mason Tech Elevator logo and "Touch screen for directory" text. A codepen starfield animation was edited and added with pure html and css to add some additional motion. A redirect timer is in place so when an individual walks away from the touchscreen and it's inactive for two minutes it will refresh back to the home screen animation.

Awesome Table

On the home screen page I embedded an awesome table into an iframe and restricted who could add to and remove information. Utilizing awesome table allows for anyone with a link to be able to update and append the notifications that appear at anytime using a simple looking excel spreadsheet. Above a dropdown was setup that automatically filled out the appropriate company logo to appear once a company name was selected. A total of five notifications can run simultaneously but on average no more than one to two is ever used this way.

DAKboard & Google Calendars

By creating a DAKboard and utilizing the built in google calendar linking function an events screen was created and embedded via an iframe to display the daily events. A weather API was also added below the events calendars via a key to weather underground but was later taken down due to frequent maintenance updates. Imagery is pulled in through a link to google photos and are updated every two minutes.

Vector Art & Webflow

The vector art was created in adobe illustrator based on several autodesk CAD renderings. The company location pages were created using webflows built in html and css animation functions. The screen capture video displays how when one location is touched the walking path to that location from the current display is shown.

Awesome Table / Employee Directory

On the employee directory page I embedded an awesome table directory into an iframe and restricted who could add to and remove information. The company name drop down allows for a quicker search for an individual by limiting to one or a few companies. Utilizing awesome table allows for anyone with a link to be able to update and append the company directories at anytime using a simple looking excel spreadsheet.

Result

Touchscreen Directories at 5155 Financial Way
& 5412 Courseview Drive

The directories have been adopted and are utilized daily. The updates are simple and easy to perform as personnel changes and companies move in and out of 5155 and 5412. The technology in place to support the touchscreens is surprisingly simple to maintain and support. With the addition of Rise Vision™ added after the project was completed, I am now able to login to see the current state of the display from my desktop and reboot any of the displays if necessary.

"That looks really nice.  Great Job!  Nice data backend.  You are quite talented and your skills continue to grow."

- J Steven Osborne
President & CEO
Top Gun Sales Performance