Design & development for a VR video streaming cross-platform mobile app
Mecha Technologies, USA
Concept design, UX/UI Design, PWA Development
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.
Despite there are dozens of video streaming apps now, there were no dedicated VR video mobile apps/platforms at the moment.
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.
While user onboarding, we emphasize the idea of content with a gyroscope - when you rotate the device in space, slides with a description change.
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.
- Cross-platform PWA
Days to design and create a working PWA App
Wireframes & Design frames created
uses interviewed at the research stage
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