UX for X8 - A VR Videogame
Designing UX flows, UI and so much more!
This is the full case study!
Skills demonstrated
UX for Video Games
UX for VR
Quick Turnaround
UI Design
Community Feedback
Competitive Analysis
Dev Communication
Mockup
Prototyping
UX Generalist
Intro
This case study is a compilation of (a select few) bite-sized stories from my time working on X8
In 2023, I joined Thirdverse - they are known for their fantastic VR games.
They wanted to improve the UX of their VR hero shooter game, X8, and I happily joined them to help.
I've been in fast-paced companies before, but the pace at which things moved here meant I had to take a different approach to UX.
Unsurprisingly, a small and fast paced team means wearing many hats. My work at Thirdverse included:
UI design, UX research, writing tutorial voice lines, managing some aspect of our in-game shop database, SQL queries, pushing assets to the game files and so much more.
However, I was first and foremost a UX designer who had to deliver with very fast turnaround times. Updates happened very frequently and we moved from planning to the live build very fast.
Rather than compromise on quality user insights with "not enough time" being my excuse, I would heavily leverage what we already knew, or users were speaking up about, and a lot of in-game guerilla testing and anthropology. Where I could afford the time, I would do live user testing and conduct card sorting tests.
UX/UI: Skilled Matchmaking and Postgame
Problems
After each game we had to show what happened to the player's Elo, how much XP they got etc.
Solution
I created mockup UI that would show up after each game.
Process
I understood what had to be disclosed to the user.
I researched how other games did it.
Then, I used Figma to create mockups for the devs to follow.
Credit goes to our talented Game Artist Sofiia Sphakovska for creating the badges (inside the octagons)
Results
These UI are in the game right now but the clean mockups are here for your enjoyment.
Here is a link to see a demo of the skill progression UI
Here is a link to see a demo of the matchmaking score UI
Challenges overcome
I had to really up my graphic design skills to create a clean and polished end result for both initiatives.
Given hardware limitations, I couldn't take certain animations or effects (even transparency!) for granted.
I created the rank UI from scratch to final animated prototypes within a week.
I created a beat-by-beat documentation of the animation steps for each transition for our UI devs to follow.
Thirdverse x Konami Collaboration
Problem
A very good problem to have - we were collaborating with Konami and creating a Contra (yes, that one!) based gamemode as an X8 DLC for our players. Among many other things, I was tasked in creating various UX flows and associated UI's for the collaboration.
Solution
I created many UI and designed many flows. Everything from the HUD, sequence of players joining the mode, a marquee in the level that gives some info about the game, an in-game screen to help purchase the DLC, and so much more.
Process
The weeks of work this project entailed was quite a journey.
Our entire lives were Contra, Contra and more Contra.
Lots of quick discussions, brianstorming, designing, iterations and late-night Slack huddles later, we took a sigh of relief - we had finally achieved a fun, fast-paced gamemode that us and our players enjoyed!
Results
The result was this DLC for our game.
As for my part, here are some screenshots and tidbits about what I did.
Entrance and Marquee
The entrance to the gamemode was found in the main casual lobby level.
The idea of the UX flow was that it was a "ride" that you and a friend could go on if you had the ticket (DLC).
You would be able to pass a literal paywall if you had the DLC.
Each time would last around 6 minutes or if the players died.
The Marquee functioned as a progress bar for the players not playing the gamemode. It was a way to tell at a glance how far along the DLC players were, how well they were doing etc.
If there wasn't a run underway, it would advertise the gamemode and show accolades for that day (top player that day, top duo score that day etc.)
HUD
As much as we wanted to avoid explicitly slapping UI in the player's face and lean towards diegetic where possible, we all collectively decided (on top of feedback) that HUD was needed for an optimal experience.
Postgame Summary UI
A simple UI to give the user some information after their game is over.
It had to be quite simple because of hardware limitations. No animations, no transparency etc. was afforded by the very limited specs of the standalone VR headset that was already busy running the game.
DLC Sign
The big Contra sign with the constant reminders to play the DLC meant that some players would try to play without having purchased the DLC first. I designed this console with its UI which is where players would be teleported if they tried to enter without the DLC.
IA: Main Menu
Problem
Players found that the main menu options were all over the place
Solution
I ran a card sort study on our userbase to help fix the hierarchy and tab grouping of the main menu.
Process
I designed a card sort survey of all the main menu options and tabs.
Then, I had some volunteers from the X8 Discord server sort them.
After enough data had come back, I looked through the findings with CaSolysis 2.0
Results
I created a very dev-followable guide on how to reorganize the main menu!
A close-up before-and after of one of the tabs. The end result is much simpler and better organized.
Challenges overcome
Using color coding, I figured out a pretty cool and intuitive way to communicate to the devs what moves where (seen in the first Figma screenshot)
I used a new tool called CaSolysis 2.0. Very cool and helpful in getting insights from the data!
I was a bit rusty with card sorting (too busy with UI-focused UX), but it all came right back once I started.
