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
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.
- 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.
