UX Design, UX Research

Airline Mobile App

Year
2024
Role
UX Designer
Client
Case study for my Professional Diploma in UX Design at the UX Design Institute

Overview

Fly UX is a project I developed for my Professional Diploma in UX Design at the UX Design Institute, a university credit-rated UX design course. The goal was to design a native mobile application for a start-up airline, enabling them to thrive in a highly competitive market. During my research, I discovered a major pain point: many users lack the confidence to complete flight bookings on mobile devices. Fly UX addresses this issue by enhancing the mobile flight booking experience.

As this was an individual project, I was responsible for managing the entire design process, including Research, Analysis, Interaction Design, Prototyping & Testing.a

Problem

How can we enable users to book flights more efficiently using native airline apps by designing an experience that is fast, intuitive, and easy to navigate? The solution must be grounded in a thorough understanding of the target users' needs and behaviors.

Goal

My objective was to develop a comprehensive understanding of the target users and create an interactive mobile app prototype, supported by detailed wireframes. The primary focus was on optimizing the booking process, including how users search for, discover, and select their flights.

Process

For this project I followed the full UX design process:

User Research

To clearly understand the existing user experience when booking a flight on an app, different research methods were utilized in order to learn the user's goals and challenges: ​​​​​​​​​​​​​​

  • Competitive Benchmarking
  • Usability Testing
  • Note taking

Competitive benchmark

Competitive benchmarking is a research method used to gain valuable insights into competitors’ best practices and techniques, ultimately enhancing overall performance. In this study, I conducted an analysis of four airline mobile applications, focusing on various aspects such as user experience, interface design, market conventions, and compliance with usability heuristics. To ensure a comprehensive applications selection process, I considered several factors: the distinction between global airlines and budget carriers, the reputation of the applications based on user reviews (ranging from highly acclaimed to mixed), and the inclusion of applications that enable booking flights across multiple carriers. During the benchmarking process, keep the following questions in mind:

  1. How do these websites or apps solve the problem?
  2. What are they doing well? Is there anything we can emulate?
  3. What are they doing badly? How can we do it better?
  4. Have any design conventions been established? If so, should we follow them?

View The full Project

Note-taking

This stage was a critical component of the UX research process. I identified key insights by observing prerecorded usability test session videos, making detailed notes, and highlighting significant findings.

The usability tests involved two participants, each tasked with evaluating mobile applications for two different airlines: Aer Lingus and Eurowings. Before beginning, each participant was provided with an overview of the test structure to set expectations. I then outlined the main focus areas: user context, goals, behaviors, positive interactions, pain points, mental models, and potential improvements. Each category was color-coded and emphasized in my notes.

To capture the emotional aspect, I also developed an emotional scale that tracked the users' feelings throughout the testing process. These emotional responses were noted alongside the key observations. Additionally, I segmented each interview into key sections, which served as a template for analyzing all the tests. Key quotes from the users were highlighted and incorporated into the findings for further insight.

View The full Project

Usability test

Usability testing offered valuable qualitative insights into the flight booking experience. I conducted comparative tests by having users complete tasks on two different airline applications.

To begin, I created a recruitment screener to identify suitable participants, focusing on airline customers within my network of family, friends, and colleagues. I defined specific recruitment objectives, demographic profiles, user goals, and research parameters to ensure the selection of participants who would provide rich, qualitative insights. After finalizing these criteria, I sent out an email invitation to those who fit the profile and were willing to participate in the study.

Next, I developed a detailed usability test script that included an introduction, an in-depth interview, and a set of tasks for the users to complete. I prepared the test environment by setting up screen recording for the mobile device, audio capture through a microphone, and video recording of the user's facial expressions using a camera. For the test, I selected the WizzAir and EasyJet mobile applications, crafting a scenario that guided users through the booking process. The scenario included specifics like destinations, length of stay, and travel dates.

As users completed the tasks, I asked them questions about their experience and how each step of the process made them feel. Throughout the tests, I took extensive notes following a structured approach. Key dialogues were color-coded, and user quotes were highlighted to capture emotions and insights. After each session, I reviewed the video recordings to extract additional insights and refine my key findings.

Analysis Techniques

Using affinity diagrams, customer journey mapping, and empathy maps to translate research data into actionable insights.

Affinity diagram

Conducting an affinity diagram session enabled me to sift through large amounts of data and distill my findings effectively. I reviewed all the research from my previous tasks and created an affinity diagram to organize and structure my qualitative insights.

Working alone, I analyzed data from various research methods, including competitive benchmarking, online surveys, usability test videos, and notes. I then used Post-it notes to capture key points regarding the user experience, such as goals, behaviors, pain points, mental models, and contextual information.

I started by placing the notes randomly on the wall to get an overview of all the data. Once everything was up, I began grouping the notes into relevant categories. Each group was labeled with a title, and larger groups were broken down into smaller subgroups for greater clarity.

Afterward, I transferred the physical diagram into a digital format using Miro. I color-coded the notes according to the specific research task they originated from, and sequenced each group in chronological order to mirror the user journey through the booking process. Additionally, I highlighted consistent experiences throughout the journey, placing these outside the main sequence for further consideration. This process resulted in a comprehensive set of groups and insights, which I then carried forward into the next stage of the project.

View The full Affinity Diagram

Customer Journey Map

I expanded upon the findings from my affinity diagram by adding greater structure to the analysis of the research data. I created a customer journey map to outline the high-level steps in the user journey, aligning these steps with the groupings established in the affinity diagram.

For each stage of the flight booking process, I documented user goals, behaviors, contexts, positive experiences, pain points, mental models, and suggested improvements. These key categories formed the basis for mapping the user journey and overall experience. To enhance clarity and visual appeal, I employed color coding once again. Additionally, I incorporated the emotional scale from my previous note-taking task, including an emotional curve that ranged from anger to delight. The journey map was further enriched with direct user quotes, and key points were presented as bullet points for easy reference.

Initially, I sketched the customer journey map by hand, using this rough draft as a foundation to further structure and design the map digitally in Figma.

View The full Costumer Journey Map

Design - Solving the problem

Following the insights from the research analysis, I was now able to begin implementing a solution to the problem:

• Flow Diagram

• Interaction Design

• Fidelity Prototype

• Prototype Usability Test

• Wireframes

Flow diagram

I began the design phase of my mobile application, aiming to address the issues identified during my research, which were clearly outlined in the customer journey map.

To kick off the process, I developed a high-level flow for the application, concentrating on a single primary use case. I outlined each step of the booking process and identified key screens and states corresponding to each part of the user journey.

Initially, I sketched the flow on paper, creating a rough and straightforward representation that allowed me to visualize the process. This approach helped me break down each user interaction and gain a clearer understanding of the various screens involved.

Once I had my initial sketches, I transitioned to Figma to refine the user flow. In the digital format, each screen or state was represented by a box resembling a portrait-oriented phone screen, while interactions were indicated by circles symbolizing taps on the device.

To enhance clarity, I used specific colors to highlight each key section of the flow, making it easier to follow and understand. The flow was designed to be simple and linear, guiding users from the home screen to booking confirmation. This diagram laid a strong foundation for the application, providing a logical and structured basis for further development.

View The full Flow Diagram

Interaction Design

I progressed in the design process by sketching all the screens involved in the mobile application's flight booking process. At this point, I was ready to develop a solution and address the identified issues.

I revisited my flow diagram to define the specific screens to design, making sure to account for screen states that varied significantly depending on user interaction.

To ensure consistency, I sketched the main screens required to complete the flow, adding notes on potential challenges or areas of improvement. I carefully mapped out the navigational flow and, drawing from both my flow diagram and user research, began designing the application with a clear understanding of user behaviors.

Although the flight booking process is largely linear, I recognized that the main flight search followed a hub-and-spoke navigation pattern. Similarly, the "extras" screen also used this navigation model, with optional selections for the user. Drawing inspiration from my research and competitive benchmarking, I designed an interface that allows users to move through the booking process with ease and confidence.

View The full Interaction Design

Prototype

After establishing the core solution with my flow diagram and initial sketches, the next task was to develop a medium-fidelity prototype for the Fly UX mobile app. This prototype needed to be detailed enough to evaluate the overall flow, screen layouts, text, and essential user interactions.

Relying heavily on the initial structure provided by my flow diagram and sketches, I designed each screen in Figma. Every screen was mapped to correspond with key user interactions and potential screen states, ensuring that the journey was seamless. The design itself was kept clean and minimal, with a monochrome palette to prioritize ease of use and navigation.

As I moved through the booking process, I carefully designed each screen and created a consistent library of interface elements. These components were reusable across the app to maintain visual and functional cohesion. I chose a straightforward typography style and designed intuitive buttons and form fields, ensuring users could easily follow the flow without confusion.

Once the screens were set, I transitioned from static design to interactive prototyping in Figma. This process involved connecting the screens to simulate real user interactions, determining how each action would trigger the next screen or state. I carefully crafted the flow, beginning from a designated start point, and enhanced the interactions with smooth transitions and animations. I also incorporated loading screens, overlay effects, and subtle animations to make the prototype feel polished and realistic. My focus was to create a frictionless experience, allowing users to navigate the prototype confidently and effortlessly.

Try out the full Prototype

Prototype Usability Test

To provide developers with the necessary details for accurately building the product, I conducted a usability test that included an in-depth interview using my prototype.

I followed a similar approach to the one I had used in the earlier user research phase. First, I developed a recruitment screener to identify airline customers from my personal network of family, friends, and colleagues. Next, I created a script for the usability test, which incorporated questions for a deep interview. The test environment was set up to record both the session and user interactions, while I took detailed notes throughout the process.

After completing the usability test, I carefully reviewed the recorded session and analyzed my notes. This allowed me to identify areas where the user flow could be improved. These insights were instrumental in refining and iterating on the prototype, ensuring it evolved into a more effective and well-rounded solution.

Wireframes

At this stage, I transitioned from the prototype to developing the final design solution, which would serve as the detailed blueprint for developers to accurately construct the product.

I captured each screen from the prototype and, for every page of the wireframes, I placed the corresponding screen alongside a list of bullet points outlining each interaction and key components. Each screen was labeled clearly with titles and dates to ensure version tracking. The bullet points described what should occur with every user interaction, offering clarity for each action.

To ensure seamless communication with developers, I included precise notes detailing animation timings and the flow of navigation between screens. Every aspect of the solution was annotated meticulously, allowing developers to fully grasp the intended experience. By ensuring the wireframes were easy to interpret and thoroughly detailed, I could guarantee that the final product would be built with accuracy and consistency, giving developers confidence in the execution of the design.

View the annotated Wireframes

What I Learned

Working on this project in a real-world context taught me just how critical it is to adhere to the UX design process in order to create a successful product. Throughout the journey, I gained a deeper understanding of the role of a UX designer, along with the skills and mindset necessary to excel in this field.

I particularly enjoyed the structured approach that the UX process offers—identifying problems, developing empathy with users, and truly understanding their needs. This allowed me to create a user-first digital product that delivers a positive experience. Along the way, I also built a versatile UX toolkit that will serve me well in future projects.

This project was a rich learning experience, and looking back, I would place even more emphasis on research, especially usability testing. The insights I gathered were invaluable and gave me the confidence that I was addressing real user challenges. While this was my first foray into UX design, the process was both rewarding and enlightening.

Key Takeaways:

  • User Experience is paramount: It was fascinating to see how even minor frustrations could overshadow an otherwise positive interaction. Users often blamed themselves for issues that were actually design flaws. This reinforced the importance of making the experience seamless.
  • Research is indispensable: A product can’t solve a problem without a deep understanding of that problem. Through research, I was able to uncover user goals, behaviors, pain points, and mental models—without which, designing meaningful solutions would have been impossible. Skipping research means skipping UX.
  • Iteration is key: The process of design-prototype-validate-repeat is essential to refining a solution. Design is never a one-time effort; it’s constantly evolving based on feedback and testing.

What I Would Do Differently

  • Expand the research phase: I would aim to gather more survey responses and conduct additional usability tests and in-depth interviews. This would offer a more precise understanding of the user experience and strengthen the user-centered approach.
  • Increase validation: More usability testing on the prototype would have provided further insights, either confirming or challenging assumptions. This step is crucial for reducing risks before development.
  • Consider the target audience: Since this wasn’t a real-world project, there wasn’t a specific brief detailing brand identity, business goals, or target audience. These elements can significantly impact the design process. For example, designing for a luxury airline versus a low-cost, last-minute flight service would produce different outcomes.
  • Collaboration benefits: UX design thrives on collaboration, and although I completed this project independently, I recognize the advantages that teamwork can bring. From research to final design, collaborating with others could enhance both the process and the solutions created.

What I Earned

Professional Diploma in UX Design

Tools

Figma, Miro, Zoom, Adobe Photoshop, Adobe InDesign, Adobe Illustrator

If you interested in working with me, please get in touch.