Salone Air
I aspire to uplift, unite, and empower individuals through enduring designs and captivating narratives. "UX Design is nothing without Human Interaction"
Brief
This project was part of my bootcamp with the UX Design Institute and the brief was pre-defined as:
Your client is a start-up airline. They’re looking to create an online experience that is fast, easy, and intuitive: one that’s based on a deep understanding of their target users.
Design a new mobile app for your client, focusing specifically on the flight booking process.
Client: UX Design Institute
Role: UX Designer
Tools: Figma, Miro, Reflector, Camtasia, Google Forms
Duration: Feb 2022 - Nov 2022
To begin the research phase, I embarked on an exploration of existing studies and collected valuable data to validate or challenge my assumptions.
​
Through this process, I discovered intriguing insights regarding users' goals and pain points.
Project Overview
In 2020, the travel industry faced significant challenges due to the pandemic, causing severe restrictions on our ability to travel. The fond memory of boarding a plane seemed like a distant dream. However, with the rollout of vaccines worldwide, people are excited to plan their next travel adventure, and Skyscanner reports that 55% of their users have already planned a holiday for the latter half of 2021. This renewed enthusiasm for travel means that consumers are eagerly anticipating using airline apps to book their flights once again. Nonetheless, even with the simple goal of finding and booking tickets, it's surprising that no two airline apps offer the same booking experience. Intrigued by this observation, I decided to investigate the matter further.
Design Process
Competitive Benching
To gain a comprehensive understanding of how the top-performing products of competitors functioned from a user's perspective, I conducted a competitive benchmarking analysis. Specifically, I evaluated and compared the app booking process of British Airways, easyJet, Delta Airlines, and travel aggregator Skyscanner.
Throughout the evaluation process, I identified noteworthy features of each app that could be improved upon, as well as positive elements that could be adopted as conventions. Additionally, I pinpointed crucial components of the booking process that were necessary for a user's expectations to be met.
EASYJET
The design strikes a good balance between user-friendliness and aesthetics, with well-crafted menus and a visually appealing interface. However, after selecting flights, there is a noticeable emphasis on promoting additional services, as evidenced by the many upselling suggestions. It can be frustrating that the "Extras" screen cannot be skipped. Additionally, there are a lot of steps required to input passenger details.
BRITISH AIRWAYS
The app's visual appeal is noteworthy, with a sleek design that makes browsing for destinations and inspiration using the "cheapest fares" menu a breeze. Additionally, the 12-month calendar view is a helpful feature for comparing prices. However, the date selection process can be confusing, and once flights are chosen, users must navigate through four additional menus before reaching the checkout page, which can make the process feel lengthy.
SKYSCANNER
The app's focus is on browsing, which is reflected in its unique menu structure that allows for easy modification of searches. The user interface is highly intuitive, and the app offers personalized experiences through its "save" and "share" functions, which are not commonly found in airline apps.
​
DELTA AIRLINES
The application adopts a simple approach to browsing flights, utilizing airport codes and a streamlined form layout to enhance user experience and minimize congestion. However, the presentation of baggage and Wi-Fi details alongside flight results can create clutter and slow down search speeds. Additionally, Review & Pay offers an abundance of seat, baggage, and cabin class upgrades.
Online Surveys
The following research step involved creating an online survey to gain a better understanding of users' goals, contexts, and behaviours. Scripting a mixture of quantitative and qualitative questions allowed me to gain insights.
-
Checking prices/calculating costs for a trip was the most common user goal for participants followed by comparing flight times.
-
Skyscanner was the most popular website/app for reasons such as being able to get the cheapest flights and compare deals from multiple airlines in one place. However, with a caveat that some participants don’t view aggregator services with the same level of trust as going directly to an airline to book.
-
The unpredictability and fluctuation in price and additional costs were the main pain points for participants.
-
Most participants would visit an airline website/app 3-4 times before booking a flight.
Note-Taking
To enhance my note-taking skills and gain insights into the usefulness of user interviews and usability tests, I watched two sets of user interviews and usability tests related to my chosen case study. I focused on the participants' goals, behaviours, context, positive interactions, and pain points while reviewing recordings of Aer Lingus and Euro Wings products used in these tests.
Users found it challenging to compare fare benefits due to an excessive amount of information, and unclear calls-to-action.
The lack of clarity around flights with multiple stops caused confusion, leading some users to quit the process.
Users also struggled to progress forward and became stuck at certain points in the flow. Additionally, the transition between selecting departure and return flight screens was unclear, causing confusion among users.
Usability Testing
As Salone Air is a fictional Airline which needed to be built from scratch I used competitors American Airlines and Ryanair for usability testing. The participant was a friend who had recently used an airline app to book flights so was a suitable candidate and would be a target user. The test was performed in person using screen mirroring and recording software.
The user was given a set task for each product including travel criteria to use for the booking process. The aim of the test was to further identify any areas for improvement and any pain points the user had with using the products. A depth interview was also carried out to gather insights into the participant's profile including, location and occupation as well as airline app usage and recent travel history.
Affinity Diagram
Using the Affinity Diagram technique, I structured my research data by sorting individual data points into logical groups/themes. This helped me identify recurring patterns and focus on areas that needed improvement, such as the pain points for each section of the flow, including 'Calendar' and 'Flight selection'.
Step 1
I organized the research data into an affinity diagram with categories such as goals, behaviours, pain points, mental models, and testing errors to identify patterns.
Step 2
I categorized the data into each step of the booking process, including user goals, behaviours, pain points, expectations, and testing errors, to guide my design decisions.
-
Home screen: Add a strong and prominent CTA for booking flights.
-
Search screen: Simplify the search process by prefilling trip type and using geolocation functionality.
-
Calendar screen: Ensure clarity and visibility when selecting dates with a full-screen date picker.
-
Flight selection: Prioritize clarity in displaying important data points and prevent searching for unavailable flights. Unclear listings with layovers cause friction.
-
Fare options: Provide a clear and succinct breakdown of upgrade options without overwhelming users. Integrate this after flight selection, not hidden behind a CTA.
-
Baggage/Extra options: Simplify the process of adding extra baggage and address the significant price increase from cheapest flight to pre-checkout.
Customer Journey Map
As we walk through the booking process from the user's perspective, we have identified several opportunities to improve the user experience:
Users start their journey excited about a potential trip, checking prices and flight times multiple times before booking.
Friction begins at the flight results stage with prices that don't include luggage and basic fare options first.
Users encounter confusion when presented with unavailable flight options, causing frustration.
The mood lowers when choosing seats, baggage, and extras, where the price increases drastically from the original lowest price.
Flow Diagram
Based on my research and analysis, I created a high-level user flow to address user problems. This was an iterative process that I updated during the design phase. The flow covered the entire booking process, from the home screen to the payment confirmation screen, focusing on one primary use case. Defining this flow was crucial in guiding the design of the screens.
Low- Fidelity Prototypes (Sketches)
Defined key features and user flow. Sketched low-fidelity screens with pen and paper to capture ideas before moving to digital wireframes.
Mid-Fidelity Prototypes
I progressed from low-fidelity sketches to mid-fidelity wireframes, incorporating design patterns from other airline apps and elements to address users' goals, needs, and frustrations.
High Fidelity Prototypes
I used Figma to create a high-fidelity prototype that went through many iterations based on user flow and feedback. Key features, such as recent searches, were added to facilitate seamless use for users who visit airline apps multiple times before booking.
Prototype
Handoff & Annotations
​To prepare for the engineering phase of the UX process, I worked on creating highly detailed annotated wireframes. My aim was to remove any guesswork or ambiguity for the developer, so I made sure to include comprehensive information on screen and component states, input fields, input rules, feedback, and constraints. While this process was new to me - as I was accustomed to collaborating with a developer and providing information as needed - I recognized the importance of providing such a high level of detail.
Summary
•Although the project was successful and a valuable learning experience, there are a few aspects I would improve upon if given the opportunity to go back and redo it. Specifically, during the research phase, I would strive to gather a more extensive range of insights to make more informed decisions. This would involve conducting additional competitive benchmarking, collecting a greater number of survey responses, conducting more user interviews, and conducting comprehensive usability testing. While relying heavily on competitor analysis, I had to prioritize the most crucial insights due to time constraints.
​
•Unfortunately, due to time limitations, I couldn't conduct a final round of usability testing on the prototype. This missed opportunity prevented me from validating or invalidating certain design decisions and identifying areas for further improvement. It would have also provided a measure of the product's success.
​
•It's important to note that the product I created was fictional and solely focused on the UX aspect, without any associated business needs or stakeholder input. In a real-world scenario, I would need to consider numerous business needs and make trade-offs accordingly. This project allowed me to work on an ideal UX project, but I acknowledge that creating a feasible, viable, and desirable product involves additional considerations.
​
•Reflecting on the project, I have identified these areas for improvement and remain committed to enhancing my skills and knowledge as a UX designer.