UX UI and Product Design for VR Education
2022.5-2025.5
In the past 3 years, I have been working as UIUX Designer at Dreamscape Immersive.
Dreamscape Learn makes Virtual Reality Classroom for colleges education across the country.
With the learning objectives, we created interactive learning films in VR.
Learn more on the ASU website
or
Work Examples
My Role as a UI UX and Product Designer
My Role as a UIUX Designer in VR Studio
-
I designed with research ↔ design ↔ tech.
-
Led and mentored a new UI/UX designer to collaboratively build a cohesive UI system in Unity
-
Acted as a bridge between creative writers, developers, and artists to deliver fun, engaging, and holistic user experiences
-
Developed animated and interactive 2D/3D assets in Unity
-
Created user flows, storyboards, and UX documentation to guide cross-functional collaboration
-
Built and tested gameplay and UX prototypes to validate design ideas early in the process
Projects I’ve Contributed To:
-
Biology in VR – Content Designer (3 episodes)
-
Chemistry in VR – Content Designer (9 episodes)
-
Astronomy in VR – Lead Designer (Introductory)
-
Immersive Classroom – Product Designer
Let's Jump to:
Background:
How to Design Gamification Education - Learn during interactions
-
In gamified education, we use virtual reality settings to guide students in memorizing and understanding new knowledge through a colorful path with gamified interactions.
Highlights:
Example 1: Using chair vibrations and haptics to illustrate molecular motion and heat transfer
-
When molecules move (vibrate, rotate, or translate), that movement is called kinetic energy.
-
The total kinetic energy of molecules in a substance is related to its thermal energy (heat).
-
The faster the molecules move, the higher the temperature and energy.
-
Instead of reading those words, students will experience a haptic experience from the headset and chairs while watching molecules flowing around them (they will vibrate, rotate, and translate),
Example 2: Learning start distance as we are traveling with our desk - the feeling of speed with time.
-
To convey the dramatic distance difference between each planet, I had this idea of transferring our desk to a spaceship, and students will travel (with skybox changing) to travel from one planet to the other.
-
The experience of traveling helps students understand the difference in distance between stars.
Example 3: Turn the controller to different tools
-
During the experience, we transformed the controllers into various tools to simulate different scenarios.
-
Device in VR Example (all elements created by me)
Human Factors in VR
-
Designing stationary interactions in VR requires a strong understanding of spatial context.
By applying human factors to cockpit design, I mapped both third-person and player perspectives to ensure intuitive access to controls and interfaces. -
This approach enhances usability, spatial awareness, and overall VR experience effectiveness.
Third-Person View
Player View
Content Design in VR:
Production Workflow:
Storyboard creation:
Grey box Prototypes:
Style A
Style B
Style C
Lo-Fi Design in Unity:
High-Fi Design in Unity:
Immersive Classroom Product Design:
How to move the classroom interaction into VR? (User Needs Map)
-
Since educational games need to address the needs of both students and teachers, I mapped out interactions in a realistic classroom environment.
-
The product design aligns with these interactions while also incorporating fictional elements for enhanced engagement.
-
Based on this interaction map, I identified the critical features for the VR game, which are listed below.
Feature List (Suggestions)
Improve the teaching process:
-
Share slides and documentation
-
White Board
-
Customize Avatars
-
Manipulating the objects with the lock and unlock
-
Modify the classroom layout
Professor Hand Menu Mockup:
-
The hand menu is hidden within the user's watch and opens to display key information and features.
SDK Default UI (Implemented in the project)
Unity Mockup for new Dashboard Design
Multi-Screens and share screens
(professor View)
-
In a class, the professor can share one of the screens, while other screens remain open for notes.
-
When the professor has one screen broadcasting, he can view all the screens from his small panel.
White Board
-
Adding white board feature for professor to sketch.
Change Classroom Layout
-
We can make the room layout different in one classroom to facilitate group discussion, collaboration, or lectures.
Features for Students
-
Customize Avatars (Before Class begin)
-
Taking Notes and Screenshot/Recording
Create your avatar before the class.
-
In the setting menu, the mirror is a good way to confirm their avatar.
-
We can use this opportunity to encourage students to be more prepared for the class.
-
Creating their avatar before the class via a URL on their phone.
-
This is an app from VR Chat. We can implement the avatar into Unity.
-
At the same time, we can introduce the class topics.
Taking Notes and Screenshot/Recording
-
In the class, the students can use note-taking or recording features for important information.
Discussion and Talking (UI)
-
When a student is talking, there’s an icon or highlight on the name tag to show the interactions.
Button States UI Design
-
Updated the visual with the different states of interactions.
UI Design Iteration for Calibration
-
Implemented the new UI visual style with the branding color.
-
Improve the UI with a progress bar after user testing.
-
Rewrite the user prompt to lower the error rate.