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 floor’s layout and where to find a specific resident company. To display an easily 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 an awesome table allows for anyone with a link to be able to update and append the notifications that appear at any time using a simple-looking excel spreadsheet. Above a dropdown was set up 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 is 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 an awesome table allows for anyone with a link to be able to update and append the company directories at any time using a simple-looking excel spreadsheet.
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 log in 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."