User research, User interviews, Wireframing, Prototyping
UX design
2021
Start-up airline called Fly UX needed to create an online experience that is fast, easy, and intuitive: one that’s based on a deep understanding of their target users.
My task was to design a new website for Fly UX that will allow them to stand out among other airlines. I was asked to focus specifically on the flight booking process: how users search for, find and select flights online. My end goal was to design and build a clickable prototype that can be tested with users, along with a detailed set of wireframes.
Main goals of competitive benchmarking were:
I collected all results of my observation in one general conclusion about best practices to follow when designing airline booking applications.
Next, I created an online user survey to learn about the goals of people who use airline websites.
The responses received have provided me with a more specific understanding of users goals when using airline booking sites and apps. It has also given me a greater understanding of what they expect, like and dislike and what they think is important during the airline booking process.
The main takeaways:
The best way to assess the quality of airline booking experience is to observe what people actually do using applications. Because there was no FlyUX website to test yet, I conducted a usability test using two competitorwebsites and phone applications: Frontier and Southwest Airlines.
The goals of usability test were:
First, I interviewed users who were experienced flyers to understand better their goals and contexts while booking a flight.
Next, I gave them the task to book a flight for a given date and destination. As the users performed this task I asked them to think out loud while I observed their actions. I recorded the sessions and took extended notes to analyze and share with clients and stakeholders.
It was interesting to discover that large airlines companies like Frontier and Southwest Airlines have many usability issues that make people feel confused and angry while trying to find and book the tickets.
To organize the unstructured research data I used an affinity diagram. First, I wrote it collected data down on the post-its notes.
Then, I organized the post-its notes in logical groups, like User priorities, User behaviors, Home page, Navigation menu, Search, Search results, and others.
Based on the groupings in the affinity diagram, I defined the high-level steps in the customer journey. For each step, I documented the goals of the user, whether there were any pain points, and if there were any behaviors that the website was not facilitating. I also assessed whether each step of the experience was positive or negative.
The customer journey map made clear that users didn’t like the annoing advertisments, confusing navigation and constntly changing prices during filght search. Users also didn’t like that they cannot compare search results and not able to share them with their friends and family.
Based on the flow diagram I sketched the screens and screen states for users flowing through the Fly UX desktop app.
Sketching website pages in various states allowed me to iterate through many design options quickly. During the sketching process I was trying to figure out how users can move through the flight booking process in a friction free and efficient way.
To test the high-level flow, screen layouts, text, and basic interactions, I created a medium fidelity prototype based on my sketches.
According to my research, the user's primary goal is to find the best fight quickly and effectively, as well as be able to share the results with other people. At the same time, many people also needed options to check in, research flight status, and change/cancel their flights, as well as to book a hotel, rent a car, and find the best deals. To accommodate the primary needs, I included a "Find your flight" section to the home page, and added a "Share" button to all prototype pages. To accommodate other user needs, I included secondary links and the "Explore trending destination" section to the Home page.
As users land on the Search Result page, they are presented with numerous options to filter their results (based on time, price, carrier, etc.). They also have the option to instantly change their initial search details. I included this option since one of the pain points uncovered during the initial user research was not being able to modify the search without restarting the process.
To accommodate user requests to make the booking process more transparent with options to modify a flight at any step, I created a Flight Summary page with selected flight details and options to add the additional services (add bags, select seats, rent a car and book hotel), to enter passenger details and use several online payment options to buy the ticket. Users also can change their search results, as well as share their results with others.
Selecting seats needs to be clear and transparent for users. I made it accessible at any time on the Summary page though the popup with an interactive seat map. The seat map provides options to select seats by clicking on it. Price classes for seats are color coded and explained on the map.
Testing the medium fidelity prototype allowed me to identify the issues and reduce the risks of building an ineffective product which is difficult to use. Initial testing showed that users reacted positively to the prototype journey. They said that it was easy to use and clear at any step of booking a flight.
View medium fidelity prototype in Figma
In wireframes I defined all necessary rules and details that developers need to build the product accurately.
The success of building a good product based on clear understanding of user problems through the research and testing. Usability testing is the best way to understand how customers use our application.
Next steps for Fly UX application will be UI design and branding.
