VR360

Design & development for a VR video streaming cross-platform mobile app

Client

Mecha Technologies, USA

Scope

Concept design, UX/UI Design, PWA Development

Released

November 2018

Tech Stack

Vue.js, A-Frame.js, Laravel, HLS.js, Videojs-vr

play

Experience Design

Despite there are dozens of video streaming apps now, there were no dedicated VR video mobile apps/platforms at the moment.

Twitch

Wowza

Vimeo Live

YouTube

Facebook Live

Periscope

Brightcove

Kaltura

Netflix VR

Comparison of live broadcast platforms

We investigated the possibilities and limitations of VR-streaming in browser-based mobile apps (PWA) like supported cameras, file sizes, mobile device support, and brought the best of it to a working demo.

UX-stage took us here the most. Before the final design, we iterated approach several times to discover optimal flow both for streamers & end-users.

Mecha proprietary Face Login technology allows registered users to login with the front camera on the authorized device.

Depending on the plan, streamers can select the video quality and connect different media sources for a cast.

While user onboarding, we emphasize the idea of content with a gyroscope - when you rotate the device in space, slides with a description change.

App Development

In terms of development, the challenge to bring media streaming to PWA: there was no existing libs & browser support was quite limited.

As a part of the solution, we created a front-end app (vue.js) that stays in between the mobile app and media server (node.js), has media caching, and automatically adopts stream to user's devices capabilities.

Tech stack

  • Cross-platform PWA
  • VUE.js
  • NODE.js
  • 100 0

    Days to design and create a working PWA App

  • 32 0

    Wireframes & Design frames created

  • 11 0

    uses interviewed at the research stage

  • 17 0

    devices tested for compatibility

“Mecha VR is a venture project. We aimed to create to extract maximum value to the app in minimal terms & budget. Crisp design and dev team managed it to happen flawlessly.”

CONOR ROBINSON, CTF, CEO

VIEW