Yalantis: iOS, Android And Web App Development Company

Case Study: Designing Virtual Reality App With 360 Virtual Tours

Did you know that virtual tours are already a reality? You only need cardboard, in order to visit literally any place from the comfort of your sofa. We were lucky enough to experience what it’s like thanks to one of our US clients who knocked on Yalantis’s door a couple of months ago with a great Ascape project – a video player designed specifically for cardboard-powered virtual reality! This was our first try at designing a virtual reality app, and it turned out wonderfully!

What’s Ascape all about?

One word: immersion. The app offers incredible virtual experiences that take people into the virtual world of the most vibrant cities of our planet. The virtual tours that the app offers are a great way for users to better understand where they could travel and stay, and what they can do at different destinations.

Our role in the Ascape project was to design this app. The main features of Ascape include the list of episodes, an episode preview, and a player adapted for cardboard which reacts to the position of the phone in space.

Prototyping

We started by researching existing virtual reality apps. However, since virtual reality technology is still emerging there were only a few apps on Google Play at that time that offered something similar, and we couldn’t find anything that caught our eye.

We decided to become pioneers in virtual reality app design, and got down to creating wireframes for our app.

Wireframes for the virtual reality app

Now let’s talk about each screen in detail.

The Welcome Screen

Since this is the first screen that a user sees in the app, we decided to create intrigue by displaying a spectacular panorama of one of the most impressive places. We asked our client to provide us with a static view that would show a deep perspective to enthrall the user right after they opened the app.

Welcome and sign up screen in the virtual reality app

From the Welcome Screen a user goes to the authorization screen.

Authorization

One of the client’s requirements was to implement user authorization, although I thought that might not be the best idea as it could affect the user experience in a bad way. Since the app doesn’t even have a user profile, it seems a bit annoying to submit my email to the app only to watch a couple of episodes. But you know what, I guess I would do it! After all, it’s virtual reality, and people are more than curious about experiencing this new medium.

Eventually, I agreed with the client’s opinion, and designed a registration form for the Ascape app.

The list of episodes

This list contains featured episodes as well as the rest of the episodes that aren’t featured. My first thought was to make one list for all episodes, and visually highlight the featured ones by putting them on top of the list. But our client had another idea. He suggested that we make two lists of episodes – one for the featured ones and the other for the rest of the episodes. What’s more, the featured episodes had to always be expanded just like in the preview.

Virtual reality app Ascape: a case study

I had to move away from common-sense rules about uniformity distressing for a mature designer, and divided the list into two tabs. By clicking on the first tab a user sees the featured episode, which shows up in expanded form, and by clicking on the second tab a user sees a list of all other episodes. In the second list we displayed a picture, the name of the episode, its size, its loading status, and the option to delete downloaded episodes and to download others.

Episode preview

This screen is identical to the Featured Episode screen. Here we inserted a panorama picture similar to the one you can see on the Welcome Screen. We did this on purpose to give users something to look at while the episode is being downloaded.

Once the Ascape episode is downloaded, a “Play” button appears on the preview page. This launches the video in a player specifically designed for virtual reality cardboard.

The basic player (without any controls), was developed by our client. We wanted to expand its parameters by adding a progress bar to the video and some animation for starting and stopping playback, but in the end we came to the conclusion that an MVP can do without this functionality.

360 player for the virtual reality app

Player 360 Virtual Tours

After you put your device into a cardboard, you can launch an episode and be fully immersed in your city of choice. In one of the episodes in the Ascape app there is even a personal guide: a real human telling you about the sights of San Francisco. He shows you the streets of the city, tells you its history, and at some point you even end up in the passenger seat in his car! It’s incredible!

Designing a virtual reality app erased all my doubts about the future of virtual reality technology. I think that virtual reality will become very popular in the future, and will surely develop in many ways over the coming years.

Insights

How You Can Innovate Flight Search and Hotel Booking Industry

Design

Our First Look at the Floid Prototyping Tool

Design

How to Adapt Your App's UI and UX to Another Platform

Learn more about travel apps

Key features, competition, and our case studies

Click to check out