XN Project: Interactive Website with WebVR


The Experiential Network(XN) is a program to help students engage in experiential learning opportunities with a real-world partner. I was matched with Elaine who is an alumni, a government worker, and a poet living in Washington DC. We worked on the virtual project for 6 weeks period. Elaine has the vision of making the new website like a scavenger hunt incorporate with an interactive and immersive experience.

It’s a trigger to have me started thinking what’s the best way to present and achieve this fantasy wonderland which it’s my first exposure to using multimedia to create interact website after my research.


To create a 3D environment on a 2D screen, it is a heavy lifting to use the traditional way to make a 3D environment in Unity or Unreal for the browsers. Then I found this new raising WebVR technology – A-frame, an open-source web framework for building Virtual reality experience. It allows developers to create 3D and WebVR scenes using HTML. HTML provides a familiar authoring tool for web developers and designers while incorporating a popular game development pattern used by engines such as Unity.



According to Elaine’s description of her website concept, I think it should make the user experience in a gamify and intuitive way for the first-time users to get know how to navigate and achieve their tasks, especially it is not a traditional website with navigation tabs on top of the page.

The idea to make the users feel comfortable is feeding them a bit information at a time until they have a grip of what’s the website about and what are the tools or functions that they can use to achieve their tasks in this website. I create a task-based level as a tutorial session leading the users to complete those tasks by gradually difficulties tasks. Then the users could choose different media adventurous journeys.



Within a tight project schedule, I tried three types of the prototype – instaVR, Pannellum, and A-frame. The presentation slides link is HERE.



From this XN project, I was able to explore new technologies, hands-on real case and solve problems. Elaine was happy about the progress within such a short time. Even though it is far from perfect and completion, it gave the opportunity to practice my design thinking, design and programming skill.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s