Stylized blue background with a black apple in the center.

Viveport
Companion App

The app aimed to provide easy access to Viveport content while fostering a sense of belonging within the user community. Additionally, the focus on delivering a streamlined setup flow for all HTC devices demonstrated a commitment to user convenience and satisfaction. By incorporating these features into the companion app, HTC sought to strengthen its position as a leader in the virtual reality market, offering users a comprehensive and user-friendly platform to explore, connect, and enjoy their devices to the fullest.

Rolls : UX / Visual / Motion / 3D / Design Systems

Our primary challenge was to seamlessly bridge the gap between mobile and VR, crafting a delightful yet concise showcase that allows users to explore every piece of store content without feeling tethered to any single platform. We aimed to emphasize the importance of focusing on defining and building a robust UX foundation, which can be effectively integrated into the overall design ecosystem.

Heuristic analysis

Ensure that people recognize core actions (e.g., browsing, subscribing, content exploration) whether they’re on a phone screen or inside VR.

Consistent mental model

Platform-Specific navigation patterns

Establish a clear UX framework that enables effortless discovery of content and subscription models. On mobile, bottom nav bars or hamburger menus are common; in VR, consider spatial “gaze” menus or hand-gesture carousels.

Ease of exploration & information discovery

Mobile: Use recognizable thumbnails, concise titles, and brief badges while in VR: Arrange products in spatial clusters so users can glance around and immediately perceive density and variety.

Use the same color palette, typography, and iconography across mobile and VR. Animations and transitions should feel of a piece:

Unified brand language

VIVEPORT companion app displayed on a smartphone screen, with a virtual reality headset and a selection of video game titles, including racing, adventure, and multiplayer games, shown in the background.
Step-by-step tutorial for wallet entry point in app, showcasing screens for drawer menu, account, wallet, help, and how it works, with annotations for elements and descriptions.
Step-by-step tutorial screenshots on how to unsubscribe from a subscription, including drawer menu, subscription settings, main page, picker, and re-visit subscription settings, with annotations and descriptions.
A detailed infographic showing steps in a mobile app checkout process, including order summary, scrolling shopping list, checkout, and content navigation, with labels and descriptions on the right.
A step-by-step guide showing screens of a mobile app subscription process including a banner, main page, learn more, purchase flow, and dialog box with descriptions and annotations.
Two smartphones displaying a gaming app interface. The left phone shows a profile screen with a welcome message, recent games, and categories. The right phone shows a main screen with tabs for for you, social, and my collection, featuring various game titles and ratings.
Two smartphone screens displaying the HTC VIVE app interface. The left screen shows the VIVE logo and instructions to connect the phone to VIVE devices for VR content, with buttons labeled "PAIR" and "GO TO VIVEPORT." The right screen shows options to pair a VIVE PRO and VIVE FOCUS VR headsets, with a "GO BACK" button at the bottom.
Screenshots of two mobile app interfaces. The left screen shows a Wi-Fi network selection menu with options 'Home Network' and 'unknown source' and a 'Continue' button at the bottom. The right screen displays the VivePort app, showing a colorful animated scene with a dinosaur and butterfly, with options to sign in or sign up at the bottom.
Two smartphone screens showing a mobile app interface for payment setup. The left screen displays a pop-up message instructing to download the Alipay app before activating Alipay payment service, with buttons labeled "OK" and "Next." The right screen shows a prompt to select a payment method with an Alipay logo and a "Not Now" button below.
Smartphone screens showing a digital wallet setup process. The left screen displays a Visa credit card with the name William Smith, and options to edit or delete the card. The right screen shows a virtual reality headset being paired with the phone, indicating the setup process for WiFi and account synchronization.