The University Remote Experience is a project based upon the challenges that we’ve seen with human connection and learning as students, teachers, parents, professors, and grandparents alike switch to increasingly virtual environments. We know firsthand that it’s easy to become lost in a whirlwind of information--as students, that often means leaving important emails unopened and getting overwhelmed by the immense amount of opportunities, activities, and resources (most of which are online) so that we shut it all off and end up taking advantage of very little. We wanted to change that by making the experience of online learning (and the process of adjusting to new online formats) more interactive, personable, engaging, and useful, no matter where a student is learning from.
What it does
We created an immersive environment to equip students with the resources and advice to help them succeed in a world where online learning may become a norm. As many of our team members are freshmen at Duke, we decided to make our project specific to the Duke experience, with the ability for customization for other schools in the future. Students get the feeling that they’re on campus as they enter and are introduced to Devi, a mascot designed by our team, who will give them a tour. However, this isn’t just any virtual tour—unlike other options like Duke’s Virtual Reality tour, this one primarily focuses on presenting and consolidating the information that a current or incoming student would need to know about, including classroom tools (e.g. through tutorials for Sakai, Zoom, etc.), wellness/academic resources, free services/amenities provided by Duke, and activities/events, rather than simply focusing on showing off our (gorgeous!) campus.
How we built it
In order to present our work in a visual novel format, we initially decided to structure the project by chaining together scene objects as a part of an array, with the data stored in a JSON file. We developed the project in a web-based format using HTML/CSS to allow for access across devices. From there, we designed the lovable character, which we named Devi (“not Devil, because we don’t take L’s here”) who would give our users a tour while equipping them with helpful resources and advice. With the completion of the format, we added special effects and sounds to make the experience more interactive and immersive for the user.
Challenges we ran into
We wanted to program Devi to hover near the text box, but he was being a little devil (pun intended) and blocked the buttons so that users couldn’t go to the next scene. Eventually, we figured out how to remedy this problem by specifying coordinates in our json code, which allowed us to move Devi wherever we wanted on the page. We also had some initial trouble adding music/audio, getting our video of the walk to the classroom to play, enabling some of our teammates to deploy code/connect to Google Cloud, and fixing up the design of the dialogue box so that the text automatically flowed with nothing being cut off. After a good amount of troubleshooting, Google searching, and experimentation, we were able to overcome these challenges. Another challenge we encountered was the issue of the video only playing on a Safari browser. We were not able to figure out how to incorporate the video element elsewhere, but left it in to demonstrate that we probably could have figured it out in time.
Accomplishments that we're proud of
Our goal was to create an integrative and enjoyable learning experience using graphics, audio, animation, videos, and bold design to provide a cumulative experience full of important resources and tips that some of us have gathered over our first semesters at Duke. We also wanted to create an interface that can be viewed on a variety of devices, including on mobile phones, so that students of all backgrounds would be able to access the program even if they didn't have access to a laptop or tablet. Thus, we used Google Cloud to deploy our web app, making it scalable and highly available across the globe to allow remote students to have access. Moreover, despite the fact that a majority of our team members are first-time hackers and/or have had limited programming experience, we were able to succeed in developing a program that addressed our overarching mission while incorporating in fun features, such as animating our hand-drawn mascot, Devi, creating a seamless interface, adding in background music and images/videos taken by our own team members, making an automatically-scrolling end credits screen with "Everytime We Touch" playing in the background, and more!
What we learned
All in all, each of our members were able to contribute something unique to our team dynamic and project. Despite never having worked together before (and for most of us, not having met until just yesterday), we were able to learn from each other, synthesize our different ideas for the path that our project would take, and recognize the importance of teamwork, task delegation, and open communication. We learned about programming with JSON, working with Git/GitHub, UI/UX design, and more, while also finding easier ways to do things (for example, we made it so that GitHub Actions automatically tests, builds and deploys the app on Google Cloud via Google App Engine every time we push to the master branch, making easier to see the visual impact of edits to our code).
What's next for The Remote University Experience
In the future, we hope to allow even greater interactiveness in the program. Colleges and universities across the world can apply and customize this program to establish stronger connections with students who are farther away. We envision potential collaborations with Duke OIT and the YouVisit to enable students using the program one day to access a life-like virtual simulation of their schools: exploring campus, enjoying sights or sounds in real time, creating avatars and interacting with students and faculty in a virtual environment, simulate walking to class and clicking on a laptop to open up their lecture on Zoom, and enjoying the benefits of proven-useful content specially customized with them in mind.