VReal — VR Streaming Platform

Vreal Inc. set out to build a new kind of interactive content consumption. Creators could record themselves playing a game, in VR or in traditional 2D, and publish the recording to the Vreal platform. Viewers could then play it back in VR or 2D, placed inside the actual game alongside the creator, asynchronously. It removed the passive-consumption barrier that limits platforms like YouTube, Twitch, and Mixer.

I was the Sr. UX Designer, responsible for the UI/UX and visual design across desktop, VR, and web, with most of my time on the main desktop application. I worked directly with the VP of Product, who was my boss, along with project managers, QA, and engineering on both the front and back end.

Content creators: Recorded and created content for the platform. They needed an environment and tools that let them record and upload with as little friction as possible, and wanted to customize individual recordings with titles, descriptions, and tags.

Viewers: Consumed the content. They needed to watch, leave comments, and create parties with as little friction as possible.

Game developers: A customer as well, since we'd need to work with some of them to create an optimal viewing experience.

Advertisers: We planned to offer advertising packages to third parties wanting to promote on the Vreal app, including landing page takeovers, sponsored creator content, and banner ads.

The design work spanned the desktop application and its flows, VR explorations, motion studies, motion graphics for the web player, and a mobile concept.

The landing page went through three versions while I was there, from the initial controlled release to a fully responsive layout.

Creating flows proved invaluable for understanding how systems interconnected, how users would navigate features, and making sure every necessary screen was accounted for. These are two of many: one plots the publishing experience for content creators, the other an exploration into letting users buy and change their in-game avatars, which was never realized.

Software: LucidChart

Every feature, major or minor, benefited from rapid iteration to test several solutions. These low-fi wireframes explore the main landing and browse pages, and the hi-fi one is an iteration of the third and final responsive redesign.

A viewer watching a recording in VR would miss any party invite. Invites only appeared on the desktop app, so unless someone took off their headset and went looking, they'd never know one had arrived.

The exploration was a notification bracelet. It would blink and make a sound to get the user's attention, and they could rotate their wrist to bring the notification up and act on it. Balancing that against not interfering with the viewing experience was the design problem.

Only the bracelet and the Pause notification were implemented, plus a blue bracelet to indicate party members. Other priorities and the eventual move to 2D stopped the more advanced features from being built.

I created and assembled the bracelet assets and the look-at behavior. Software: Unity and Photoshop

Motion studies are a good way to communicate how a feature is meant to work. This one shows my design for the volume sliders. The desktop app still needed to be usable from inside VR, so the solution had large responsive sliders slide out on a shelf from the left.

Software: Assets created in Figma and edited in After Effects.

We wanted to neutralize wait times for users watching content through our web portal, previously at vreal.net. I made two three-second motion graphics over two days, both deliberately frantic, with multiple elements competing for the user's attention.

The player had two load states to communicate:

In Queue: "Getting ready…" — the user has launched a piece of content. Depending on their connection and other backend elements, this could take upwards of a few minutes in extreme cases.

True Loading: "Almost there!" — plays once the chosen content has finished loading and is about to launch.

Software: Assets made in Figma, animated in After Effects, and exported with the Bodymovin plugin to work in a React environment.

A mobile version of Vreal was discussed as a future possibility but never made it into production. I took it on myself to mock up what it might look like, as a jumping-off point for the team.

Vreal reached Steam Early Access and even shipped a web-based viewing experience that didn't require a headset. It wasn't enough. The VR market was still small, the company couldn't bring in additional funding, and Vreal closed down in 2019.