Projects

/

vr-connection-center

VR Connection Center

Designed UX flow, UI, and OOBE to enhance usability, consistency, and efficiency; conducted Design System, competitive analysis, and release quality.

Overview

This project focused on improving the overall user experience of VIVE Hub, with a strong emphasis on UX planning and user-centered design principles. The goal was to make PC VR streaming, virtual display, and tracker setup more intuitive and seamless platforms.

✅ Result

  • Optimized UX flow for effortless setup and usage, simplifying key workflows by 2 steps to improve efficiency and ease of use

  • Refined UI design for better clarity and efficiency

  • Conducted competitive analysis and usability checks

  • Achieved high-quality release through iterative improvements

  • Built and optimized a Design System, effectively integrating 15+ core components to enhance cross-team design alignment and reduce UI inconsistencies by approximately 30%

🎯 Objective

Enhance the usability, efficiency, and accessibility of VIVE Hub to deliver a smooth and intuitive experience for users across various functionalities and platforms.

⚠️ Challenge

Designing a cohesive and accessible interface that supports complex tasks such as VR streaming and tracker setup—while ensuring consistency across platforms and maintaining ease of use for both novice and advanced users.

What is VR Connection Center (VIVE Hub)?

VIVE Hub streams standalone headset to PCVR, enables tracker setup for enhanced SteamVR experiences. VIVE Hub lets user do more with All-in-one VR headset by connecting it to PC.

Imagine turning your lightweight All-in-one headset into a powerful PC VR system to play high-end VR games with stunning graphics, also can help set up motion trackers and virtual desk.

HTC VIVE Hub →

Project Task I

VIVE Hub Optimization

Connection Hub &Streaming Competitive Analysis

Identified usability gaps, content accessibility challenges, and engagement opportunities. Insights drive improvements in personalization, enhancing retention and overall streaming experience.

Key Issues & Solutions:

  • Unclear Technical Settings: Advanced terms like “Dynamic bitrate” or “TCP mode” were confusing. We added simple explanations and tooltips to help non-experts navigate settings with confidence.

  • Limited Control & Customization: No adjustable refresh rates, no PC-side audio settings, and language settings tied to system defaults. We introduced more flexible performance options and in-app language controls.

  • Poor File Management: No bulk delete or single screenshot download made file handling frustrating. We redesigned the interface to allow bulk actions and clearer file structure.

  • Low Interface Readability: Text and layout were dense and inconsistent. We improved spacing, hierarchy, and labeling to make content easier to read and scan quickly.

Translate analysis results into UX/UI Design

Project Task 2

Design New Features

Introduces new functionalities to meet evolving user needs but also refines existing interfaces to maintain consistency, usability, and efficiency. Designed the new features for New prduct VIVE Focus Vision, like DisplayPort Firmware Update and DisplayPort Mirror etc.

(1) DisplayPort Firmware Update tool

Defined the end-to-end process for firmware updates, ensuring clear error handling, progress visibility, and recovery flows.

Project Task 2

Design New Features

Introduces new functionalities to meet evolving user needs but also refines existing interfaces to maintain consistency, usability, and efficiency. Designed the new features for New prduct VIVE Focus Vision, like DisplayPort Firmware Update and DisplayPort Mirror etc.

(1) DisplayPort Firmware Update tool

Defined the end-to-end process for firmware updates, ensuring clear error handling, progress visibility, and recovery flows.

(2) Lock/Unlock Hub

The Lock/Unlock Hub feature is essential for toB case managing access control within a system. It ensures security by allowing authorized users to lock or unlock key functionalities, preventing unintended modifications or unauthorized usage.

(3) DisplayPort Mirror

Designed the DisplayPort Mirror workflow, focusing on a one-click experience for seamless screen mirroring. Ensured components followed the Design System, maintaining visual and functional consistency.

Project Task 3

Refined and expanded the Design System

Reorganizing and optimizing the VIVE Hub Design System in Figma involved a structured approach to enhance consistency, scalability, and efficiency. The process included audit, reclassification, variable integration, and documentation to ensure a streamlined design workflow.

Project Task 3

Refined and expanded the Design System

Reorganizing and optimizing the VIVE Hub Design System in Figma involved a structured approach to enhance consistency, scalability, and efficiency. The process included audit, reclassification, variable integration, and documentation to ensure a streamlined design workflow.

Project Task 4

Translating OOBE Insights into Actionable Design

Understanding that users expect a frictionless setup, the OOBE flow to prioritize clarity, efficiency, and user guidance. This included:

  • Guidance: Visual/text tips to resolve connection issues.

  • Comfort & Fit: Step-by-step guide for proper headset wear.

  • Setup Process: Streamlined onboarding—language, time zone, network, play area, account.

  • Error Handling: Clear, helpful messages to aid troubleshooting.


Project Task 5

Release Check

Responsible for ensuring the product met design intent and quality standards before launch. This involved:

  • Conducting a comprehensive usability test to validate feature performance and alignment with user needs.

  • Collaborating closely with engineers and QA teams to identify and resolve critical usability barriers before public release.

  • Prioritizing user feedback from real-world testing, refining interactions, and optimizing system prompts.

  • Ensuring error prevention mechanisms were in place to mitigate setup failures that could lead to product returns.

Project Task 4

Translating OOBE Insights into Actionable Design

Understanding that users expect a frictionless setup, the OOBE flow to prioritize clarity, efficiency, and user guidance. This included:

  • Guidance: Visual/text tips to resolve connection issues.

  • Comfort & Fit: Step-by-step guide for proper headset wear.

  • Setup Process: Streamlined onboarding—language, time zone, network, play area, account.

  • Error Handling: Clear, helpful messages to aid troubleshooting.


Project Task 5

Release Check

Responsible for ensuring the product met design intent and quality standards before launch. This involved:

  • Conducting a comprehensive usability test to validate feature performance and alignment with user needs.

  • Collaborating closely with engineers and QA teams to identify and resolve critical usability barriers before public release.

  • Prioritizing user feedback from real-world testing, refining interactions, and optimizing system prompts.

  • Ensuring error prevention mechanisms were in place to mitigate setup failures that could lead to product returns.

Impact & Outcome

  • Enhanced Operational Efficiency: Redesigned UX flows for seamless hardware and software streaming, reducing friction in setup and real-time usage.

  • Optimized Design System: Established a consistent, scalable design framework, improving cross-platform UI coherence and reducing development overhead.

  • Refined Streaming Usability: Addressed critical pain points in hardware-software interactions, connection stability, and user control over streaming settings.

  • Improved Release Quality: Led usability testing and iterative improvements, ensuring a polished experience before product launch.

Key Takeaways

  • Deepened Technical Expertise: Gained a stronger understanding of streaming protocols, hardware-software integration, and system performance optimizations.

  • toC/toB UX Challenges & Solutions: Identified and solved issues specific to enterprise and developer-facing tools, balancing functional depth with usability.

  • Cross-functional Collaboration: Worked closely with engineers, PMs, and QA teams to bridge UX best practices with technical feasibility.

Let's talk

Let's talk

jenchuhsu@gmail.com

jenchuhsu@gmail.com