Pre-Vet VR UI Redesign
Overview
Background
The Pre-Vet experience in VR and on desktop is a game meant to serve as a supplementary assignment for incoming freshman students beginning their pre-veterinary major at Arizona State University. The original game included a UI that mimicked other VR UI at the time such as the Apple Vision Pro and Meta headsets. However, a redesign was needed as user feedback came back rather negative due to interaction issues and a general dislike to the aesthetic; the functionalities needed to remain the same.
Methodologies
-
Heuristics
-
User testing
Redesign Goal: Improve user experience by increasing task completion and accuracy while addressing aesthetics and keeping functionality the same.
Scope: 3 months, August 2024 - October 2024
Role: UX researcher, UX/UI designer, Art director
Toolkit: Figma, Google Docs, Google Sheets
Researching the Problems
Current State
Heuristic evaluation revealed two functionality issues:
-
The display was too large for the size of the environment given to the player
-
The display blocked the vision of the player, and even with transparency, made the room feel less immersive in VR
-
-
The display is too far away for accurate inputs
-
While desktop works well, VR headsets with hand tracking and ray casting are often more inaccurate or completely miss
-
Source: Pre-Vet Build (Aug. 2024)
User testing confirmed these issues to be a problem for users, and it also uncovered some aesthetic feedback:
-
Every user on using a VR headset felt that the display was too far away and that the buttons were too hard to press
-
Audible feedback recorded during testing revealed users felt the display was too futuristic and dull in comparison to the rest of the setting and characters
-
User retention tended to fall by the second part of the experience once they needed to scroll through the UI and answer the questions a second time for another dog
-
One user mentioned it felt more like a test than a game
-
Source: Pre-Vet Build (Aug. 2024)
A Colorful Solution
Changing the Color Story
Before wireframing and prototyping, we wanted to address the color story of the UI. As it stood, the UI was too "cold," "technical," "futuristic," and "modern" according to user feedback. The colors additionally may be responsible for a decrease in user retention over time. As the UI feels technical and cold, it felt less like a game and more as if they are being given an exam instead. We needed to change the color story to improve the mood of our users as they answered the questions.
Shift to Color
New colors were chosen to better match the environment inside the 3D space. Previously, the veterinary hospital depicted in the game had been recently branded as "Sonoran Sun Animal Hospital" with a gold, teal, purple, and pink color scheme. Therefore, we decided to match the other assets designed for the exam room (like the posters and mural) by generating a new color scheme for the UI that matches the teal, pink, and purple used in the room. An additional green and red was added to keep the colors that people most easily identify with "right" and "wrong."
These new colors not only match the environment, but they are more animated, saturated, and eye-catching. This would hopefully retain the user's attention for longer periods of time since it stands out more in the space and reads less mechnical.
Designing and Prototyping
Addressing Spacing, Keeping Functionality
Beyond visuals, we needed to adjust where the UI menu would appear, how close the UI menu appeared to the user, and how large the UI menu displayed across screens.
To address all three of these concerns, we moved the UI menu to the left of the user's view and made the menu vertical. In making it vertical, the UI menu is smaller and can be moved closer to the user in 3D space. This makes it easier to click in VR as the buttons appear larger and users can reach over easily with hand tracking or ray cast.
Final Design and Iterations
Iteration - Version 1
The first iteration emphasized blue as we wanted to test out a clean and clinical feel for the UI. The stakeholders wanted to emphasize a sterile environment, and these questions are meant to mimic notes a veterinarian takes during an exam. Therefore, we made the UI blue, which is a common color in healthcare used around hospital settings, and a handwritten font for the responses gained from the owners during the experience.
Why was it changed: Internal reviews figured out when implemented into the game for testing that the blue blended too much into the background since the wall behind the UI is blue and white. The handwritten font also became hard to discern inside the game engine.
Final Design - Version 2
The final design switched from blue to pink, which while feeling less clinical and clean, feels more fun and inviting. Blue and purple were used to distinguish between "continue" and "submit." The font was changed to a typewriter font to read better in the game engine, but it still gives the responses a more manual feel. We also removed the ability to scroll, which was possible in the original black UI. This made the controls less complicated, especially for those using hand tracking in VR. The design was kept slim and vertical to, once again, sit closer towards a user's vision without feeling too large and blocking the environment.
Stakeholders approved this version after playing a demo of the experience. They liked the improvement to the visuals, despite us choosing to go with pink rather than a traditional and sterile blue.
Conclusion
The upgrades in visuals and addressing the accessibility issues in its core functions in VR was incredibly important to ensuring the users feel engaged and invited in the exam room. Considering many of these students are freshmen, and this may very well be one of their first college experience, it was important players felt as if they were having an easy time learning through gameplay.
More importantly, in redesigning the UI for this experience, we were able to take better care with our design choices in the sequels down the line. The solutions for Act 1 lead to the designs chosen for Acts 2 and 3, which you can take a peak at below! This project taught me how to reimagine existing UI in a fresh way while still maintaining core functionalities that are essential for a product to work in the same way.
