How We Designed an NFC System to Track Event Attendance at VandyHacks V
VandyHacks, Vanderbilt University’s annual hackathon, took place at the Engineering and Science Building on November 2018. For VandyHacks V, our dev team implemented a unique NFC (Near Field Communication) check-in and tracking system for nearly 700 attendees. Because of its overwhelming success, we thought we’d share some of our insights about its development and hopefully inspire others within the hackathon community and beyond to implement NFC at their respective events.
Why NFC?
For VandyHacks IV the year prior, check-in and tracking were done via QR codes, which had several issues that we wanted to avoid this year.
QR scanning sounds fast in theory — and can be with occasional use — but when trying to check-in hundreds of people, every second counts. In practice, the whole process turned out to be too slow. A large portion of the total check-in time per person was spent waiting for attendees to pull up the confirmation email containing the unique QR code we had sent them before the event. In some instances, this email had gone to spam :( In addition, our QR code scanner was sometimes very finicky, would take multiple tries to scan correctly, and was affected by screen orientation issues. Several highly reflective screen covers posed an unexpected challenge for us.
Scanning during events and meals was also slower than we would’ve liked. Hackers spent too much time pulling up their QR codes on their phones, and some people didn’t carry their phones with them everywhere. This led to inaccurate data collection because not every person at a particular workshop or meal had their code scanned.
Another common frustration of last year’s QR code scanning system was that it drained VH board members’ phone batteries incredibly fast because it essentially used the camera to scan hundreds of times per second to detect QR codes. Furthermore, “walk-ins” (people that didn’t register beforehand) didn’t have a QR code generated ahead of time because they registered on the spot, and were not able to be marked for attendance at events.
For these reasons, we decided to rethink the entire process and agreed, after lots of deliberation, to use NFC technology instead of QR codes for this year’s VandyHacks V.
NFC is a short-range wireless connectivity standard that allows for an instantaneous way to transfer information between two devices. By design, it is significantly faster than using QR codes, or more broadly, any system where code scanning is required. By pairing NFC enabled wristbands with inexpensive RFID scanners, we were able to mark attendance at any event with the simple tap of the wrist. As a consequence, the data we have for the entire weekend is more reliable, less error-prone, and most importantly, will allow us to forecast future turn-out for those same events.
Hardware
Two key pieces of hardware were required for our NFC tracking system to work properly:
The first of these is the actual NFC chip which came embedded in plastic wristbands sold online from GoToTags (currently unavailable). NFC tags come in five varieties (Type 1, Type 2, Type 3 etc.), each with its own unique features, performance, cost, and availability. The GoToTags wristbands contained a Type 2 NFC chip, specifically with NTAG213 encodings. We ordered 1000 wristbands — 200 orange and 800 blue — with the intention of handing out orange colored wristbands to people with dietary restrictions (vegetarian, vegan, etc.) and blue colored wristbands to people with no dietary restrictions. This separation allowed organizers to easily distinguish between the two colors and let people with dietary restrictions go first in meal lines. The wristbands cost approximately $1.00 per unit, which understandably might be cost-prohibitive for smaller events and venues. Do note that ours were customized with the VandyHacks logo — the cost would have been less for non-customized wristbands.
These NFC wristbands were read via RFID scanners bought from Amazon, the second component of this system. NFC chips are compatible with all Smart Card infrastructure, so in theory, any RFID reader could read these tags. We were able to take advantage of this compatibility by buying around 15 card readers at very reasonable prices since RFID is a more established technology than NFC.
Software
This hardware is great, but in order to use it to collect useful data from attendees, we needed some sort of interface to associate each wristband with a person and record event attendance via NFC scans, with a fallback. We knew we wanted to use the platform on both mobile phones and laptops, so we decided to build a web app.
Frontend (webpage)
We decided to implement only the most necessary functionality; there wasn’t any point in over-engineering the app since it would only be used internally. We ended up using vanilla JavaScript, HTML, and CSS webpage without any external libraries/dependencies (although we do plan to eventually rewrite it using React). View the open source code here.
Backend (server)
We used our hackathon registration backend to serve the API that had several HTTP endpoints for registering and recording users during events, among other functionality. Our backend server is a heavily modified version of the Quill Hacker Registration System from HackMIT, which is built with Node.js, Express.js, and MongoDB. View our fork of Quill here.
Because of its overall simplicity, it took two developers less than a month to write the entire application. We didn’t have to learn any new APIs or technologies since the NFC scanner that we used can emulate text input. Additionally, because this was just a straightforward web app, it didn’t drain phone battery any more than normal usage would. This was a huge improvement over last year’s QR code scanner.
The UI or user interface is uncomplicated for ease of use — it allows the user to select an event to scan for, including check-in which is a special type of event. Operators can either scan an NFC wristband, which automatically populates that text field and submits, or in “manual search” mode, operators can use fuzzy text search to search for a particular user by either last name, first name, school, or any combination of those fields. This is useful if the person doesn’t have an NFC wristband and allows us to account for everyone. The “unadmit” mode allows us to unadmit users, which is usually used when a mistake is made somehow, or for special administrator operations.
Event Usage
Thankfully, the entire NFC system worked flawlessly for the most part during VandyHacks V! We ended up with very reliable data on event attendance at every single one of our events — meals, workshops, you name it. In fact, we were confident enough in the system’s usability that we decided to allow bus leaders to utilize it. This allowed bus leaders to check in hackers as they were boarding the buses to come to VandyHacks. It also gave us a good idea of how many people were going to show up from the schools to which we sent buses, and important statistics several hours before the event. Because our app was created with ease of use in mind, we were able to train several volunteers, some of whom didn’t even have a technical background, in around 15 minutes to scan wristbands using the app.
Scanning was also extremely fast. We had designated board members carrying scanners for each event who would walk down the lines during meal hours, scanning people faster than they could get food. At workshops, we assigned one or two people to scan attendees at the door entrances as they walked in, without any noticeable slowdown. We didn’t catch anyone complaining that the line was slow and most attendees were understanding when problems did arise.
Data Insights
We were able to capture lots of interesting data insights after VandyHacks about the data we were able to collect. The graphs below showcase only a small portion of what is possible with the depth of data that we had post-event.
Below is a time-series showing how many people checked in on Friday within 5-minute intervals graphed from our NFC data. Check-ins were relatively constant, so the peaks generally corresponded to large groups of people arriving (at the initial opening and each bus arrival).
Below is a histogram of time between consecutive scans in seconds during Saturday dinner (350 total scans), i.e. how much time it took us to scan the next person. We refer to this as “scanning velocity”. As seen in the graph, there is virtually no buffer time between scans so we can check 200+ people with about 5 seconds per person. It would be useful in the future to keep track of people getting seconds, thirds, etc. to get a better idea of where the food is going.
Downsides
To be fair, there were a few downsides. Some wristbands broke or were hard to attach, but most people were able to put it on. In addition, some attendees lost their wristbands and needed a replacement, which our software was able to easily handle. There were also a few instances when two bands were coded with the same NFC ID, which we hope to solve in future years by obtaining higher quality NFC chips/wristbands. Some bands were also defective and simply didn’t scan. However, because we had ordered extras, the defective rate was low. We found fewer than 10 defective wristbands in the 1000 (~1% error rate) we ordered.
Future improvements
There were a few things we hope to improve in the future. From an engineering perspective, we would like to rewrite the frontend in React in order to allow for better code organization and to speed up development of any new features. We would also like to try to get better wristbands from perhaps a different supplier in order to have more reliable scanning performance. Overall we were very happy with the way things turned out this year.
In hindsight, we also realized the backend code could be improved a lot, so we’re currently building Vaken, our next generation hackathon platform, using TypeScript, Koa.js, React, and GraphQL! Keep an eye on our Github organization for updates in the coming months, and look out for a brand new VandyHacks look and feel coming this fall!
Thanks
To see all the pictures that our photographer Janet Fang took for us, check out the pictures from Day 1, Day 2, and Day 3.
