UX Case Study of Air India's Website and Improvements made.

Commenti · 4872 Visualizzazioni

This is an article that discusses the shortcomings of the Air India website that is operate by the airline Air India. Along with this, there are improvements that have been suggested based on extensive study using Human Computer Interaction principles and methodologies.

Problem Statement

This work deals with the concerns about the usability and the user experience of the website of the airline Air India. The main goal is to redesign the website by creating a prototype to improve major areas that the existing website lacks. The first and most important is the improvement of the flight booking feature that a user is most likely to visit as that is the primary purpose of the website. Additionally, we have reduced the information displayed to the user at any given time to reduce cognitive load. The ultimate goal of the project is to give users the experience they are looking for that would motivate them to keep coming back to use the website.

The questions that are trying to be answered are How easily can the user find what they want or need? How information is the user exposed to at any given time? Can the user utilise the various functionalities provided by the website? How hard is it to complete tasks that most users would visit the page for?

Most Common Tasks

There are 2 tasks that have been identified. These are tasks that will be performed by most of the users that would visit this website.

Task 1 - The user has to book a flight from one location to another.

Task 2 - The user has to go to the search bar and use one of the options listed there.

Assumptions

It is assumed that the user knows how to operate a computer and has at least some experience with booking flights on other Airline websites. This is required so that the user will be able to navigate through the various web pages with some ease and also know about certain tasks like booking a flight, checking the flight status or searching for a particular functionality from the search bar. It is also assumed that the user can read, write and understand English.

Analysis

Personas

 

Persona 1

“The Business Professional”

Fictional Name

Matt Brown

Job Title/ Major Responsibilities:

Senior Marketing Executive at Goldman Sachs

Demographics:

Married, 2 kids. 40 years old

Goals and Tasks:

Matt must travel regularly from San Francisci to New York and needs a convenient and affordable way of travelling.

Environment:

Matt knows how to work with airline websites but needs a quick way to book tickets while commuting from his Office to the parking lot.

Quote:

“I just hope that I get a seat with extra legroom”

 

Persona 2

“The Master’s Student”

Fictional Name

Jillian Silvey

Job Title/ Major Responsibilities:

University Research Assistant

Demographics:

Single, 25 years old

Goals and Tasks:

Jillian is a postgraduate student who travels a lot to attend various research conferences. She wants to book tickets quickly and attend conferences at a low price.

 

Environment:

Jillian is tech savvy and can easily navigate a website. She prefers to book tickets using a website/mobile app as he doesn't want to spend time on booking.

Quote:

“I wish booking a ticket does not cost me my rent”

Persona 3

“A GrandMother”

Fictional Name

Nancy Ruth

Job Title/ Major Responsibilities:

A retired journalist

Demographics:

Married, 2 kids. 80 years old

Goals and Tasks:

Nancy just wants to meet her grandkids in Seattle.

Environment:

Nancy struggles to navigate through a website and doesn’t own a smartphone. She prefers to book a flight ticket via telephone.

Quote:

“I hope they have enough space for my luggage.”

Persona 4

“A Wage Worker”

Fictional Name

William Tucker

Job Title/ Major Responsibilities:

A construction Worker

Demographics:

Married, 1 kid. 40 years old

Goals and Tasks:

William wants to go on a vacation with his family to Miami.

Environment:

William knows a little about computers. He has rarely booked a flight ticket using the website/mobile phone and will struggle to complete the task

Quote:

“I wish the website had instructions for first time users”

 

Task 1

The user will be asked to use the search functionality on the homepage of the website to find the “Flight Status” web page directly. This is a relatively simple but a very important task in a website. The current design does not provide the correct functionality and is aesthetically very bad. Secondly, The search logo is not very visible on the homepage due to its background. Moreover, a user would always expect to see a search text box with the search icon inside it but as of now a user has to click the search icon to see the text box. 

The original website has not accommodated this feature very well. Due to the issues, users are bound to make a lot of mistakes when trying to use the search functionality. Various changes have been made to the design of the search feature. Firstly, a search bar has been associated with the search icon. This is also made more visible and aesthetic. Due to this change, the user would not have much trouble finding it.

Task 2

In the second task the user has to book a cheap roundtrip flight from the website. The user is asked to enter details like Departure and Arrival cities, Departure and Return dates, choose one adult passenger and select the round trip option. 

After selecting the flights, the user will proceed to the passenger's details page where they are required to fill in the necessary personal details like First Name, Last Name, Gender and Mobile Number. After agreeing to the terms and conditions, the user can proceed to the seat selection page. On the seat selection page, the user has flexibility to skip seat selection or they can select any seat from the seat map. This will be done twice, one for the departing flight and one for the return flight. Once the user is done with the selection, they can continue to the payments page.

On the payments page, the user is required to provide details about the payment option they prefer. Here, the Credit/Debit Card option is chosen. On this page, user will provide important details of the card i.e. Card holder name/Name on card, Card number, Expiration date in MM/YY and 3 digit CVV number located on the back of the card. While evaluating the website, the user need not provide actual card details but can put any random data. Once done, the user can click on “Pay” button to finally complete the booking.

This is the most important task because it is the main purpose of the website. There are several issues with the original website and it can be further improved. There are several pages to be visited. Below, each page involved while booking a ticket is analysed:

  1. HomePage: The home has too much unnecessary information that increases the cognitive load on the user. Also elements such as the calendar, input fields are not aesthetic. Also the book flight dropdown is not too visible in the original website. These issues directly relate to the user satisfaction, due to which customers would not prefer to book from this website.
  2. Flight Selection: The original website’s flight selection was very clumsy.  In the case of a round trip selection the options are doubled and the page gets longer. Also a user needs to remember the flight selected for the first journey as he goes towards the bottom of the page.
  3. Seat selection: This page in the original website did not have a proper structure when it came to showing the seats to the user to make a selection making it difficult to choose a seat. Additionally, after making a selection, the control would directly go to the next page without showing the selection made to the user. Therefore, the user will have to remember what he/she has chosen and then proceed to the next action. A poor choice of colors were chosen making it difficult to see the widgets. And the user finds it difficult to switch between the seat selection pages of the forward and return flight. All of these contribute to an ineffective/poor user experience.

This original website’s design was tedious and violated a few of the heuristic principles. Firstly, the unnecessary information in the home page has been removed. This results in lesser cognitive load to the customers. The “Book flight” dropdown has been defaulted as open such that the user does not have to search for it. This decreases the time to complete the task. Also changes have been made throughout to improve the aesthetics of the website.

The flight selection page has been improved as per the analysis. By following the Fitts law, the flight options have been made into two horizontal sections. This will decrease the time a user takes to move his pointer to the target area. Also by implementing a flight selected information bar, the user is aware about the flights selected at all times in the page. This promotes Recognition rather than Recall as the user does not have to remember the information anymore.

In the seat selection page, improvements were made to reduce the effort required by the user to make a selection. The original website flawed design as it did not follow the gestalt principles of proximity, closure and similarity well enough. In the prototype, Recognition rather than Recall is promoted by incorporating the details of the seats selected and a good summary of the pricing details. Also by giving a picture of the aeroplane with the seats in it, a mental model is created for the user.

Prototype and Design

A high fidelity prototype has been present here. Axure RP is the tool that has been used to create the final prototype website. Axure RP is a rapid wireframing tool that lets the user design prototypes for either web or mobile.

Task 1

The search bar in the original website of AirIndia is hidden in the homepage. It is not intuitive to click the search icon for the search bar to open. Another issue with the original website’s search functionality is that the results are not exact and contain unnecessary results. This is a problem for novice users because if they can’t find a certain functionality on the webpage, they search for it.

The redesigned prototype firstly makes the search functionality more visible. This conforms with Don Norman's Interaction principle i.e. the more visible a particular element is, the more likely the element will be seen and used by the user.

By implementing the new search bar, the flexbility of the system is improved as the website tends to cater the experienced as well as the novice. This happens as novice users can now get correct results instead of news articles.

Original Website

Prototype

Even though this task is a small part of the original website, it is a very important one. By conforming to the principles and heuristics, the original design can be improved by a great margin.

Task 2

This task is designed around the main process of booking a flight on the website. This task requires multiple web pages and each of them had to be optimized.

The original website has a lot of unnecessary information on the homepage. This was causing a cognitive overload to the user. Also the book flight option is hidden and the user needs to explicitly click on the dropdown for the book flight functionality.  In the redesigned prototype, these issues have been corrected by making the book flight functionality visible (selected) by default. Also, the advertisements and unnecessary information on the homepage has been removed. The aesthetics have been enhanced by improving the calendar and the textboxes (with autocomplete functionality). This was done in accordance with Don Norman's Interaction principles.

To improve the process of flight selection, the flight selection for the Departure as well as return have been made in two horizontal sections as opposed to vertical. This has been improved in accordance with Fitt's Law. A tab has been included that gives the flights selected information and is pinned towards the bottom of the page. This follows the principle of Recognition over Recall. These updates will improve the usability of the website.

A lot of updates have been made in the seat selection page. The seat selection page of the original website did follow the gestalt principles of proximity (similar widgets were far from each other), closure (lack of a clearly defined structure) and similarity (similar widgets were shown in different color codes) well enough. Here, the design of how the seats of an aeroplane are shown to the user. have been changed. The seat selection design has been given a proper structure which would refer to the mental model in the user’s mind making it easy to select a seat. And a summary of the seats selected has been included on the left and the payment summary on the right. The principle of Recognition rather than recall has been adopted by displaying the choice made to the user. This is aimed at improving the usability of the website. 

The payment Review page of the original website had a lot of redundant information that is displayed for the user at the wrong location. And the summary of the payment information. For example, the user is shown the seats that have been chosen and payment summary in this page instead of the seat selection page. In the prototype, the principles of User Control and Freedom and Error Prevention have been promoted by having made changes so that only the options required for making a payment are shown to the user hence reducing cognitive overhead.

Also, a progress bar has been included on all the pages that shows how much of the task the user has completed. This provides critical information to the user as it serves as a feedback as well as motivates the user to complete the task. The progress bar implemented conforms to the Visibility of System Status principle. This provides the user with feedback on the current state as well as keeps them informed. Also an effort has been made to make a Match between the system and the real world by putting real world icons below the progress bar.

Original Homepage

Prototype Homepage

 

Original Flight Selection Page

Prototype Flight Selection Page

 

Original Seat Selection Page

Prototype Seat Selection Page

 

Original Payment Page

Prototype Payment Page

 

Evaluation

The participants of this experiment were graduate and undergraduate students of Arizona State University, who were between the age of 16 to 26. The participants were chosen and were given enough time and information to successfully complete the tasks without any persuasion or pressure.

The scenario which the participants were asked to complete is explained below. The instruction set for the participants are defined in a later section.

Task 1:

The user has already booked a flight and wants to check the status of his flight. He wants to search for the “Flight Status” page as the homepage is crowded and he is unable to find the link for the “Flight Status” page quickly. He goes to the search bar and types in Flight status and clicks enter.

Task 2:

The user wants to book a cheap round trip flight using the website, from Mumbai(BOM) to Delhi(DEL) on the 27th of April and the return ticket as well on the 30th of April. The user will carry one backpack and does not want additional baggage space. The user prefers the cost to be less than 7000 rupees(INR) for the round trip. The specifications mentioned above are met suitably by the Air India website as Air India provides one the best economy flight services within India. The user can easily book the flights on the specified dates and can easily carry one backpack for free as the airlines permits it. Also, the cost of the roundtrip will cost less than 700 rupees(INR) which is a priority for the user.

Cognitive Walkthrough

The Cognitive walkthrough on the UX of the Air India website will provide a form of usability evaluation to the evaluators for a group of specific tasks. The purpose of this walkthrough will be to focus on a new user’s ability to learn and understand the website.

The tasks for chosen for this walkthrough are

  1. Search for Latest News and Flight Status in the Search bar.
  2. Book a cheap flight from Mumbai to Delhi with the following given parameter’s:
    1. Round trip with Departure date: April 27th, Arrival Date: April 30th.
    2. Select the cheapest flights.
    3. One adult passenger
    4. Economy class

At each and every step of the process the user will perform actions. This walkthrough will list all such actions while answering four questions. As stated below, these questions will provide an understanding level of the user. The questions are as follow:

  1.  Will the user know the next step?
    This question examines if the interface is making any assumptions about the user’s level of knowledge that are not exactly accurate.

  2. Will the user see the control?
    Controls should be clearly visible to the users. Controls that are hidden creates an issue where the user is not sure on what to do.

  3. Will the user understand the control?
    It is important to use simple language and avoid industry jargons so that a user can understand the action.

  4. If the correct action is performed, will the user see that progress is being made toward the solution of the task?
    This question provides us details regarding the feedback system of the website.

Conclusions

The prototype was a much better version of the original website. Key issues were identified and improved upon. The outcome of the prototype was a decrease in the number of clicks, decrease in time taken to complete the tasks, improved aesthetics and an increased user satisfaction.

By working on this project we got the real world experience of improving a particular website’s usability. This was possible as we followed the process of identifying the website with usability issues, identifying the most important tasks that need fixing, building a prototype and conducting usability testing on it. We were able to incorporate theoretical knowledge into our project to make the redesigned website better

 

 

 

 

 

 

Commenti