Wings2Fly

UX DESIGN PROJECT • Airline online on-boarding experience

Wings2Fly – Airline online on-boarding experience

UX Design Institute Project

The problem: Most flight booking applications are challenging and have complex interactions. The lack of clarity about the airfare packages is causing frustration, and friction, resulting in losing customers.

 

Project brief: Design a new app for Wings2Fly, a start-up airline that delivers high-quality services, illustrated in an effective flight booking process.


Design goal: Wings2Fly wants an online experience that is effective, clear, and intuitive based on a deep understanding of its target user’s needs and preferences.

 

Role:  UX Designer and Researcher


Duration: 8 March to 8 August 2022


Tools: Adobe Photoshop, Adobe Illustrator, Adobe XD, Figma, Miro, Survey Monkey, Reflector and ScreenFlow

1. Research:
1A. Competitive benchmarking
1B. Online Survey
1C. Note-Taking and usability tests

2. Analysis:
2A. Affinity Diagram,
2B. Customer Journey Map

3. Design:
3A. User Flow Diagram
3B. Interaction Design

4. Prototype:
4A. Medium-fidelity prototype

5. Wireframe:
5A. Created wireframe for developers

1. RESEARCH

1A. Competitive Benchmarking

1A / 1B / 1C

In the research phase, I performed competitive benchmarking to better understand and in-depth immersion within industry conventions. For this purpose, I used the following apps: Lufthansa, American Airlines, Air Canada and Cheapflights. These airlines were chosen because they offer high-quality services and operate worldwide.
However, the main feature that I closely observed was the online booking service. Each competitor was reviewed based on home screens, booking process steps, and fare and seat selections.

FINDINGS: From competitive benchmarking, I learned how best-in-class companies deal with the problems they try to solve. In addition, I learned to understand and follow industry conventions and identify the best practices I need to emulate.

‍STUDY: Most of the features of the studied competitors are very similar. I noticed a few differences:
– Easy Accessible vs Hard Accessible
– Simplified Interaction vs Complex Interaction
– Distracting Interface vs Minimalistic Interface
– Clear Information vs Ambiguous Expressions

1B. Online Survey

1A / 1B / 1C

Online Survey was the next on the Research process, and I conducted it using Survey Monkey. The questionnaire asked the audience to share their insights, pain points and expectations based on their past experiences with airline booking software. The sample size was 20 participants and sent a survey link via email. Unfortunately, due to the nature of the free Survey Monkey plan limitations, I was forced to use just the first ten feedbacks for the final report.

‍Findings: Gathering quantitative and qualitative data gave me insight into the motivations and behaviours of the sample surveyed for booking a flight. In addition, conducting an online survey and gathering data was beneficial for developing different research skills. Finally, the collected data helped me make educated design decisions on analyzing and structuring data.

‍Study: Most users are comfortable booking online and plan to use flight services soon. However, users prefer to purchase and make flight reservations using an online app or website. Please see the details here.

1C. Note-Taking & Usability Test

Note-Taking of two external usability tests and usability tests conducted by myself

1A / 1B / 1C

Three usability tests were conducted to understand further the user’s goals and behaviours, the context of use, pain points and mental models when booking flights.
UXDI provided two usability tests, and I took detailed notes from these sessions. Learned the importance of note-taking and paying closer attention to facial and vocal feedback answers from these usability tests. Instead of writing down every word, I focused on every relevant detail that helped me understand and address the problem. As a result, I could understand and build new skills, experience and confidence by synthesizing and applying the same approach to my usability test study.
Next, I conducted and moderated my usability test for one user booking with two airline apps. I completed the test in person, inviting the user to my office, where I had prepared all materials. Because it was my first usability test, I had the opportunity to learn a few new software used for the test, ScreenFlow and Reflector.

‍Findings: Online Booking app is a powerful tool that empowers us to offer users the possibility to search for and book flight trips at their convenience. But with power comes great responsibilities to keep the user engaged and motivated and to convert users into customers. But a bad user experience can frustrate users so much that it can drive them away. That was one experience that I almost witnessed on these Usability Testings.

‍Study: If I had to mention a few results underlined in the study, I’d say that users find it hard to locate the Book Now funnel on the Home page. Then stops between the flights and luggage are details that get lost in the booking process. Finally, choosing flight fares, users find it hard to understand related terms, and certain features can be confusing.

2. ANALYSE

2A. Affinity Map

The next part of the process was reviewing, concluding and collecting all information from the Research Phase – Competitive Benchmarking, Online Survey, Note Taking and Usability Tests – identifying patterns and structuring data through Affinity Map and Customer Journey Map.

2A / 2B

Organizing the data by writing the key findings from the research phase into the stickers and placing them on a virtual board on Miro was an opportunity for me to learn new software. First, I took five colour stickers for each research source to identify where the insight came from – three Usability Tests, one Competitive Benchmarking and one Online Survey. Then, I placed each category with its data creating five groups of different colours.
The next step was identifying the data’s common elements and those related to creating specific groups. Using the grouping technique, I made the following groups: Flight Packages, UX Fails, UX Positivesm Booking Process, Use Desktop, Laptop, phone, travel apps, Home Page, Design, Flying Purpose, Booking Factor, calendar, Booking Decisions and a few more.

‍Findings: It was interesting to observe how users from different backgrounds and locations can have the exact needs and values. Users are looking for easy processes, low prices and a thriving online booking experience.

‍Study: Listening to the user’s voice is the key to improvement, and their feedback is vital and welcomed simultaneously. Booking app software needs to be accessible, understandable and self-explicit. Users like to have the steps explained in plain and unambiguous language and details presented upfront. From a look standpoint, the design should be minimal, pleasing to the eye, and very well explained, judging by the famous saying “less is more.”

2B. Customer Journey Map

The next part of the process was reviewing, concluding and collecting all information from the Research Phase – Competitive Benchmarking, Online Survey, Note Taking and Usability Tests – identifying patterns and structuring data through Affinity Map and Customer Journey Map.

2A / 2B

The next step is to use the in-depth analysis revealed by the affinity diagram to illustrate the structured data into a user behaviour flow of decisions and emotions experienced by the user through the booking process. The user behaviour flow is called the Customer Journey Map because it shows the deepest and highest user experience moments over the process. The highest moments are defined by positives, the good feelings when the user is engaged and confident; the lowest is marked by critical moments when the user’s trust is damaged, and pain points are present.

‍Findings: The Customer Journey Map demonstrates how customer confidence starts on the point of confidence and is quickly affected by missing the Booking Button or landing on a busy Home page. If the Flight Search and Calendar Booking are going smoothly, problems are revealed on the Flight Packages and diverse Fares Options that need to be clarified and dropped the confidence level. Interestingly enough, the end of the process brings the user on good ground. Still, some elements like excessive Covid messages and look and feel factors still affect a positive client’s general impression.

‍Study: Customer Journey Map demonstrates the demanding points where a critical engagement challenges the user’s emotions, and the result is that process completion can be dangered.

3. DESIGN

3A. User Flow Diagram

Using my Research Data and Analyzed data as building blocks, I laid a solid foundation for the Design phase, building clarity and confidence by embedding users’ feedback in my product.

3A / 3B

A linear process of booking presents Screen States (rectangles) and Interactions (circles), progressing on the sequential process from the Homepage to the booking confirmation showing the whole booking path.
Using this visual progression, I identified actions and states that helped me lay down my first project sketches in the drawing process.

‍Findings: It was interesting to observe how users from different backgrounds and locations can have the same needs and values. Users are looking for easy processes, low prices and a thriving online booking experience.

‍Study: Listening to the user’s voice is the key to improvement, and their feedback is vital and welcomed simultaneously. Booking app software needs to be accessible, understandable and self-explicit. Users like to have the steps explained in plain and unambiguous language and details presented upfront. From a look standpoint, the design should be minimal, pleasing to the eye, and very well explained, judging by the famous saying “less is more.”

3B. Interaction Design

The next part of the process was reviewing, concluding and collecting all information from the Research Phase – Competitive Benchmarking, Online Survey, Note Taking and Usability Tests – identifying patterns and structuring data through Affinity Map and Customer Journey Map.

3A / 3B

Once I established the flow, the next step was drawing sketches of the booking process of my newly developed app’s layout. Finally, after all the previous research processes, I started putting the pen on paper and making sketches for an iPhone 13 Pro screen.

Sketching
Drawing low-fidelity sketches can be messy, but it is a fast, effective and low-cost activity where basic structures reveal step by step, drawing by drawing the layout and look of the newly developed app. I used a few markers with different colours to highlight details and mark the essential thoughts. I draw the vital elements from a composition standpoint using not a replacement text but an actual text to conserve the look and prevent future changes. I tried to put as many details as I thought bill be necessary; however, when I was building the medium-fidelity prototypes later, I realized that a few new annotations were still required.

4. PROTOTYPE

4A. Interactive Prototype

4A

After I defined the solution from my flow diagram and sketches, I moved to create a medium-fidelity prototype, adding interactivity to the booking process. I built the interactive prototype in Figma, where I had the chance to learn and understand Figma in dept. To use Figma at its full potential, I took a course from SaaS Design where I got a certification For Beginner To Figma Pro.

Interactive Prototype
Creating the prototype was fruitful because I enjoyed creating it and adding interactivity to make it functional. In addition, this process taught me the importance of creating the prototype considering every detail the user will use in the booking process. In the future, I would like to expand my knowledge using Adobe XD, but for now, I find Figma a fantastic tool for prototyping and interaction.

5. WIREFRAME

5A. Interaction Design

5A

Create wireframe for developers
My sketches and prototype work are done, and I need to gather, document and present the extra details to developers to build the product accurately. This process helped me define the terminology, understand the functionality and write down the requirements to build the application accurately.

During this process stage, I learned that developers are busy enough and don’t have time to develop wireframing specifications. Therefore, it is my UX job to provide what they have to build and to hand out a detailed blueprint for the development stage.

6. OUTCOME

6A. Learnings & Benefits

6A

What I learned
From this project, I learned how I have to approach a project from a UX perspective. My background comes from Graphic Design, Web Design and Visual Design, where I worked for more than 15 years. I always care about the user and try to keep the user engaged and happy and convert visitors into customers. Therefore, I did my homework all the time to understand the client, his challenges and desires.

But I never followed an in-depth research process like the UX process I learned on UX Design Institute Wings2Fly Online Booking App. Now seeing all the processes from start to finish, I understand the benefits that the UX approach can give to new software in development. I’m so happy that is no place for biases or blind guesses.

As a UX Designer, I learned the following creative in general and UX professional:

• Keeping the user upfront and central is a vital requirement for each design process.
• Research is the best solid foundation that a software project must be built and develop.
 Testing on real users multiple times in multiple phases saves time and money and ensures the success of a product.
• Make sure you never make assumptions and constantly question and validate hypotheses with your target users.
Understand your user perspective and make sure you listen to their problem, needs, frustrations and pain points. Successfully address, solve and come up with solutions that raise the level of confidence of your users.
Treasure any feedback and see it as an opportunity to improve and fix the problem in the early stages, which will save you time, and money and help you to deliver successful products