Airline booking flight - Website application prototype design

UX Designer

"Looking at airfares was the top reason participants reported for visiting an airline website on a desktop or laptop computer (61%), followed by purchasing an airline ticket (48%), and checking in to a flight (24%)."


Introduction  1/4

Starting from the beginning

People book flights because they want to reach a destination, and airline companies exist because they need to accommodate the consumer’s need, which is again booking flights.

So airline companies arrange flights to get people to their destination as fast as possible, and at the most affordable price they can offer to get people’s attention. Booking a flight online involves more than selecting two cities and departure times, and Airline companies are trying to use these additional features to their advantage in order to stand out even more from their competition. Although users like to be given more attention, too many choices might have the opposite result of what the airline company are aiming for, and confusing users will probably be affecting their experience throughout the online booking.

This project is the web app version of the airline mobile app prototype in my Portfolio. I have taken a slightly quicker approach for the web app as a UX Designer.

Agile UX approach 

For this project I took  a UX agile approach in diamond style (Discover, Define, Define, and Deliver). First I wanted to understand the users who go on airline websites to book flights. Then I wanted define their journey and begin designing. Once the first prototype iteration was complete, I tested the app with a few airline users


Discovery  2/4

Competitive design analysis

A competitive analysis is an important early step of the research process that I take before beginning most projects. I started with 3-5 competitors, and I evaluated their strategies to determine strengths and weaknesses. This analysis helped me find insights into the features and flows emerged in the competitors design solutions.


Airline questionnaires

For this project I used surveys as a supplement to the qualitative research I had already conducted for my other project "Airline Mobile App". I defined goals and objectives of the survey and I was able to get the results I wanted in order to proceed. I found airline users online and asked them how often they use airline websites , if they book cars and hotels on top of the flight ticket, if they select seats, if they review the purchase, and so on.

Define 3/4

User journeys

Once I completed the agile research process, I needed to define all my ideas. I worked on an affinity diagram, and wrote down user goals and major pains that I had found in airline users. The diagram also helped me define a flow that I immediately used to structure a user journey/flow. Flows are a visual representation of how users will experience the application. Flows are also very helpful when evaluating the efficiency of your design, or when working on a prototype with other designers.


Develop  3/4


Once I defined how users behave on an airline website I sketched on paper. With the sketches I established the basic structure of the website before adding any visual or content.  Furthermore I used colors to indicate main call to actions and selected items in pages. 



I started a medium fidelity mockup to get a better feeling of space, features and interactions. All the discovery and identification process done so far, began to get shape.  


Evolve & Iterate  4/4

User testing

 I conducted user testing sessions to evaluate if the design decisions I made were correct. The main goal was to find out if users were able to book a flight. I gathered as much feedback as I could and found a lot of areas for improvement. User testing is a fundamental step in Research that requires patience and observational skills. The earlier you find problems, the less expensive they will be to fix


Handouts for Development

I made a visual representation of the user interface to define content and heirachy of items on a screen, which will help UI professionals and developers work on the next steps.

press to zoom
press to zoom
press to zoom
press to zoom