Virtual Reality Mobile App (Saota)

My Role: UI Designer

saota01.jpg
saota04.jpg

Background

SAOTA is a firm of architectural designers in Cape Town, South Africa. Their virtual reality (VR) app allows users to "walk through" and look around buildings and homes. However, their app was difficult and confusing for people to use. My job was to redesign the app to fix the previous problems, which included:

  1. The main call to action (downloading the VR file for each location) was difficult to find.
  2. Users were confused when navigating the app, because many buttons were either hidden or difficult to see.
  3. Many users would accidentally start downloading a VR tour when they really just wanted to read more information about the building.
saota03.jpg

Step 1: Create a clear call to action.

The previous app only used black, white, and gray. The reasoning behind that was to allow the user to focus on the beautiful images. However, that made the call to action buttons difficult to find. The previous "download" button was a subtle white outline that many users never noticed. Since downloading the VR maps is the main purpose of the app, I wanted these buttons to stand out. Thus, I added bright orange as an accent color. The orange complemented the warm tones found in most of the images, and I used it sparingly to keep the focus on the architectural renderings. The only time the orange button is used is for the download button, so users will not be confused. When they see an orange button on this app, they know it means download.

Step 2: Ensure essential navigation buttons are always visible.

When using the VR portion of the app, there are two buttons that need to be visible to the user are all times: the back button and the toggle to switch VR on and off. These buttons need to be clearly visible, but at the same time, they cannot distract from the experience of the VR. They also need to be visible on all background colors- whether the user is looking at a dark corner of a house or up at the bright sun in the sky. I decided to make the buttons white outlines to keep them subtle and non-distracting. To ensure that they were always visible, I added a slight dark gradient behind them that was nonintrusive to the rest of the screen.

saota02.jpg

Step 3: Clearly differentiate between downloading a file and viewing more info.

Previously, tapping an image immediately started downloading that VR tour, unless users clicked on a very specific corner. This frustrated many users, as the VR files were very large, and many people accidentally downloaded them and used a lot of their phone's data. While much of UX design focuses on eliminating clicks and simplifying steps, there are certain times when it's necessary to add a step. This is one of those cases. Instead of clicking the image and triggering a download, I added a separate informational screen that gives a basic overview of the property and uses a bright orange "download" button. I also put a small version of this button on the main list view page, so if users were searching for a way to download, this would signal to them that they are in the right place. 

Final Product

The new app was much more intuitive, clean, and easy to use. There were no more hidden features, and all the app’s capabilities were clear to the user. The new app allows users to easily and seamlessly navigate to the virtual reality aspect, which is the main focus of the app. Users can now focus on enjoying walking through luxury mansions and skyscrapers without getting frustrated by confusing navigation or hidden buttons.