Siddharth Hariprasad

Process

I began the process designing the digital signage. Each panel was designed and made to follow the pre existing durham college branding.

Once the layout was ready, I moved on to designing and developing each of the panels.

I began with creating the GSAP animation advertisements. Each advertisement was created with the college students in mind, which is why I chose Coca Cola, Burger King and the College E-Sports lounge.

Each ad was created as SVGs in illustrator and animated scene by scene. They are setup, so they loop seamlessly.

Next step involved creating the icons for the weather conditions. I kept it simple and made it easy to understand, eliminating the need for a word descriptor.

Once the weather icons were designed, I moved on to developing the pane. I took an approach of scraping data from a publicly available weather app and storing the required information, such as the day, weather condition, high and low temperatures into the database. The scraping code runs anytime the admin page is loaded, automatically updating the digital signage with the latest data.

In a future update, I could make the weather data update on a daily basis, thereby eliminating the need for going to the admin page for updating the weather.

Next I moved on to creating the three motion graphic video ads. I chose Tim Hortons, Burger Kings and Durham College Mental Health PSA. The reason, once again being that the intended audience is college students. The videos are placed in the signage as an embedded youtube playlist that loops.

For each video, I curated the required images and textual content, then came up with a storyboard and then proceeded to create it using after effects. Care was taken to make sure each video followed the pre-existing brand respectively. The goal was to make the videos look as close to one that the respective brand would release.

Next I moved on to designing and developing the new pane and the ticker tape. The news pane uses the slick slider to create and destroy slides as required, reading data from the database. While the ticker tape is done using CSS animation and pulls the data from the database as well.

Both the panes were designed to follow the durham college branding in order to maintain the consistency and flow of the signage.

Once the front-end of the digital signage was completed, I moved on to developing the back-end for it. I used Javascript and PHP (using AJAX) to fetch data from the database and load it onto the appropriate panes.

The back-end also involved the development of the admin page that will help the admins easily update the data for the different panes, be it weather, GSAP animation advertisements, youtube motion graphics video advertisements, news or menu on the ticker tape.

I also added login to ensure security and that only admins are allowed access to the admin page, since the data edits directly changes the data on the database, from where the front-end pulls the data.