UX/UI | July 2020
Case Study
Inspirit VR
Partnered with Inspirit for a 40 hour project to design new features for avatar customization and managing multiplayer sessions for students.
Project Overview
Inspirit VR is an emerging computer software startup company whose objective is to transform STEM education for students K-12 using virtual reality technology. Their software can be used on VR platforms as well as desktops/laptops and mobile devices using virtual labs, simulations, and VR. I had the pleasure of partnering with Inspirit for a 40 hour project to design new features for avatar customization and managing multiplayer sessions for students.
Roles
Research, Visual Designer
Tools Used
Process
Project Goals
- Determine user flow(s) for a personal management tool for the user to create and customize their own avatar that simulates themselves so they are able to interact with their classmates completing modules.
- Establish a set of tools to start and manage a ‘multiplayer’ session.
Target User
- Students
- Ages 5 – 18
- In science classes
Timeline
- 40 hour project timeline
01. Research
To begin this project, I had to spend time reviewing what VR is and how 2D design translates to 3D design. I would like to highlight what I believe to be three critical points:
02. Heuristic Analysis
To understand more about VR, I compared three different platforms through a heuristic markup, writing my initial thoughts/emotions as I navigated the products as a first time user.
03. Design Audit
Used method to improve/help a product grow through offering usability and visual recommendations that can enhance the current user experience.
04. Ideate
Once all research and information was compiled it was time to brainstorming and crafting user flows and wireframes.
01. Research
Understanding Virtual Reality
Although I come from a diverse design background, virtual reality (VR) is a very foreign concept to me. To begin this project, I need to spend time reviewing what VR is and how 2D design translates to 3D design. I would like to highlight what I believe to be three critical points:
1. Content Size
Intended viewing distance informs the size of the screen. This is done through angular units. Angular units are powerful because if we can design all of our layouts using it, text will be just as readable no matter how far away the screen is.
Source: Mike Alger
2. Content Zones
- Field of View – The extent of the observable world that is seen at any given moment.
- The normal (monocular) human visual field extends to about 60 degrees.
- The temporal FOV when we rotate our neck is 100 – 120 degrees
- Ergonomics of the Human Eye
- Primary UI elements should stay within 60 degrees (stationary)
- Expand field of view to 120 degrees for moving the neck
- Horizon line
- People’s heads face down -10 degrees or +10 – 15 degrees
- Human eyes tend to look up
- Visual center comfortably about +6 degrees below the horizon line. UI elements should not be dead center
3. User Preference and Comfort
- Be cautious of object/screen transition speeds to not startle the user.
- Keep the frame rate stable and above 60 frames per second to avoid causing the user to have motion sickness.
- Communicate clearly via affordance
- “Affordances are properties of objects which show users the actions they can take. Users should be able to perceive affordances without having to consider how to use the items.”
02. Heuristic Analysis
Heuristic Analysis
To understand more about VR, I compared three different platforms through a heuristic markup, writing my initial thoughts/emotions as I navigated the products as a first time user.
Hubs
Hubs – Tool for people to watch videos, play with 3D objects, or just hang together in a virtual interactive 3D space.
- Web Based
- Desktop App available
- Easy to create/setup a room
- Able to connect with discord
- Able to join/invite via
- Shared link
- Room code
- Q, W, E, A, S, D controls
- Web Based
AltSpaceVR
AltSpaceVR – 3D virtual reality focused on providing live shows, meetups, cool classes and more to attend with friends around the globe.
- Devices
- HTC Vive
- Oculus (Rift, Rift S, Go, and Quest)
- 2D mode (PC ONLY)
- Windows mixed reality ultra
- Q, W, E, A, S, D controls
- Devices
- Create an account
- Optional tutorial after signing up
- Customize avatar
- Available options are lacking under each category to give creative freedom to the user
- Circular navigation available on bottom left side at all times to access main menu and frequent settings (audio, personal bubble)
- Community Fair style interactive walkthrough to explore all features offered through AltSpace platform
- When changing locations within the VR world, loading screens display tips
Highfidelity
Highfidelity – Virtual audio experience focused on group chats and one-one-one discussions.
- Desktop and mobile capabilities (Windows/Mac (Chrome and Safari), iOS and Android)
- VR headsets not compatible
- Q, W, E, A, S, D controls
- Beta currently with a maximum of 50 people per space
- Option to upgrade to 150 by contacting directly
- No avatar
- Customize through display name, color and profile photo
- 2D birdview style
- Change background image environment via altering the URL
- Stream audio option only available on desktop (Windows+Mac)
03. Design Audit
Design Audit
Used method to improve/help a product grow through offering usability and visual recommendations that can enhance the current user experience.
Design Audit 1
Design Audit 2
04. Ideate
User Flows
Crafted user flow to achieve the first goal of designing a personal management tool for users to create and customize their own avatar while interacting with the modules for group assignments.
Avatar Customization User Flow
Multiplayer Management User Flow
Wireframes
To illustrate my first concept, I focused on one simple user flow of customizing an avatar, I focused on selecting “face” and then selecting the subgroup “eyes.” From there the user has creative freedom to alter eye shape, color, spacing, size, lashes, etc. Students earn points by answering quiz questions correctly during the module. I thought incorporating some sort of spending points earned feature to unlock more clothing, hairstyle, etc. options would be an interesting concept to add.
Avatar Customization
Multiplayer Management
Outcomes & Lessons
Outcomes and Lessons
Overall, I would say this project was a success. I was able to design solutions for the two goals of developing wireframes for students to be able to customize their own avatar within the desktop platform and establish a flow for students to create a new multiplayer session or join an existing one within the 40 hour project timeline. This was a challenging project for me because it was difficult for me to form a personal connection since science was my least favorite subject growing up. In addition, I had had no prior understanding of VR and it really pushed me to learn new concepts and discover how the technology works. I tried to keep the understanding of how 2D design translates to VR when designing especially for the avatar user flow. If I had more time, I would have liked to explore more complex multiplayer features by comparing video games through conducting surveys/interviews with people who frequently play them to discover how this would translate to educational platforms.
Credits for Icons Used:
Gender Neutral User Group icon icon by Icons8
Vector image by VectorStock / GraphicStock
Vector image by VectorStock / PanaceaDoll
https://icons8.com/icons/set/lips-icon