The project
Creating an airline website for a better user experience
The Overview
This was a case study for my school - The UX Design Institute. The objective was to create an improved version of a website for a better user experience, using the UX design thinking. The process is based on research, the analysis of the results and the ideation for improvements.
Timeline
5-6 weeks
Tools
Miro Invision Figma
My Role
Idea
Research
UX
The Problems
Through my research - benchmarking, survey, usability test - I ended up with a long list of issues:
-
There are unnecessary travel extras that are disturbing/ confusing.
-
The Search Flight button is not visible, have to look for it.
-
The names of the date fields are confusing ‘’Outgoing’’/’’Return’’ flight.
-
Frequently used site doesn’t recognize the user's location.
-
Calendar view doesn’t show the days.
-
Calendar view should mark the lowest price, as on the app.
-
Not clear if the price is for 1 or 2 passengers.
-
Selecting flight on calendar view only redirects to list view, where there are more flights with different prices.
-
List view doesn’t show the dates, nor the number of flights/ day.
-
Flight duration is not clear. Does it refer to the whole flight or only for the layover?
-
No info if the destination is in a different time zone.
-
List view- the time of the flight is confusing because of the page layout.
-
Site shows unavailable fares/ features → confusing.
-
No info on what a fare includes.
-
No option to choose luggage size separately, the more expensive fare needs to be chosen, which includes unnecessary extras.
-
Passenger details are not saved from previous use, everything needs to be filled in.
-
Confirmation email doesn’t arrive instantly after purchase, it creates confusion.
Ideation
My aim was to narrow it down to a main use case, as it is not realistic to adjust everything to each person’s needs. Therefore I compared the results from my research to find the most common issues and to work on those. Such as price transparency, clear dates, and detailed flight info.
The process
1. Benchmarking
I chose the following sites:
Booking.com
Skyscanner
Turkish Airlines
Vueling
and I took notes for the following criteria:
-
Homepage - how straightforward and easy it is to navigate
-
Search - what filters are provided and how efficient they are
-
Information - how transparent/ clear the information is regarding flight details, cancellation, terms, additional costs
-
Personal feel – thoughts on how pleasant it is to navigate on the website
Criteria
Skyscanner homepage
Booking.com overall
Criteria
The PPT was the first step, then I used notes to collect the data, as it will be easier to group them into positive and negative points.
2. Survey
https://www.surveymonkey.com/r/BKKGS6Z
Note: This was a time where Covid was very much present, therefore many responses and complaints were related to that. In those cases I analysed how the information was provided and not the content itself.
Why did you visit an airline website the last time?
Were you able to complete your task?
Do you prefer website or app?
Why did you visit an airline website the last time?
My main takeaway was that people like to stick to their commonly used sites, because they already know their process and have trust in them. They use search engines like Skyscanner/ Google flights only for research purposes, but then eventually they use the actual airline website. Common annoying features are the ads all over the place, confusion can happen regarding dates, prices, flight time.
3. Usability Test
Two of the tests were given by the school. The notes, Participant 1 and Participant 2, are my reviews of them. In addition I conducted a third test, notes Participant 3.
Participant 1
Participant 2
Participant 3
Participant 1
At this point I already started to see a pattern of the most common problems, such as: the important info, price, dates, times are not transparent or not clear, however unnecessary features are displayed.
4. Affinity Diagram
Some of the groupings are, what’s confusing, appealing features, what prevents booking, website is intuitive, notifications, etc..
affinity diagram
appealing features
travel extras
affinity diagram
5. Customer Journey Map
The conclusion of my findings can be seen under the paragraph ''The Problems''.
6. Flow Diagram
Flow Diagram
Flow Diagram
Flow Diagram
Flow Diagram
7. Interaction Design
The followings are the measures I implemented based on the issues I gathered:
​
Homepage:
- Location is given on homepage.
- Search flight button is bright, visible.
​
Flight Results:
- On click on ''Flight details'' pop up opens on the same page with the flight info so the user doesn't have to navigate back to the flight results page.
- The fares have all info and only the available ones are visible.
​
Flight Details:
- Flight details are clearly listed with available options to add extras separately.
​
Payment:
- User's payment info is recognised, doesn't need to fill everything in.
- Clear confirmation message about the purchase on the website.
Homepage
Homepage
Card info/ Confirmation
Homepage
8. Wireframe
Homepage 1.1
Homepage 1.2
Confirmation page
Homepage 1.1
Conclusion
My first case study. It actually felt like doing a puzzle, I knew what I wanted more or less and I just had to put the pieces together. Through the process I realised there will always be something I could improve, especially after testing the result. So UX basically, always learn and improve.
Personally I learned that breaking down one step into mini steps helps untangle big chunks of info, however doing so it is also important not to lose sight of the bigger picture. It is easy to get lost in the details and eventually that could cause some time being wasted.
Regarding the prototype, I didn't work much on UI and in retrospect, I could have put more effort into it.
Overall working on this project made ,UX and the design thinking process, make sense.