Big shout out to UI Designers and 3D artists Chloe, Phoenix, Evelyn, Serlina, and Tom for delivering such a beautiful visual interface!
HTC VIVE, 2023-2024
Creating an intuitive cross-platform setup experience for VR motion trackers
The contents of this case study are based on personal experiences and professional expertise. Please note that certain details and information have been omitted or altered to protect the privacy and confidentiality of organizations involved.
At-A-Glance
Timeline
Jan–Nov 2023: Phase 1
(First 2.5 months focused on MVP)
Dec 2023–Mar 2024: Phase 2
Deliverables
UX design. Led the hardware-software integration from 0 to 1 for VR and mobile app experiences.
Contributors
4 UI Designers, 1 3D Artist, 1 PM, 1 Content Writer, 3 Engineering Teams
Jump to section
01 Background
Earlier generations of motion trackers used an outside-in tracking method, requiring users to install base stations and connect the headset to a PC via USB cable for setup and tracking through SteamVR.
To simplify this complex process, HTC VIVE developed a new motion tracker with inside-out tracking. This tracker is compatible with VIVE headsets and also supports third-party VR headsets via PC.
02 Goal & Process
This was roughly how the development process went: I first completed the basic VR framework, so the mobile app design colud follow.
03 Competitive Product Study
Key takeaways from competitors
PC setup: With stronger processing ablity, PC interfaces can provide detailed tracking data, catering to more tech-savvy users.
Mobile or console setup: These devices are limited by their performance, so instead of offering detailed tracking data, it’s more important to make setup simple and allow users to easily check battery life and status, making them better suited for general users.
Avatar model design: Using an avatar model to set tracking roles is easier to understand than a list format. Therefore, I made displaying the connection between the body model and tracking roles a core design concept.
Here're the competing products that I had studied for trackers and controllers:
SlimeVR
Also designed for PC, it uses a avatar model to display tracking roles, making it intuitive and providing detailed tracking status information.
Sony Mocopi
Designed for mobile apps, it uses a human model to display tracking roles, offering a simple and intuitive experience.
04 Building Design
VR interface iteration: From Following the Existing Design System to Crafting a New Layout
The initial design was based on the team’s existing design system. The main idea was that after pairing, users would click on cards to view tracker details and set tracking roles on the next page.
However, since there are 2 types of tracking roles—object and body—the existing UI struggled to show the connection between them, and the multi-layered setup made the process feel complex.
I then proposed the “side sliding panel” concept, allowing users to quickly view all tracking roles and understand their corresponding wear positions.
This design also enabled users to seamlessly switch between trackers, view details, and configure settings.
Cross-Device Design: From VR to Mobile App, with Tailored Mobile Features
Unlike the VR interface, which is a first-person perspective for the setup process, the mobile app provides a solution for someone else assisted with the setup, especially in enterprise use cases.
The core design of the mobile app focused on quickly displaying the status of each tracker.
Some features are specifically designed for the app. For instance, since the app is ideal for scenarios for others to assist with setup, checking the tracker’s indicator lights becomes more intuitive when users encounter issues.
As a result, the app includes a manual of indicator lights.
While users can pair and configure trackers via the mobile app, the motion tracking experience still relies on the VR headset.
Therefore, the app includes guidance to help users transition to the VR headset, such as creating the tracking map after pairing.
Fun Fact: Avatar Display Discussion
When discussing whether to display the avatar from the front or the back, we found examples supporting both approaches. Considering users are more likely to associate with their front view, we decided to present the avatar from the front.
When it came to the imaging logic, I initiated a vote within the design team. In the end, we went for the mirrored view, allowing users to easily align their tracker setup as if looking in a mirror, avoiding confusion with left and right sides.
05 Biggest Challenge
Team Collaboration and Communication
Established the Error Handling Rules of Trackers’ Tracking Role Conflict
Since the system supports multiple trackers, each with different pairing capacities and flexibility in setting tracking roles, users might accidentally assign the same tracking role to different trackers, which cause a role conflict.
We eventually established a priority rule, determining which tracker would take the first place based on its flexibility in setting tracking roles.
The biggest challenge in writing error messages was communicating conflicts clearly and concisely.
Tracking roles may change based on user settings, and the tracker list order shifts with connection sequence, making it tricky to explain which tracker had the conflict and what action to take.
In the end, we used the tracker name and a 5-digit SN number to identify conflicts. While the SN number isn’t very visible, it’s the only stable identifier.
06 User Testing & Final Outcome
User Testing: Identifying and Resolving UX Issues
User feedback after launch
After the product launched for sale, I kept an eye on user feedback on platforms like Reddit, YouTube, and Bahamut (a Taiwanese gamer community).
Most users focused on the product’s specs andperformance, but when it came to the setup process I worked on, the common feedback was, “Super easy, just follow the instructions and you’re good to go.” For me, that was the best validation of the design’s success.
07 Reflection & Takeaways
Communication Lessons
Research Method
In the early stages, I didn’t have access to the actual hardware or competitor devices—I didn’t even know the tracker’s size, weight, or how motion tracking worked in VR. (I even tried setting up PC VR on my own, which was super tough for a beginner!)
Luckily, the VR community is full with helpful tutorials and detailed feedback. Thanks to YouTube and Reddit, I gathered tons of valuable insights that helped me understand user needs. I have to say, I’m absolutely in love with the VR community!
What’s Next
Our UX researcher and I, we hosted a VR chat dance party for the design team (thanks to Christina for organizing and everyone who joined!).
Wearing motion trackers, we all became furries and danced in the VR world, with our avatars’ ears and tails swinging around (thanks to the awesome avatar rigging). It was such an immersive and mind-blowing experience!
It got me thinking: what if the avatars in the setup interface could move too? (Secrect: I’ve already pitched the idea to the PM and engineers, so fingers crossed it shows up in a future version!)