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.
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.
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.
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.
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.
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.
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.