When a product is complex and has many functionalities the User Experience can suffer. So what about using a 'fake' chatbot in order to guide the user step by step? This is what I worked on with a prototype for KAYAK Explore.

The Explore product

Have you ever tried KAYAK Explore? This tool is perfect if you are looking for a travel destination and have no clue where to go. to be honest it is one one my favorite tool on KAYAK.

KAYAK Explore relies on a map view and displays most of the cities around the world you can travel to based on the airport you've selected. For each potential destination Explore gives you the price of the cheapest flight.

The idea is to give the users an overview of where they could travel at a glance.
However, most results are trips with an extremely short duration or flights with multiple stops. In order to find the flight that suit them best, users need to interact with the filters. 

The issue

The biggest issue with Explore is the User Interface that leads to a confusing User Experience.
In order to find the destination that may be of interest for you, you must interact with all or at least most of the filters. By doing so you will trim down the many destinations showing up on the map to only end-up with a few.

Step by step filtering

 When it comes to book a flight to go somewhere all users have different preferences but eventually four information remain essential:

• Departure airport
  
• Time of departure / Trip duration
• Budget
• Time of travel / Stops

The image above is the current version of Explore. The current interface is extremely confusing as users need to understand by themselves the different filters.

Making it fun and easy to use

As I started working on this project I realised I couldn't simply get rid of this confusing user interface, so I needed to come up with something additional that would be really simple, easy to use and fun to interact with.

A fake chatbot

Creating a real chat bot is very complex, but in this case the amount of possible interactions is very limited. So why not creating a fake chat bot that would ask specific questions to the user, with predefined answers and bring the user into a funnel until we can suggest relevant destinations based on the selected answers.

Design choices

When it comes to the look and feel, many messaging Apps are available and can be a source of inspiration. In my opinion Facebook Messenger is one of the best and it really inspired me for this project. I love how minimalistic it is and how simple it is to use.

Wireframing

I never work on a messaging-like project before so creating a rough mock with all the possible questions/answers was very helpful to start with.

Wireframing the map view wasn't necessary here as it remains the same. The only new element is the section containing the fake chat bot.
The tab menu at the top gives the possibility for users to play with the traditional filters if they really want to.

Designing

The Design was made with Sketch.
My goal was to keep everything as simple and clean as possible, no gimmicks and decorative items, every single element in the mockup serves a purpose and gives an information.

The mockup is fully responsive and the width of the chatbot section is the same width as an iPhone. This makes the mobile integration easier.

Prototyping

The prototype was entirely made with Origami Studio.

Origami is challenging but it's great and was the best solution for this project as it was quite technical. The messaging section needs to scroll down automatically when an answer is selected by the user, and the height needs to adjust automatically based on the content showing up for the answer.

Conclusion

I loved working on this project due to all the technical aspects of the prototype. However, you won't find this on KAYAK, the project never went to development.

Do you want to talk about Product Design, 3D animatiom or any other exciting projects? Just drop me a line at this email address: contact.ferrere@gmail.com

You can also find me here:
Twitter    LinkedIn    Skillshare   Instagram