Transavia Voice User Interface_1

Design meaningful conversation of searching flights on Amazon Alexa

With our client Transavia we have always been searching for meaningful connected experience with user engagement for channel shift and business value.

Besides the successful launch of Messenger bot, we decided to extend the conversation user experience on Amazon Alexa. The project was short-time, fast-paced. Together with a solution developer, we have been through defining strategy and use cases, setting design principles, mapping UX flow, user tests, UX/UI design, and further user inquiries within three weeks.

The result and design process was presented in company event and with the clients.

Personal contribution: Desk research; Strategy; UX flow mapping; User tests; UX/UI design

Team: Ekaterina Belousova (Solution Developer at Mirabeau)

03/2017 - 04/2017

To achieve the vision of a quality European flight provider, Transavia has developed the award-winning online platform with Mirabeau. Nowadays, with the prevalence of Chatbot entering E-commerce, together with Transavia as service provider, we are eager to make a customer lift through these new channels.

Project Background

After the successful launch of Messenger bot for Transavia, we start exploring other cognitive conversational user experience. By moving the conversation to Amazon Alexa can potentially generate more humanity in the flight booking process as simulating flight booking assistant. It faces a lot of challenges to transfer the design mindset for system to meaningful dialogs between human and machine.

With the experience on designing for Messenger bot, we tend to categorise Alexa and Messenger both as chatbot. As diving into the essences, they actually handle information in totally different ways. The main reason is that Messenger bot largely relies on the interface to display its information, while Alexa relies on real dialogs, like chatting with a person who’s smart enough to handle every piece of information for you.


The graphic representation of how Amazon Alexa assists user in handling information


The graphic representation of how Facebook Messenger handles user input and information

. . .

Presentation Slideshare

Our project process and learnings are presented in the whole company with a live deme of Alexa. For our process and learnings, together with materials and further suggestions, please refer to the presentation slides below:

Click to view the presentation pdf

Some things we kept in mind before diving into the desk research and design process:

  • Artificial Intelligence is still not that accessible; This means we are the ones teach Alexa how to handle everything properly.
  • Strong use cases bring success to the product; We decided to start with the right context and use cases to define the right conversation path for development.
  • Bots don’t have context understanding; Even though we would like to make Alexa as a real person, it is not possible at the moment, so it’s our task to turn errors into meaningful dialogs.
  • Lots of bots failed because of lack of communication with existing channels; In our conversation path, it has to reflect and connect to existing channels to entrench user experience.
  • Start with core path; Follow the advice from Google conversation design group, we decided to start with a strong core path to avoid handling too many things.


. . .

Contexts and Use cases

Defining the right context and use cases assisted us to understand the essences of user needs, to lay out the core path of flight booking information with Amazon Alexa.
Through fast inquiries and desk research, there are four main contexts we chose to refine use cases:

  • At home, when user’s hands are busy, they are struggling to retrieve a piece of flight information;
  • At home, when planning together with family members or friends for an exiting trip, everyone wants to engage and contribute in the planning;
  • At work, when user is busy with multiple tasks, Alexa assists them with a quick request of relevant flight information, so they don’t need to necessarily spend time on it;
  • At work, in a planning meeting, where participants need to discuss or reach a consensus of information.

Responsive image

. . .

Ideation and Concept Development

For core path development, we looked into three relevant existing mechanisms for comparison and inspiration: the current flight booking website, traditional IVR (interaction voice response) and Messenger bot.

Responsive image

From our desk research, I set up three strategies and challenges as our main guidelines for mapping initial UX flow and user tests. The three strategies and corresponding challenges are:

Guided - Forced
Challenge: How to provide the right amount of information load so users feel guided while in the same time not feeling forced by information overload.

Assistance - Control
Challenge: The Alexa skill should serve its purpose to assist the user through acquiring flight information in a humane way. However to the very essence, chatbot are bots, the balance is to keep everything under control.

Smartness - Limitation
Challenge: Artificial Intelligence unleashes many traditional impossibilities, but there is a boundary of its smartness. Through proper design, the limitations are able to transfer to meaningful dialogs that eventually result in the right path.

. . .

Insights to Implementation

By taking consideration of Amazon built-in library and slots, user utterances, Transavia APIs, the initial UX flow was mapped out based on use cases, research insights and the three design strategies. Two rounds of user tests were carried out to test if the challenges are met. They also helped to define the right amount of information and choices, to test if confirmation and possibilities are enough or overwhelmed in the flow,

if the alternative suggestions are appropriate and helpful and if the tone of voice is correct. General feedback about where they see visual assistance coming in, what extra utterances for our library and what are other meaningful features are also provided. Instead of spending effort on realising the core path in code, I simulated the whole experience as Alexa while following the choices that users made.


user test #1


user test #2

We’ve got enough insights to work on after the user tests. Here are several highlighted insights that we considered not only benefit our further design decisions but worth of taking into account for other voice UI project.

  • Always limit to maximum two choices for the user; Users are not able to follow the conversation with more than two choices.
  • Different from visual user interfaces, users turn to use the day of week (eg. next Wednesday, this Friday) rather than a specific calendar date.
  • There should never be “sorry” from Alexa in the conversation; Every error that might occur should be transferred into meaningful dialogs.
  • As in humane conversation, flexible time selection through Alexa speech recognition should be enabled as much as possible, such as in the morning, in the evening, the first, the second, the cheapest, the earliest, the last, etc.

Responsive image
Responsive image
Responsive image
Responsive image

Before going back to refine the UX flow, I collected and arranged all user feedback, extra utterances and Alexa speeches in an excel sheet. This is much more flexible and practical than combining all insights immediately into a new UX flow. What I have learnt was putting insights and utterances into Excel sheet is beneficial for organising large amount of information. While for main interaction flows with libraries, conditions and intents, it is much clearer to get rid of attractions of flow-irrelevant data.

As the UX/UI designer on the project, I looked up built-in library and existing Slot Type References in Alexa development library, to combine with Intent Types and condition statement. It also helped to look up into Transavia APIs, to get an overview of what data types we could utilise in filtering and suggesting information. An online service simulator on Alexa development platform enables us to enter utterances to test the service request and response in the queue.

By taking use of cards in Alexa skill responses, the custom skill includes graphical and visual data display to enhance the voice interaction. These cards appear along with relevant condition and assist users with visual enhancement, confirmation and providing further possible options. From the insights of user tests, cards are created in both formats of desktop and mobile.

Responsive image

Currently Amazon is still working on enabling more variables for cards. Basic guidelines such as providing clear visual graphics, defining the right line height, using alternative font weight to highlight information are applied in the card design.

. . .

Enhanced Features

We’ve got spare time to implement two enhanced features other than strengthening the core path. After four short user interviews, the features we chose to implement first are ‘tracking booking history and suggest frequent destination/departure’, ‘cheapest ticket suggestions’.
For visual user interface, these features are presented with lots of possibilities. For instance, on Skyscanner (link) and the mobile apps of airlines, system prompts user with a list of recent searches/departures/destinations. User gets to chose from the list or has a saving list. On Transavia (link) website, as lots of other airline websites, provides user with monthly overview of cheapest flight tickets on each day.

Responsive image

Gathering user input

Worth of mentioning, the user interviews emphasise again the differences of designing for VUI and for System. As the graph shows below, a VUI on its interaction level should be as simple as our daily conversation, in which users receive and process a single piece of information per time. While for system, users give command to the system and wait the system to process the information on a much more complex level.

The final UX flow for the two enhance features are as simple as having a conversation.
Alexa suggests frequent destination/departure city based on the past enquiries. If a city exceeds two consistent times of enquiry, it will be suggest to the user as frequent city. There is no need to provide a complex flow of saving history and providing access to the history list.
Alexa only suggests a cheaper flight option within a +- day interval by comparing the cheapest flight ticket on the chosen day. This decision was made largely depending on the business case of Transavia as a flight provider mainly within Europe. For short haul flights, users paid much attention to the flight time and sometimes price is a add-on interest.