problem

Most booking app allow the user to sort through the many flight options that are available with price being the primary factor, the process is fairly long and overload. Travel bookers are unable to easily choose a flight that matches their unique preferences when flying due to complicated user flow, or even see if the flight they booked matches those preferences. While price is important to people who are booking flights, users should be able to sort flights based on their unique preferences and expectations simpler and easier.

  1. Pages too crowded, information overloaded
  2. Too much options, hard to make
  3. Special perks hard to find
  4. Price option is confusing

research

In addition to gathering competitor research, I conducted five interviews of people using their favorite flight booking tool. Overall, I conducted twelve semi-structured interviews and observations and used the information gathered about habits and preferences to graph out the relationships between this data. From the data, I distilled the information into a persona about one of my interviewees, Maria, because she represented a subset of short distance traveler who focused on vacation travel and domestic flights.

"Why is most of flight booking process so long and contain so much information? Tons of choices I need to make. Booking flight tickets shouldn't be that difficult."

wireframe and iteration

I contributed a bunch of sketches to peer’s review, which ideated over things like filtering choices, user flows and scenarios. I ultimately chose one of my sketches to move forward as the basis of my design. I then started designing the interface in Sketch because I wanted to use Adobe XD to tie screens together for this project, which would give me an opportunity to explore both tools.

After experiencing an issue with Adobe XD not allowing users to select any combination of perks at once and have those screen partials display simultaneously, I switched to Flinto to complete the whole flow with meaningful micro interactions. Ultimately, it allowed me to test with more accuracy which flight options and task flow were more important to users.

design insights

Visually, I used the Rule of Thirds, which is a basic graphical theory, we could imagine divide the screen horizontally into 3 equal sections, and put the main information and interactive element into the gird, it followed the capital F visual flow, The eye naturally starts at the top left then move to the top right, back to the bottom left & right. So, it’s more stable and balance, and provided a good informational hierarchy.

Interactively, the layout was follow the direction called Thumb Zone which is the a heat map of phone devices. It’s show how easy it is for our thumbs to tap areas on a phone’s screen. Comparing with normal booking app, it was easier to control. I avoided some situation that some bottom on the top of the screen we can’t reach them, especially better for large screen mobile phone, so I improved the reachability to solve that problem.

Combined, the new booking flow makes it much faster and easier to book a flight ticket than before, down from 10 steps to just 5 steps. This is possible due to an emphasis on key information required for the primary user flow and deemphasizing the rest. It’s all about establishing a clear hierarchy: to guide users to their desired actions, we must bury the unnecessary detail and surface the key pieces.

interface design

user testing

After completing my Flinto prototype, I tested it with several participants using the same prompts. These included: “Imagine you'd like to book a flight from San Francisco to Chicago from Dec 20th to Dec 23rd, show me how you'd do that.” “Imagine you book a flight from SFO to CHI with a friend along with your dog, show me how you'd do that.”

According to the feedback from eight people were tested in different environment, I found several problem of my prototype. Schedule interface was confusing for users and it mislead user to click wrong button; close icon was confusing; Check out step information hierarchy is not clear.

To address these issues, I did a quick iteration of our prototype with plans to retest. Changed the “X” icon to “Done”; Add schedule animation indicator; and minified the overall flow. The final prototype is looks like below.

final prototype

what i learned

What makes Airy Booking unique is deconstructing the entire task flow and prioritizing the primary user flow, while applying the universal product design philosophies, like establishing a clear information hierarchy and minifing evety steps. I learned the thinking of deconstructivism and prioritization in mobile application.