china-airlines-responsive-comp.png

China Airlines Flight Search Case Study

This project aims to evaluate and update the China Airlines online ticketing system. Though this site is fairly modern and decently functional, it's due for a tune-up, if China Airlines hopes to compete with western competitors. I challenged myself to work within the Bootstrap responsive framework to design a rich, unified experience. This page details my process and the resulting product.

Personal Project

Role: UX, UI design


Usability Assessment

Mobile

This is the landing screen for mobile. It’s nice that the default screen is catered to creating a flight, but critical input fields are below the fold. 

Tabs at the top of the window show where you are in the process, but aren’t clickable and don’t have descriptive labels. This functionality seems to distract from the core function of this screen. 

The flight selection screen is a little confusing. Buttons for sorting are nested inside of different classes, and the button to select the flight itself doesn't follow established conventions. 

The flight selection screen is a little confusing. Buttons for sorting are nested inside of different classes, and the button to select the flight itself doesn't follow established conventions. 

The seat selection screen is not scaled properly, and provides little information about each seat. The Options panel near the top opens up, though there’s nothing in it. 

 

Desktop

After you select a destination, you’re brought to this screen to select passengers and flight class. There’s a good deal of wasted space here, and the layout isn’t the greatest. The coupon field should be collapsed so as not to tempt users away from the site.

Upon reaching the flight selection screen, you’re bombarded with a breakdown of fare details. This should clearly be collapsed by defaut, and the various flights should be the focus here. It’s also worth noting that the “My Trip” summary does not float while you scroll down through options.  

This is the seat selection screen. Like many other screens in this flow, it has a poor layout that pushes important content below the fold. The seat selection area should be more prominent.

I got this error screen by selecting invalid dates, but there was no way to correct the mistake and move forward. There's not even a clear link back to the home page.

 
 

Critical Improvements

• Align mobile / desktop experience

• Create responsive site with Bootstrap framework  

• Allow users to edit inputs at any step

• Provide “birds eye view” throughout purchase workflow

• Facilitate correction of input errors

• Expand and clarify “My Trip” panel

 

Wireframes

I decided to limit my focus to the existing workflow, and not rearrange the site architecture. This put my focus on individual screens and decisions made by users along the way. My plan was to build wireframes for the flight selection process, then test them and refine. 

 
My first attempt at this flow wasn't very successful. I learned that users need feedback when they select a flight. There should be a confirmation step before moving on to the next flight selection screen.  

My first attempt at this flow wasn't very successful. I learned that users need feedback when they select a flight. There should be a confirmation step before moving on to the next flight selection screen.  

IMG_8788 2.JPG

I wanted to improve the process of selecting flights. My first iteration proved not to be very intuitive. I learned that there should be feedback when a flight is selected, then a clear indication when you are moving on to the next step. 

The second iteration incorporates a "Next" Button that pops up when you select a flight. This provides a clear delineation between the departing and returning flight selection. There's also a panel at the top of the screen that shows your selections. 

The second iteration incorporates a "Next" Button that pops up when you select a flight. This provides a clear delineation between the departing and returning flight selection. There's also a panel at the top of the screen that shows your selections. 

 

Desktop Wireframes

 
 

Mobile Wireframes

 
 
 

Features

features-1.png
features-8.png