Visitor Badge System

Product brief

The objective of this project is to design a fully functional system for visitors to fill out their details upon visiting the SAP office buildings, to generate a printable badge, and a dashboard report for analysis of this data.

Approach, the process & outcomes

I first had to gather the user requirements from the Facilities department and build a basic prototype of the features it will contain. After doing this, it was left up to me to decide what programming language I should use to implement this system. 

The stack of languages was HTML & JavaScript for the frontend development, and PHP as the scripting language for the backend, connected to a MySQL Database.

Rather than creating dashboard charts from scratch, I decided to make use of an  API(application programming interface) from Google Charts by setting up the database  connection to the JavaScript Classes defined by Google API and writing commands to state  which data it should take as an input for chart conversion. This ultimately saved a lot of time which was needed since the web application needed to be deployed urgently After completing the full front and backend, I gave another demo to the  Facilities team who were happy with the outcome of the web application.

Design decisions

Above is a a sample of the web application, showing the homepage which is first displayed to users. Upon clicking on the touch icon, the page transitions to another in which the visitor will have to fill out their details. Upon submission, a thank you screen is displayed before looping back to the homepage. The background and logo remains the same to ensure consistency and to follow branding principles.

The background includes the colour orange, which evokes the emotions of positivity, determination and energy, leading to impulse purchases by consumers. It also contains various shades of blue and this is known to cultivate a sense of trust. The brief was to ensure visitors feel welcomed by SAP and by using an image depicting a scene from nature, this creates a warm, inviting sentiment. Of course, I had to be careful with the selection as I didn’t want to the content to be swallowed.