SpiritXR is a creative group that creates immersive worlds and experiences in virtual reality. This includes their "Bar Blaque" VRChat world where users can pay for premium features such access to VIP areas, exclusive visual effects, and additional world settings.
While in this world, users access a tablet that serves as a control panel for settings, interactions, and other features. Users found the design difficult to use, so I was brought on to redesign the experience and make it more intuitive.
I began the project by reviewing the features in their existing tablet and looked into other successful premium bars, borrowing design conventions that VRChat users were already used to. I also spoke with the stakeholder to understand the current pain points users were experiencing and used that feedback to inform the redesign.
This series of images are from the older UI. Users often complained about the clunky horizontal scroll, bloated menus, and unexplained features.
We also had to take into account all the different "roles", or user types, that would be interacting with the tablet. For example, roles such as administrators have access to features and settings that guests do not have access to. I discussed these permissions with the client and created journey maps to see how every type of user would interface with the tablet. This led to four distinct variations of the tablet.
Wireframes of the main menus were created for each user type, followed by wireframes for each individual menu. These low-fidelity designs made it easier to iterate based on feedback and implement quick adjustments. They also helped bring shape to the researched menu concepts discussed in the previous steps.
view full wireframe in figmaview wireframe prototype in figma
Once the wireframe and user journey map were finalized, I moved on to a high fidelity mockup. I studied the existing branding found throughout the environment, such as signage and furniture, and incorporated those visual elements into the tablet’s design. We finished with a functioning prototype that housed all the original features in a more intuitive layout, displaying content tailored to the specific user.
view prototype in figmaview full mockup in figma
