Conduct research on existing flight booking websites and use your findings to design a user-friendly flight booking web application.

Usability Test
I started this project by conducting two usability tests on two existing airline apps, Lufthansa and KLM. The test consisted of a brief interview and two tasks that had to be completed on one of the apps. This research method tells a lot about the way users navigate through the booking process, what pain points they would hit, what expectations they have and what aspects are experienced as positive that could be translated to my design. I created a usability test script to prepare myself for the session, and to make sure I wouldn’t be asking any leading questions. Using Camtasia and Reflector I was able to follow everything the participants did on the apps.

Research Objectives

Tasks

Depth Interview
‍In addition to the usability test I conducted a depth interview with Suus, a 32 year old teacher who flies multiple time a year for leisure. I used this method to get a broader understanding of context when the user is traveling, along with a more in depth understanding of the user’s goals and opinions in the booking process. I used my Voice Recorder App on my phone to make the conversation feel as natural as possible for the participant.

Online Survey
I created an online survey using Survey Monkey to get a more quantitative understanding of the context in which a flight would be booked. It contained 10 questions, both closed and open questions and was completed by 28 people.

Competitor Benchmark
On top of the research methods focussed on the user I researched 4 apps to learn about best practices and design solutions from competitors or apps related to an airline app. I researched EasyJet, Emirates, Skyscanner and Hopper. Going through the booking process step by step I could experience what user experience when booking a flight when using these apps.

Research Objectives

Affinity Mapping
Now it was time to try to make sense of all the raw data acquired by the methods highlighted above. I asked a friend to go through all of the data with me and to keep notes on post-its. After finishing going through the test, interview, survey results and benchmark document, we stuck all of our notes to the wall and grouped them into an affinity diagram.

Customer Journey Mapping
Alongside the affinity map I created a customer journey map to get a good overview of the entire journey the customer goes through when booking a flight. I noted their goals, behaviour, expectations, context and emotions at each step.

Key findings
The analysis of all the research data uncovered a lot of pain points and room for improvement. To improve the user experience of the booking process I will be focusing on six aspects to improve.

User flow
Before getting into the design per screen I needed to get a clear vision on the journey the user would make through my app to book a flight. I started by sketching a general high level flow without too much detail. Afterwards I translated those sketches to a digital file using FlowMapp. During the rest of the design phase I’d make decisions that could affect the final flow diagram.

Defining navigation
Since airline apps are process type apps the two most obvious options for navigation are linear and hub and spoke navigation. When I examined the apps I included in the competitor benchmark document I discovered the flight booking process was divided into two parts when it comes to navigation: When the user fills in their search criteria the most apps use basically a hub and spoke navigation, the search screen being the central hub. After the user selected a flight the app uses a linear navigation to complete the purchase.
‍

To address the problem of the user feeling they can’t change their choices later in the process I tried to see if I could design a hub and spoke navigation for the steps in the process after selecting a flight. After some conceptual sketches I came to the conclusion that a linear navigation would keep the process clearer, but I’d add a step at the end where the user could edit their selections like seats or luggage.
‍

Designing the screens
Building off of the user flow and the defined navigation I started to think about the layout and interactions on every screen. I started by creating rough sketches of every screen, along with some notes on what each screen should contain. At this point I wanted to validate (or invalidate) my ideas for screen layouts and interactions, the aesthetics were no priority. When the rough sketches were done, I first sketched the screens in a more detailed way before translating my screens to digital designs.

User interface design
When I translate my sketches to digital designs I always start by creating the designs in black, white and gray. I do this to make sure the hierarchy and layout is clear without the need of color drawing attention to certain elements. After I had done this to the sketches for FLY UX it was time to incorporate some UI design. Since FLY UX is a fictional company I started by creating a logo and choosing brand colors so the UI design would have a more coherent feel. I document all the UI design decisions in a style guide.

Prototype
With all the screens designed it was time to prototype. I decided to create a medium fidelity prototype since the app doesn’t have a lot of very detailed forms that need addressing in a high fidelity prototype. I created this prototype in Figma.

Wireframes
When all the screens were designed properly and the interactions were clear I documented it all in a wireframing document. This document is meant for anyone who would be involved in building this app to have no questions about the designs or interactions.

Designing the Fly UX app was my first full UX project. It would take about a week for you to read about all the things I have learned during this project and course, but here are three of my learnings that made the most impact on me:

The importance of research
As someone who has experience with graphic design I am used to making decisions based on my own intuition. By letting go of all my expectations in the research phase I discovered that not all my assumptions are right. Instead, the user is right.

The power of the UX process
When designing I always had my own process, but to be fair it was a bit all over the place. The UX Design Institute took me through every detail of the UX process and showed me a way of working and designing that creates far more and better user centered results.

No need to reinvent the wheel
I learned to take a good look at competitors and similar products. Best practices are called best practices for a reason. Users need a product that they can trust, not a product that is a unique piece of art. I love this quote by Jim Connolly: “It’s very easy to be different, but very difficult to be better.”

While I would do some things differently next time -like conducting more research, and to ideate more- I am very satisfied with the way this project turned out. As an outcome of this project, in combination with a final exam, I finished the course with a score of 87 out of 100 and got the Professional UX Design Diploma.

Would you like to hear more about my project or about me? Drop me a line and we’ll have a chat!