flight-sketches

Flight Search App

 

Contextual Inquiry

The first phase of the design process involved observing the target audience using an existing mobile app to find an airline flight. I observed three twenty-somethings as they used the Kayak app. During this inquiry, I discovered a few common threads: these users typically flew domestically to visit family and were willing to make some sacrifices if it meant getting a cheaper fare. In light of this, I created the following goal statement for the project: My user is a middle-class twenty-something who wants to find an affordable, no-frills domestic flight to visit family.

 

Sketches & Wireframes

Keeping the user and their goals in mind, I created sketches of a few main screens of my app. I then used these sketches to create digital wireframes in Adobe Illustrator.

Based on the fact that the users wanted to find an affordable flight, I decided to emphasize the prices on the search results page and give each itinerary a value rating on a ten-point scale. Also because of this goal, I included an option to monitor price changes for itineraries through a "Saved Itineraries" feature. The other core feature I created was a place for information about trips that have been booked. This section includes a place to print a boarding pass for upcoming trips, as well as tips on packing and TSA requirements for infrequent travelers.

flight-wireframes

 

Site Map

Taking into consideration the core features of the app, as well as some client requirements, I created a site map for the app. The app is broken down into five main functions: searching for flights (Flight Search), tracking fares (Saved Flights), organizing past and future trips (My Flights), account management (My Account), and troubleshooting (Information). These functions are further broken down as shown below.

flight-sitemap

Clickable Prototype

Creating a prototype for the flight search app involved taking my digital wireframes and translating them into HTML using Axure. For the sake of efficiency, I carried over the same low-fidelity quality of the original wireframes into the prototype. Each of the main navigation items, as well as the key user flow of booking a flight, were functional in the prototype so they could be tested with real users later.

flight-prototype

 

Usability Test

After the prototype was complete, I conducted a usability test with three users who were part of the app's target audience. Users were asked to describe their initial impressions of the prototype and its capabilities and to complete a few simple tasks. The users were observed in-person, and notes were made on their actions and commentary. 

Each user was asked to complete five tasks: book a flight, contact customer service, view a previously booked flight, view a saved flight, and download a boarding pass.

During the testing process, the one of the key findings I discovered was that the difference between the "My Trips" section of the app and the "My Account" section was unclear. Some users thought that their boarding passes would be in "My Account," for example. My recommendation for the this issue is to test different icons and/or add text to the main navigation menu. The ten-point system of rating itineraries was also unclear in the prototype; users either thought it was something completely different or they ignored it. For this, I would test whether adding color would enhance the meaning of the rating system, or if a system using smiley faces would be more intuitive. On the other hand, the "Saved Flights" section was very intuitive. All the users immediately associated a star with something that has been saved or favorited.