VR360
Design & development for a VR video streaming cross-platform mobile app
Mecha Technologies, USA
Concept design, UX/UI Design, PWA Development
November 2018
Vue.js, A-Frame.js, Laravel, HLS.js, Videojs-vr
Mecha VR® is a mobile application for watching or streaming stunning moments in VR 360° video format.
The mobile app runs on Mecha® video streaming platform and allows authors to share and promote their VR-content in a single place.
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