Design Documentation - Trolley Problem VR

Trolley problem VR is a web interactive 3D animation project. It was a team project that me and 3 other lovely teammates have worked on Spring 2017 semester. This project was for CSE 323, a human-computer interaction class.

My Role: I was the UX/interaction designer and one of two developers of this project.

Brief Description

The program would be designed to simulate the classic Trolley Problem. From Wikipedia:

The general form of the problem is this: There is a runaway trolley barreling down the railway tracks. Ahead, on the tracks, there are five people tied up and unable to move. The trolley is headed straight for them. You are standing some distance off in the train yard, next to a lever. If you pull this lever, the trolley will switch to a different set of tracks. However, you notice that there is one person on the side track. You have two options:
1) Do nothing, and the trolley kills the five people on the main track.
2) Pull the lever, diverting the trolley onto the side track where it will kill one person.

Which is the most ethical choice?

What would you do?

Target Audience

The target audience is undergraduate college students in an introductory philosophy or ethics class. Students are generally aged between 17 - 22 and have to take an ethics class regardless of their degree. Similar/competitive products in genre:

- Moral Machine MIT: Quesions based on autonomous driving.
- Classroom Aquatic: A game that is based on a classroom and taking a test, you also have to make the decision to cheat or not to cheat.
- Cardboard Crash Sundance Trailer: A autonomous driving simulation. Which decision do you choose if each results in a bad outcome?
- Affective basis of Judgement-Behavior Discrepency in Virtual Experiences of Moral Dilemmas

How is the task accomplished now?

This problem is usually almost talked about in any ethics class and it’s usually discussed in a powerpoint presentation with an image such as the one posted in the description. Professors tend to break students into groups to discuss the implications of choosing one option over the other.

What are its flaws or limitations?

The limitation about the current way that this is taught, is the lack of real time decision making. One can talk about the choice they would have made in any given situation but to actually be immersed in the situation itself is very different. You never know what you would do until you are actually thrown into that situation.

What is unique in your approach, how does your application add value?

Our application would add tremendous value because it will attempt to fix the limitation that just discussing the problem alone proposes - that is, we will attempt to simulate the situation in VR to immerse the user in the situation so that it’s realistic. This will allow the user to learn about how they make decisions.

Distribution and Dissemination:

Will be posted on a website for anyone to get to. Individuals are responsible for their own VR headsets.

Business Model (retail, subscription?):

Free to play/use and download

Support (user help, updates):

Game updates will also be listed on the website.

Special Requirements:

Will only need a cell phone, or computer with internet access to use at minimum. VR headset highly recommended.

Novel Input/Output Hardware (transducers and actuators):

VR headset (Samsung GearVR) Fabrication needs (props, environments)

Software Development Tools:

HTML, CSS, Javascript, Blender


Google Cardboard, Samsung GearVR, any VR headset or a computer connected to the internet.


The team had a meeting to identify target audiences. Considered ourselves related to this project, we determined target audience would be undergraduate college students, age 17 - 22, in an introductory philosophy or ethics class. We created 3 personas.

Persona A - Devon S.

Persona B - Ana F.

Persona C - Sarah M.


We did research online and found out the best use of Trolly Problem is in a ethic discussion or ethic class. Since this was an undergraduate curriculumn project and target audiences were students, we decided to put the scenario in an academic environment.

Scenarios are based on people who need to deal with ethical problem in a virtual world


We decided to let the user have limited control over this animation, so strictly speaking, it was an interactive 3D animation piece. It would be hosted on a website, so users could access this animation through any modern web browser. In order to make the 3D animation compatible with both virtual reality and mobile, we implemented the piece with A-FRAME. According to the definition of Trolley Problem, a person has to decide which track the train is going, so in the animation, we enabled user to have control over a lever. Users would have to decide to pull the lever or not.

Users have to make interactions


We had a meeting at the very beginning to decide how the interface was going to be. I proposed this had to be an first-person perspective since I played FPS games and knew this would be the perfect medium. The reason? First-person perspective gives users an immsersive experience and therefore creates the necessary empathy. For a ethical problem, empathy is no doubt an important factor and affects how people make choices. Luckily, A-FRAME supports first-person perspective.

Initial Concept

Initial environment concept. Just like FPS games, cursor is always at the center

A-FRAME Interface Visual Mockup


I used A-FRAME to implement the animation and A-FRAME was a fairly new technolgy. I had to import collada models into A-FRAME to build up the environment. I found two problems in the process:

1. There was no way to animate the collision effect. I went to Stack Overflow trying to find any solution but there was no answer about A-FRAME model collisions.
2. Imported models were not small workloads. It required quite a long time to load in a mobile device. Some old mobiles could not even run the animation because it was too much for its capability. I tested on multiple mobile devices in class, and iPhone 6S was having problem loading the animation, but surprisingly, the animation could run smoothly on Google Pixel (Android).

I realized these were risks I had to take to use a new technology: no references, no previous experiences, no solutions. I was having a feeling of being a pioneer and I knew there would be some obstacles along the way, but I did not regret it.

I liked the feeling of exploring new things.

Scene Building

The Outcome

The result was appealing. The class was amazed that all we needed for demonstration was a web browser. We did not figure out the collision part, but as we explained that A-FRAME was a fairly new technology and we could not find solutions, the class expressed a understanding of our situation. The professor appreciated the project and asked about what technologies we used for development.

I was so glad that I somehow managed for being a end-to-end designer and developer. I learned a ton out of this project. I came up the concept, designed the interaction, and coded 60% of the animation (35% to another developer, 5% to the collision part that didn't work out).

***Currently waiting for the presentation picture from the professor***

Mobile Compatible (iPhone 6, iOS 10.2.1, Chrome)


Prev Next

Back to Work