I designed a volumetric video platform. It runs all volumetric, photogrammetry, and 360 assets, and serves as a white label solution for clients to develop their own XR apps. This is the browser component of the mobile app.
The format of volumetrics – as both videos and 3D objects – presents a new challenge of how content is best presented and navigated in mobile content browser. How will publishers most likely film and organize their holograms? How will users select, preview, and download holograms, and manage the photos and videos they take?
We wanted an app that is not only a hub of volumetric and spatial content, but is made of components that are standard and versatile enough for use as a white label app – that can be handed off to other teams to easily re-skin, re-design, and develop. I stayed close to Google’s Material Design guidelines throughout the process.
Organizing for versatility
I structured folders by Series, Episodes, and Scenes, which are the holograms themselves. Episodes act as mid-level folders – like seasons on a TV show – and are condensed into tabs for smoother browsing.
In designing folder organization, I looked at the UI of mobile video apps for Netflix, Youtube, as well as Sketchfab, a platform for browsing 3D models. The white-label solution I came up with incorporated aspects of both types of content browsers, focused on browsing through and downloading several large volumetric files.
THUMBNAILS DIFFERENTIATE FOLDERS AND SCENES
double tap to download
The goal of the content browser is to lead the user to the hologram they want, and allow them to tap “Download”, and repeat this many times. Like entering credit card info before purchasing, this a large painpoint during which users hesitate, reconsider, or lose patience entirely. Given the time and download sizes, this will remain issue that will have to be solved by fantastic content, and rather than just smooth UX in the white-label.
In this process, I found that clever and quick gestural download interactions were not as intuitive as I thought, and added a level of confusion. It was better to keep it simple. In our testing, we had several download quality options – however the best practice for any consumer-facing client would be to just stick with one.
A HOLOTHUMB FOR YOUR PATIENCE
Overcoming lengthy download times and file sizes was a major challenge of the content browser. Upon tapping a scene thumbnail, the Holothumb shows a still-frame 3D model of the hologram with camera control. The visualization informed users (“Do I want to invest 500MB into this?”) and gave them something more interesting to play around with than a loading bar. We found that some measure of instant gratification made for a smoother experience. I designed a simple Unity scene with floor measurement indicators (meters) and skyboxes that fit the colors and themes of each volumetric character.
a gallery for sharing
All photos and videos are stored in a local device folder. The gallery allowed users to add text and stickers and share their media.
While many users prefer to open and edit their files in Instagram or Snapchat, I thought that having these features in place would make it easier for future teams to create their own branded experiences.
what next?
- Design of Desktop (WebAR) and VR content browsers
- Expansion of social features support – user profiles.
- UI for sideloading, importing, and downloading content from outside links