ROLE: Senior UX Designer

PROJECT: Vreal Desktop Application

WHEN: March 2018 - Current

Vreal Inc. is building a new means of interactive content consumption using proprietary software. Vreal allows content creators to record videos of themselves playing a game in either VR or 2D and then publish this video to the Vreal platform. Viewers can then playback and watch these videos in either 2D or VR which places them in the game, asynchronously, with the content creator. This has removed the passive consumption barrier that limits current platforms like YouTube, Mixer and Twitch.

I’ve had the privlage of working on many different elements during my time at Vreal. I’ll list a couple below and leave the others for later or if inquired about.

social TAB redesign

what

The apps previous Social Tab had generated a bunch of pain points after its initial release. We were looking into redesigning the Social Tab for the app and I felt we could do away with the tab going full screen in order to handle adding friends, managing the party, etc. This full screen element had an unfortunately side effect of blocking and preventing the viewer from accessing / watching content. Given we are a content consumption platform this was not going to be ideal moving forward.

RESEARCH

We already had a feature set for Social so doing indepth research wasn’t nessessary. My main goal was to reduce the Social Tab’s footprint so

IDEATE

After the research phase I spent a good amount of time mocking up various ideas. I started with Lo-Fi mockups doodled in my sketch book and then moved on to mid-fi and hi-fi mock ups in FIGMA and finally creating a complex interactive prototype.

PROTOTYPE

Remove full page social element

Below is a link to the Interactive FIGMA Prototype I built to demonstrate to the team what the app would feel like if we condensed the full page social element down into a shelf.

complex wireframing example

Motion Graphics

Below are two motion graphics I created for our web based player at vreal.net/watch. We wanted to try and neutralize wait times ion the two loading states we currently have which we’ve dubbed: In Queue and True Loading.

Both animations

In Queue: “Getting ready…” - Things are getting setup for the user and depending on their connection and other backend elements determins the wait time.

True Loading: “Almost there!” - This animation plays when a video is finishing loading and is about to play.