Around the world with KAYAK & YND

There’s nothing quite like going on a trip, confident in the decisions you’ve made. The team at KAYAK are always on the lookout for ways to make sure you’ve picked the right flight, the perfect hotel or the ideal rental car. They recognized early on that the immersive nature of 360 content makes it an exciting medium for exploring travel destinations and even for booking your next trip.

To explore the possibilities of virtual reality in travel, KAYAK approached our team to help them design & build a pilot experience.

We collaborated with YND to test how we could push the boundaries of VR and were impressed with their expertise. And we truly love the immersive experience we created with them. We think people are going to have a lot of fun with this and experience travel like never before!

Stefan Petzinger, Senior Vice President of EMEA Marketing at KAYAK

What We Built

The potential of VR as a medium is unquestionable, but how to take it beyond just a platform for consumption of 360 images and videos remains an open question.

Our goal was to find a way in which virtual reality can be used to help travellers make more informed decisions. In order to do so, we developed a proof-of-concept Daydream app that enables users to “sample” destinations before deciding on the next trip.

Users are able to tour stunning locations in 360, listen to audio guides and read contextual travel tips. Selected hotels can also be visited in VR. Travellers can experience the suites, amenities and hotel surroundings in a true-to-scale environment.

Under The Hood

And since short iteration cycles and fast concept verification were extremely important, we decided to go with Unity as our development platform.

Unity comes out of the box with very decent support for VR development. Apps can be targeted for different platforms, using integrations with well-established, publicly available SDKs. We chose Daydream as our initial gear set, but thanks to Unity the application can be ported to Oculus, Vive or any other major VR headset.

The Challenges

To deliver both an immersive and informative user experience, as well as a functioning and easy to update product for KAYAK, we needed to overcome four main challenges.

Nailing the User Experience

Designing for a new medium can be overwhelming. We went through quite a few design iterations and tested a bunch of prototypes before we settled on the final direction for the app.

In the process we established three key design principles to guide us through the development process:

Reality instead of abstractions

Immersive and realistic 360 content is at the center of the VR experience. We used “flat abstractions” like text, iconography, buttons only when absolutely necessary. When using 2D elements bring them to life with 3D effects and elegant animations.

Casual consumption

People will use VR in a relaxed mindset. Casual consumption will be the primary use case for the app. Content should be easy to discover. There should be a reduced number of choices to make. The default action should be one tap away.

Lightweight interaction

A great VR experience is simple and magical. It’s all about finding and enjoying immersive content with the least amount of friction. Create experiences that have the least steps possible between launching the app and content immersion. Avoid making users enter text whenever possible. Consider using voice interfaces instead.

To avoid a confusing and cluttered interface, we created a series of contextual hotspots, displayed on top of the photosphere. Each hotspot is associated with a nearby hotel, another point of interest or a valuable piece of information. UI elements appear only when they add useful context to a place. The key focus is on creating an immerse environment for users.

Navigation

We all know that finding your way to a specific landmark while you’re traveling can be tricky – we came up with a smart solution for this problem called X-ray view.

X-ray view can be entered from any scene by simply pressing a button on the controller. As you might already guess from its name, it makes the current scene invisible and allows the user to enter the see-through mode. The user can see a series of markers placed on the horizon. Each of the markers represents a famous landmark, like Ponte di Rialto in Venice or Buddha Stupa in Kathmandu, with a distinct icon.

Easy Content Management

We also incorporated an iterative approach on the content side. Building every scene from scratch within the Unity editor would be very inconvenient and require a lot of effort to maintain. It would also make the app less scalable, especially when adding more destinations in the future. So instead, we opted for a dedicated content management system (CMS) for KAYAK’s VR app.

To create a new destination for the app, the content manager just has to create a new record in the CMS, define stories for the location and upload a set of panoramic images for each of them. Then she can start connecting scenes by simply dragging & dropping navigation hotspots onto the scene and choosing either a scene or a story the hotspot will lead to. Thanks to the WYSIWYG approach, new locations can be added to the system very quickly. This ensures easy maintenance of the overall solution, as newly added destinations can be published and existing ones can be updated.

But that’s not all what you can do with the KAYAK VR CMS. We’ve added a comprehensive set of experience enrichment options to the system. Highlights can be defined in the scene, which provide useful contextual information about a location or landmark. A dedicated voice over and background ambient music enhance the story telling and mood of the place.

Integration of Real-Time Pricing

Last but not least, we wanted the app to be in line with KAYAK’s mission to bring users the best travel deals. We decided to show actual, live information about the cheapest flights and best hotel deals in the area, which users can then visit inside the app.

This was done using a dedicated native Android module, written purely in Kotlin and integrated to Unity through a JNI (Java Native Interface) conversion layer. The module communicates directly with KAYAK systems and caches the up-to-date travel information in local app storage to conserve bandwidth and minimize UI latency. The fetched information is displayed on the information hotspots and placed in various scenes. This information can easily be extended with booking capabilities in the future.

Give KAYAK VR a Go!

Both KAYAK and YND are excited about the possibilities of Virtual Reality and immersive 360 content in planning booking travel. The first iteration of the KAYAK VR experience is now available in the Google Play Store. Take it for a spin and let us know what you think!

At YND we help companies successfully launch apps across various industries: from mobile payment, finance management, travel booking to E-commerce. In need of some brain power? Reach out to us via hello@ynd.co with questions about your projects.