WHERE I WORK
NOON App: VR mobile application
NOON VR app is a tailored VR content platform for NOON VR headset, providing an immersive experience.
This app was initially developed in 2015 as the official app for the NOON VR headset. The app sat at the core of the NOON’s virtual reality experience with its features: full-HD video play and real-time streaming, patented VR rendering engines, and advanced head tracking technology. The app was provided exclusively to the NOON VR headset customers.
Numerous features were added in haste without any order
At the beginning of 2015, NOON VR app’s primary function was just a universal VR video player. However, a lot of features have been added to the app since then -- including dedicated channels for pop-stars (N-STAR), remote desktop connectivity, and others. Speedy updates have been the company's top priority, thus these new features were continuously added to the already-long hamburger menu.
IDENTIFYING KEY ISSUES
Additional steps in finding key functions and the lack of intro to new features decreased the usability of the app.
Users had to go through the long list of features in the hamburger menu to find what they wanted. In addition, as the VR itself was a relatively new concept to many people, users occasionally found it hard to understand and use its features, such as the remote connection and tap-to-click feature.
WHAT I DID
I restructured the site map to streamline the user flow and enhanced key features’ UI to minimize user friction.
I proposed a new content-centered design to advance the app into the next level of VR content platform. I have conducted internal stakeholder interviews to identify key issues and drafted journey maps so that I can understand how users would feel and react. With the goal of improving usability, I analyzed the existing site map of the app and restructured it to minimize additional steps. Lastly, I focused on key features where the users experienced frictions.
I conducted interviews with internal stakeholders in different teams.
Each team focused on different features. Marketers, who had to face and talk with clients raised an issue that users had to go through too many steps between pages and features. Developers on the other side worried about light-users’ understanding of features. The customer service team told us that there has been a lot of inquiries on the remote connection function.
I visualized two journey maps of users to understand how they feel and what they think when they execute certain functions.
I analyzed the existing app’s structure to categorize menus according to key features.
This study allowed me to understand which feature has higher importance and in which hierarchy they have to be presented. I came up with five core groups of functions to put on the bottom tab bar of the main page.
LOW FIDELITY WIREFRAME
I drew simple wireframes before heading into designing the interface elements.
Mobile mode #1: Strengthened the tab bar
I could come up with a simpler and more streamlined interface using a tab bar at the bottom after researching and understanding the information architecture. Every function was inside the hamburger menu, so it took two steps to move around functions. I put main functions out of the hamburger menu and placed them on the bottom tab bar. It shortened steps and made it easier for the users to recognize at a glance. I also put channels and categories on the top so that users can have direct access to them with minimal steps.
Mobile mode #2: Provided visual guides for an unfamiliar feature
With the remote connection feature, users can stream their computer screen to the app and view it on the VR headset. However, I found that some users might not be familiar with this function and would struggle to understand how to use and set-up this feature. This function originally came with a lengthy explanation in tiny fonts. I designed short intro graphics on two modes and a step-by-step visual guide. These were displayed at the first approach to help users understand more easily.
VR mode #1: Optimized video player interface for head-tracking environment
I enhanced the video player interface by enlarging play control buttons and rearranging them to the center so that it would help minimize the user’s head-tracking motion. With a VR headset, the user has to move and tilt her head to move the cursor and such motion is not comfortable nor familiar for those who are not versed in VR already. However, the existing interface was similar to the computer’s video player UI with play controls at the lower-left corner, forcing the users to move the tracking cursor across the video area for play controls. I focused on decreasing the moving distance of the head-tracking cursor for the users.
VR mode #2: Designed a tutorial to inform the users of the ‘double-tap-at-the-back’ action
Tapping twice at the back of the phone mounted to the VR headset brings up the play control and settings overlay. This ‘double-tap’ action is NOON VR’s own action and plays a key role in using the app so that the users must be aware of this action. In the beginning, we offered a guide on the printed manual, but I decided to include a tutorial that users can view during the VR mode to provide a seamless VR experience. When entering the VR mode, the overlay will appear with the tutorial and the user has to do the double-tap to clear the overlay. In this way, the users would naturally learn the action.