Virtual Reality Seminar

Role: UX/UI(Product) Designer

Tools: Ottifox, Glitch, A-frame, Spark AR

In this seminar, I created a series of AR and VR experiences with A-frame and Spark AR.

I. VR BUSINESS CARD

In order to brand myself and showcase my VR/AR related projects, I created this QR code to be scanned and direct people to my portfolio, Linkedin profile and contact information. They may also click to switch between the AR representation of my projects.

II. #MaskforUnity

The mask and background was designed in Photoshop. The AR filter was created, animated and implemented using Spark AR with the hope to spread the love and call for unity.

III. VIRTUAL GALLERY

During the seminar, the society was experiencing the dual pandemics of Covid-19 and racism. Therefore, I joined the #MaskforUnity campaign along with other SVA students and faculty.

Introduction

Virtual Gallery is a VR experience for users to re-discover the beauty of art with modern technology.

Goal

  • Present artworks in VR setting
  • Navigate a virtual and interactive gallery tour
  • Attract visitors that may or might not be initially interested in fine arts

Video Recording of the Experience

Challenge

What distinguishes VR from other media is the fact that it puts users in a 360-degree environment where the traditional concept of the screen no longer exists. Bearing this in mind, I took the virtual space into consideration and included the possibility of random user behaviors where wireframing. By taking the lantern as an anchor point, users are led step by step till the end of the journey.

Wireframes

Step 01
Step 02

Step 03
Step 04
Step 05
Step 06

Step 07
Step 08
Step 08
Step 09
Step 10

Implementation

I implemented the whole experience by using A-frame and tested it separately with the browser preview and Oculus VR headset. The environment and all the placement of assets are designed carefully to lead users to have different focus in the different steps of the journey.

  1. Scene 01 is the home scene and the start place of the whole experience where users can pick a gallery to explore.

2. Scene 02 is the Dali’s Gallery which is inspired by the great artworks by Salvador Dali. A window shows up to instruct users on how to navigate. Click on the blue button to start.

3. When the candle lantern is clicked, it moves to show users where to go next

4. In Room 1, bubbles would fly out of the artwork once the blue button beside it is clicked

In Room 1 of the melting clock, users can clicked on the clocks to interact

By the end of the corridor, there is a door for users to open and see the painted sky.

Users can then step out and enjoy the sky walk!

Click on the following links for preview:

Scene 01

Scene 02

IV. VR VIRTUAL BOOTH

By the end of the seminar, I created this virtual booth and joined the virtual exhibition along with other SVA students and faculty to showcase our works.

Leave a Reply