Graphviz
Graphviz is a virtual reality learning experience for students, designed and developed for Dreamscape Learn in partnership with ASU. Graphviz allows professors to teach students about various mathematical models with the aid of interactable 3D models of the graphs displayed in the virtual environment.
Roles
User-Experience Designer
Creative XR Developer
Unity Developer
Web Designer
Deliverables
Web Portal for File upload
Desk interactions
User Interactions
Unity Scripts
Project Specifications
Jira
Figma
Unity
Zoom
Dreamscape proprietary tools
Overview
Problem Statement
The realm of education is faced with the challenge of conveying increasingly complex and voluminous data in a manner that is both comprehensible and engaging. Traditional methods, limited to two-dimensional visuals and static representations, often fail to capture the intricacies of the information, leading to a disconnect between learners and the subject matter. There is a critical need for more immersive and interactive tools that can bridge this gap and facilitate a deeper understanding of the data.
Proposed Solutions
The project presents a suite of template designed to be integrated into various immersive experiences within Virtual Reality (VR) environments. This project’s aim is the transformation of graph files into interactive point clouds. This tool is a part of a broader initiative to continually craft solutions that elevate data interaction and comprehension, thereby enriching the educational landscape.
Design Process
The project consists of two parts:
The Virtual Classroom where the students and the professor will take the class and interact with the graphs.
The web portal where the professor can upload different graphs to then use them in the virtual classroom.
Part 1: Virtual Classroom
The virtual classroom is at the center of this experiences. The students will be seated around the model and observe what the professor teaches them. The professor will have control over the model and will be able to teach with the help of 3D models instead of using the traditional 2D format of teaching using a whiteboard.
The professors access controls with the help of their desk that is situated near the location where their avatars spawn. The desk’s surface has all the controls that professors need. The controls are interactive and function like a tablet. I was a part of the team that worked on the design of the desk and I helped design certain features that are shown below.
High-fidelity Wireframes
Iteration 1 - A simple menu.
Iteration 2 - An improvement on the iteration 1 design in terms of reducing the number of clicks (taps, technically) to reach the “point color” and “point shape” menus.
Iteration 3 - An improvement over on the iteration 2 designs by eliminating the requirement to use the “back” button when the user reaches the “point color” and “point shape” menus.
Part 2: Web portal
The web portal provides a way for the professor to upload models before they go inside the virtual classroom to teach a lesson.
Inspiration
I drew my design inspiration for the web portal from my previous experience working as a product analyst at Kennect Inc, Mumbai, India. We created a dashboard in the company to display content in a similar manner and I found that applying the same concepts here worked well and resulted in good feedback from the team.
Another inspiration is from the recent shift in the design space towards more rounded corners and curves.
User Flow
When I was given the requirements, the developers had a data flow diagram but did not have a shareable user flow diagram, so I started there to understand the flow of the entire web portal and make sure that I captured every step that the user was going to take. During the user flow creation, I was in constant communication with the developers to make sure we had the same system in mind. I was also looking to simplify the user experience wherever possible. I collaborated with the developers to come up with a user flow that would be the lead the user to their goals in the most intuitive and simple manner. During this phase, simplicity was my main goal.
Low-fidelity wireframes
Color
During the making of this project, the stakeholders decided that all our projects in collaboration with Dreamscape should follow a certain theme to make the user identify Meteor Studio’s brand. One of the best ways to create and maintain a brand identity is through colors. We settled on a default dark theme and used Meteor Studio’s logo as inspiration to come up with the color palette.
High-fidelity wireframes
User Feedback
User testing provided us with the following feedback:
“Can you make the desk height adjustable?” This observation came after some of the professor testers faced an issue with the desk height a they were too tall to reach the controls comfortably.
I solved this problem by adding foot pedals to the floor near the desk. The professor can press the pedals with their feet to increase/decrease the height of the desk.“The students are left idle while the professor is busy setting up the lesson using the controls. Can we make the tabletop visible to the students?” Our developer solved this problem by adding a camera int he scene whose target is the tabletop, and it “live streams” its recording on the wall behind the professor.
Foot pedals for the desk
Tabletop projection on the wall situated behind the professor
Future Improvements
Improve graph resolution in the virtual classroom.
Based on further user feedback, might add the ability to delete lessons.
Expand the list of filetypes accepted in Unity to increase virtual classroom capabilities.
Lessons Learned
Button placement - Button placements are important for any user interface, but they become crucial in VR’s user interfaces. For example, one tester mistook my foot pedals to be buttons and tried bending down to interact with them. Although this problem never occurred again, it shows that people are still quite unfamiliar with virtual reality.
Communication - I had to communicate with the developers on our team while working on the web portal’s design. At first, it was me taking feedback from them for my wireframes and design, whereas later on I was the one giving feedback on the development results. This experience helped me understand the value of clear and concise communication and it also showed me how important small things like leaving comments on designs and documentation can be.
Color contrast - On my first iteration of the web portal, I used #000000 as the background color. This created a piercing contrast between the background and the white text. Upon user feedback, I learned how uncomfortable it made the user and I changed the background to a lighter shade to decrease the contrast.