An Interactive Purdue Aviation Kiosk

Designing an experience that could excite, educate, and engage students from all backgrounds was no small task. For months, we brainstormed, iterated, and prototyped what the optimal experience would feel like. Once we defined the project scope, we explored a variety of interactions to create an engaging user experience. Early concepts included figurines, scrollable maps, and pin-based input systems. After thorough experimentation, we decided to use RFID cards as the primary input method to promote the spirit of being a Boilermaker at Purdue. These collectable rectangular cards designed as "Purdue Heroes" with RFID embeded within, gave users a personalized way to interact with the display.

For the interactive map, we evaluated options like physical scrollable maps and touchscreen interfaces. Touchscreens, though familiar, felt too similar to existing devices like tablets, while scrollable maps required extensive calibration and motor precision. To strike the right balance, we chose screen projection, providing a visually dynamic and user-friendly interaction.

To enhance interactivity, we incorporated a magnifying glass reader to scan RFID tags embedded beneath the projection screen. This design allowed users to "explore" the display by physically moving the reader, simulating a hands-on discovery process. This approach minimized material costs while offering a unique and intuitive user experience.

On the software side, we used p5.js to create a dual-screen setup - one for the projection and another for the monitor. The monitor content dynamically responded to user actions on the projection, seamlessly combining hardware and software for a cohesive experience. Although we faced several troubleshooting challenges along the way, each hurdle helped refine the system, making the interaction as smooth and engaging as possible.

We underwent several ideation sessions before reaching the final design of the installation. Each session enhanced our previous ideas and build off from them. The final sketch looks like this.

The proposed flow consists of a projector on the top, projecting an image on the tabletop. There is a card scanner at one side on which users will tap their hero cards. On the other side is a monitor for display, and a magnifying glass to explore various chapters of the hero’s life.

The prototyping phase was messy. We faced a lot of challenges of different nature but we remained persistent and pulled things off. All in all, we had to figure out the physical circuits (wiring and connections), the code (combining Arduino, P5.js and web sockets), the design and UX (physical interactions and the experience), and the content (information delivery).  

We faced several challenges along the way which are described as follows:

‍Hardware Hustles: We had our hands full trying to get all the hardware to play nice together. Between figuring out where each RFID reader should go and making sure all the wires were connected right without taking up too many pins on the Arduino, it was like solving a puzzle. The solution involved wiring two RFID readers in parallel on a breadboard, which allowed the use of limited pins effectively. Modifications in the Arduino code were made to accommodate two RFID readers simultaneously, leading to successful data acquisition from both.

‍Setup Saga: Setting up the projector was a bit of a drama. It needed to hit the table just right. We tried sticking it on ladders and walls, but nothing felt right. Finally, we got a tripod and a fixture stick that did the trick, getting the projection spot-on and stable.

‍Long Wire Constraints: The use of longer wires initially caused the RFID devices to become inactive due to voltage drops. By replacing longer wires with shorter ones and eventually increasing the voltage supply to 5V, functionality was restored.

‍Async Dual-Monitor Display: Serial communication in Arduino allowed a single connection through one browser tab only. The limitation in broadcasting software that required mirrored displays was overcome by using socket programming. An intermediate server was set up to manage the transmission of serial port data to different clients, thus maintaining the intended display functionalities on separate screens.

‍High-Quality Video Transmission: To address the reduction in video quality due to high memory usage when opening duplicate tabs, the system was optimized by splitting displays into two browser tabs using URL parameters. This setup reduced the load and improved responsiveness. Additionally, media content was created and stored in memory only once to prevent repeated loads, significantly enhancing performance and reducing lag.

‍Code Optimization: Continuous improvements and optimizations in the code helped maintain high-quality video transmission and interactive functionality. The adjustments allowed for efficient management of hardware resources and smoother user interactions.

‍Content Conundrum: Content was another hill to climb. We wanted to make sure the stories we were telling through these hero cards were engaging and easy to follow. Designing the user experience and making sure the info was delivered just right took some back and forth, but we think we nailed it in the end.

In all, despite these hurdles, we stuck with it and got through the mess of prototyping. It was a mix of tech, design, and sheer persistence, but that's what it takes to bring something new to life, right?

Our evaluation protocol involved a combination of observational, empirical, and qualitative data. We began by setting up the entire system ready to be used by the public. Participants interacted with the system independently on their own, without any help or context provided by the testers. The testers observed the participants meanwhile.

The evaluation was divided into three phases:

In the first phase, participants observed the kiosk and understood how it worked. We encouraged participants to ‘think aloud’ and share their expectations and understandings with us.

In the second phase, participants followed the instructions on the screen and the projection, and interacted with the system accordingly. This was the phase of discovery. We observed participants, captured their reactions and body language, identified any issues that occurred or gulfs that existed (mismatched expectations or executions), and noted down any other technical flaws that arose.

In the third phase, we captured participant’s feedback, gauged their engagement and satisfaction, and obtained suggestions for the future.

We used Heuristic Evaluation to evaluate the system’s performance, Usability testing to identify flaws within usability and issues faced, and a Survey to judge satisfaction and engagement. This was followed by a short qualitative feedback session to obtain further feedback from the users.