cropped-The-Other-Side_logo.png

The Other Side: A Choice-based Interactive Projection System

Overview

The Other Side created an interactive projection system for the Askwith Kenner Global Languages and Cultures Room on Carnegie Mellon University campus.

It is a polling platform that is directly integrated onto the glass wall. Our team aimed at building an interactive experience that gives an identity to this multipurpose room. This experience will allow students and professors on the CMU campus to contribute to its content and share their opinions on topics related to language and culture.

Demo

Video trailer of our final deliverables and design concepts

Interaction prototype on the glass wall before pivoting into VR simulation

My Roles

Unity Programmer & Interaction Designer

Platform

Frontend: Unity (C#) + Projection + Phidgets

Backend: Python + Desktop

Team

Ruchi Sanjay Hendre

Annie Huang

Hanhui Lu

Ningshan Ouyang

The+Other+Side_halfsheet-01.png

Contributions

As the lead programmer:

  • Designed the whole system workflow and architecture

  • Implemented the display application in Unity with a selection menu and three template scenes

  • Simulated the interactions and physical environment in VR and distributed both 2D desktop and VR builds (Oculus Rift + Quest) for playtesting

  • Wrote technical documentation for future developers

As the interaction designer:

  • Defined and designed the flow of interactions on the glass

  • Finalized the use case of three templates and UX details with the UX designer

  • Wrote design doc for future designers

Architecture/System Design

Since we did not want only to build the interaction alone and leave it static, we build the system with both frontend interaction and backend editor. Here's the architecture diagram that I drew before the implementation and iterated with project requirement:

TheOtherSidesArchitecture.png

Here present two main components of this system: Display Application and Backend Editor. The Backend Editor (Python) reads and writes instance data to files in the local files. The Display Application (Unity) reads saved instance data, gets input from Phidgets sensors and writes user voting results back to the Result Data folder. The Display Application with the settings file is located in the folder on the local desktop.

Flow Chart

TheOtherSidesFlowchart-Front.png
TheOtherSide Flowchart-Back.png

Interaction Design and Implementation

The Display Application comes with three templates; each of them is loaded as a Unity scene and can be switched in real-time in the menu. 

 

The application supports two displays: the laptop/desktop screen inside the room is displayed with a template selection menu and projection settings; the projector is connected with the laptop/desktop and projects the content on the glass wall to the public.

conversation-final.png
showcase-final.jpg
polling-final.png

For each template, the user interaction is divided into four states as described in the following finite state machine: (example below for text template)

TheOtherSidesArchitecture - FrontendStat

If the user switches the content in the menu or closes the application, the current voting result will be saved on the local desktop as JSON files as the format below:

result_json.PNG