Beyond Barriers: A VR Experience
(5-7 minute read)
NOTE (APRIL 2021): The official website for this project is in its final stages of development. The version featured in this case study is a beta prototype that was submitted for my program's capstone showcase. The link featured here will be changed upon completion.
Check out the prototype of the website here.
Beyond Barriers combines 360° content with web development to create a web VR storytelling experience. Viewers can watch first-hand accounts of living and coping with a mental illness through a series of immersive videos. The conversational narratives aim to encourage discussion and address the stigma that often surrounds mental illness. The website also provides a list of resources, should viewers feel inspired to reach out about their own mental health, or learn more about the wide range of mental health conditions.
Project Background
For my fourth-year thesis/capstone project, I wanted to create something that could be used to help others, while being interactive. I was inspired by the increased need for conversations surrounding mental health during the COVID-19 pandemic, as well as the isolation that many people were feeling through solely digital interactions, often just through text or video calls. I wanted to experiment with how immersive technology could potentially help bridge this gap a bit, while giving a platform for people to share their stories, learn more, or even just realize that they aren't alone in what they may be feeling.
Trailer
The trailer (featured below and when you first enter the site) gives a better insight about what the project looks like and what it hopes to accomplish.
Video Pre- Production
This project spanned across two semesters. In the first semester I experimented with 360° cameras to get a better understanding of their capabilities and what I would need to do when it came time for filming. During this time, planning for outreach, as well as research into the potential ethical issues surrounding VR journalism and storytelling was also done.
Early test of VR/360 footage, using the Ricoh Theta V
(Mobile and desktop testing)
Video Production & Post-Production
Once outreach for participants was completed, videos were recorded during the following semester in places that each participant felt safe in and/or had relevance to their story. The videos were shot with a setup that placed the POV of the viewer in a position that appeared to be more “conversational”. By having the participants speak directly to the camera (viewer) in an immersive space and using minimal b-roll, the hope was that it would feel like a more natural viewing experience that also gave room for the viewer to look around if needed without detracting from the story. Post-production focused on making sure the stories were cohesive and that the cuts in footage blended seamlessly in a 360° environment, which proved to be challenging at times.
Final project footage, shot on the Insta360 One X2
(Compilation of desktop and mobile user testing)
Web Development
While YouTube is an excellent platform for playing and hosting VR videos accessibly, I wanted to see if there was a way to keep the videos in their full immersive form on the website without requiring the user to leave. The reasoning behind this was that I wanted to keep them close to the "Resources" page, should the viewers feel required to use them after watching the stories. After looking into several (often unaffordable) ways of accomplishing this, I decided to run with A-Frame. In the early development of the site, I looked into having a play button that would be activated upon clicking (desktop) or gazing (mobile/Google Cardboard). During user testing, the play button/cursor was deemed distracting by those who tested this version of the website and was later removed.
Footage of A-Frame testing from the earlier web prototype
Changes to autoplay capabilities in HTML, as well as A-Frame during the creation of the project had an effect on the viewing experience for mobile (for all of iOS and some, but not all Android devices). Desktop, however, continued to run the videos seamlessly. The temporary work around for this initially was to simply ensure that battery saver was turned off (which initially worked for all mobile devices). After more changes with HTML/A-Frame happened during post-production, this no longer worked and the work around was to have "Alternate Links" to the full-length videos on the Beyond Barriers YouTube channel, which also doubled as an accessibility link for those who need captions.
In addition to the "Resources" page, a "Credits" page was created to credit the participants, my advisors, and those who were involved in user testing, among others. HTML, CSS, and JavaScript were used to create the site and make it responsive, as you'll see below in some of the screenshots
Learning Outcomes
This was easily the most challenging creative project I’ve done so far, for a multitude of reasons. That said, it was also one of the most rewarding. I’ve never filmed and edited a series by myself before, and it’s a whole different beast compared to the videos I’ve previously done. There was also a ton to consider with subject matter, ethics, and consent. This project pushed me outside of my comfort zone in many ways and taught me a lot about the range of mental health conditions, in addition to the technical aspects of VR storytelling. It also helped me discover how I could use my skills in digital communications to help others, something I wasn't even sure was possible when I started my program.
I'm incredibly grateful to Ylana, Ted, and Logan for taking a chance and trusting me to document their stories and provide a platform for them. Their candidness and willingness to share reminded me of the motivator behind this project. I hope that even one person can watch this and feel more comfortable with discussions about mental health, whether it's their own or someone else's. Without these conversations, we'll never be able to break the stigma that surrounds mental health conditions/mental illnesses.