Usability testing; Think Aloud Method

The yay and nay of the initial design

We observed our participants booking flight tickets through our hi-fi prototype.

☺️Success:

• 100% of the participants were able to quickly find everything they were looking for, and finish booking flight tickets without getting distracted or making any mistakes.

• We received positive feedback of the flight map, participants said it helps visualize the destination, the flight direction, and how far it is.

• Participants appreciated that the price tabs help them easily decide which date has a more reasonable flight price.

• And the open and detailed seat information such as knowing the legroom of each seat adds confidence in seat choices.

🤔Areas to improve:

• When choosing seats, users barely noticed when the screen switched to the next flight’s seat map.

• Users expected to choose a seat by clicking on the seat icon, instead of the Select button.

• When choosing seats, most users didn’t read the description of each key, thus they got confused with the meaning of the star icon and dot icon.

• While look at flight listing, users didn’t quite understand what the price indicator means. To them, it looks like something to adjust price or temperature.

• On the Review and Payment page, the same margin between each section makes it hard for users to scan through.

Priority revisions

We made the following revisions basing on our usability testing findings.

Improvement one: A more natural flow of choosing seats.

During the usability test, we noticed the way “the screen automatically jumps to the next flight after the previous seat is chosen” is confusing among users. They weren’t aware when the screen jumped to the next flight. Thus we added a “Next Flight” button to let users initiate the flight switching themselves, which makes it easier for them to navigate when choosing seats.

Another finding is that users barely noticed the Select button under the seat details, a more intuitive way for them to choose seats is to click on the seat icon instead of a select button. To create a smoother interaction, we got rid of the Select button. In the new design when users hover over a seat icon, seat details pop up; if the seat looks good, users can click on the seat icon to choose the seat.

The third discovery is that users don’t really read the keys’ description. As a result, they got confused with the meaning of the star icon and dot icon. To help users narrow down their option more efficiently, we labeled each seats with their price instead, because price is a very important factor to our users. They can read the details of each seat they are interested in by hovering over the seat icon.

To be consistent in layout with other screens and put information at where users expected, we moved both the primary action button and the flight and passenger summary to the right. We also added frame to the flight and passenger summary, to differentiate each section to make them easier to scan.

Improvement two: Reveal flight fare insights in a way that users understand easily.

We discovered that participants didn’t understand the function of the price indicator on the flight listing page. To them, it looks like a tool to adjust price or temperature. Thus we changed the misleading bar shape to an icon that shows user if the current price is reasonable. Colorwise, instead of using gradient of red and blue that is associated with temperature, we chose green (cheap), yellow (typical) and red (pricey) to convey more straightforward insights of prices.

Improvement three: A better structured and organized Payment and Review page.

We discovered the same margin between each section makes the Review and Payment page hard to read for participants. Some even missed the Cost Summary section. Thus we separated different sections by adding a larger margin between them, making the whole page more pleasant to scan through.

To be consistent and avoid overlook of the Payment Information section, we added a frame to it, too. The content now is better structured and properly organized.

Responsive design

Easy to use across all platforms.

In our modern digital world, Akos Airline aims at providing a consistent and well thought out experience on no matter which device is being used.

Desktop: Desktop is still driving the main traffic of flight ticket booking. Our users prefer bigger screen to scan more information at one glance, compare, change flight options and utilize the filters more freely. Thus on desktop, we offer intelligent filter options that save time and needless steps, and quick access to the most essential information at exactly the right time.

Tablet: For tablet environment, we provide the same functionality available on a desktop, but touch-base friendly.

Mobile: Our users’ common concern for booking flights through phone is that the screen is too small to scan essential information at once; comparing and making changes usually means uncomfortable long scrolling. Thus we increased visual hierarchy of the essential information and move them forward, as well as added icon-driven navigation to say more in less space. We make sure all features and essential information are easy to access wherever the users are, without forcing them to download and install anything.