Samsung VR Videos mobile
Platforms
Gear VR
mobile
​
Role: UI | UX VR Design Lead
​
Software
3ds Max
Vray
Photoshop
Illustrator
Unity
​
Compatible Devices
Samsung Phones:
• Galaxy S9 / S9+
• Galaxy Note 8
• Galaxy S8 / S8+
• Galaxy Note FE
• Galaxy S7 / S7 edge
• Galaxy Note 5
• Galaxy S6 / S6 edge / S6 edge+ Samsung
Web and Mobile: (Not featured)
Tablets: • Galaxy Tab S2 • Galaxy Tab S3 Apple Phones: • Devices running iOS 11 or greater
​
​
​
Developed mobile design for Samsung VR that used a "real-time" environment. The goal was to run a highly optimized 3d environment for mobile VR platforms. The original room was a cube map and wanted to move to full 3d. The entire environment, baked lighting, single-pass shaders, atlas textures, are individual work. The work below shows my UI/UX work and main responsibilities. Lead a small team that shipped globally to over 12 million + users world wide.
Design and creative process
About the Project
The above graphic description showing a navigation panel above the table where videos float in front of the user. This wide thin panel concept was released in the early days of VR. I feel solid UIs that work for web and mobile can be translated to VR but need great spatial design.
This version of the VR mobile application was released in 2015.
​
Version 2.0 was an update to streamline and improve the immersive mobile VR experience.
• Signing in, following content, and customizing the users video experience
• Giving the user the ability to review larger amounts of 360 videos in groups and categories
• Improving version 1.0 UI with panel showing videos
• Optimization and creation of 3d room for mobile platform creating more depth
• Improving the video playback and UI screens.
• Allowing users to upload and watch their own created videos
Goals
Improve first version of of Samsung VR by simplifying options, improving menus, and improving usability of users for better UI |UX and tracking data.
Challenges
The existing CMS had a system of folders with videos, images, or other content. Not having an option to change this system and work with in the constraints of the current CMS and improving on and re-creating a new visual representation of this content library while also making it easier to use in a VR environment. I created the concept of an animated group of videos that would shoot from the front facing screen with a list of videos facing the user shown above. The user could select the folder directly to expand a new set of videos or access them quickly from the panel. This was all running at top frame rates for mobile VR. The entire room and city are optimized low poly objects with low draw calls, scene order, and atlas textures. The concept of a front facing images or options had impacts on other common UI/UX systems seen on current systems being used today. Also adding an new improved pagination bar for groups of videos.
A rough sketch showing a high-level interaction design concept of nested videos moving out to a panel in front of the user.
​
The long panel includes a few older layouts with initial screen progression.
​
There are multiple ways of showing screen progression. Here is a tree system or visual diagram.
​
These layouts are easily modified in Figma.
​
​
​
Additional challenges including using new hardware to navigate content show above. The Layouts and interaction wires using the Gear VR hardware only buttons to navigate user flows. This shows examples of how a user would navigate using the hardware "only" back arrow form the headset.
Whiteboarding quick sketches of user flows has always been a regular practice for any of my designs. I sometimes mock up visuals with wireframes, or modify throughout the project depending on the situation. These can be broken a part into groups throughout the iterative design process.
After much of the UI/UX where in place, with the concept of placing the design in rough 3d living space created multiple environment concepts. Lots of ideas and revisions being made before landing on a room above a city skyline. I Sometimes work in greyscale creating architecture, room, and mood designs before adding color to match UI.
Working in greyscale for light and value is a good practice before adding color.
Used several cube maps to quickly create background environments. These cube maps look great in the distance but the scene needed to be pushed with more depth. Everything in VR with 3d objects including the environment would accomplish this immersion. Also adding space and design layout for UI | UX Unity implementation. Creating soothing environments to feel relaxed, and giving the UI/UX the correct space for both user experience and spatial presence are important to think holistically for AR | VR projects.
Using low poly techniques I was able to get a highly optimized environment looking pretty solid for mobile VR with lightning-fast frame rates.
A lot of technical art challenge's are required inside game engines to get peak performance from Mobile AR | VR development.
This UV tile shows the blue lights baked into the lower bricks. The process of using real-time 3d objects baked with a texture with a single-pass shader was used for mobile.
Screenshot result of real-time 3d assets displaying low poly atlas textures. The city background environment is also 3d outside the windows.
The entire set is around 60k polygons.
Environment Without UX/UI.
Including UX/UI screens with highly optimized 3d assets for mobile VR. This runs on Note 5, Galaxy 6 mobile devices, and above.
Result
The overall result for version 2.0 of Samsung VR also shipped globally in 11+ countries including preloaded application on Gear VR and GO, including mobile, web, and tablet clients.
​
User feedback and testing
one of the first 360 video services available on mobile platforms. Internal testing with goal of distribution of video content using CMS. Samsung Marketing also helped in the success of making the first VR video service a fun experience for everyone.
​
Average rating of 4+ stars from VR users globally.
​
All screens represented above are live in in official products.