1. Introduction - FLY UX

This project was developed during my studies with the UX Design Institute, Professional diploma in UX Design.
During six months I did user research, user goals, prototyping and wireframes for a mobile application. This case study, named Fly UX, aimed to use great design as a source of competitive advantage over other airlines, bigger and more bureaucratic. The main focus was on the flight booking process, namely searching, finding and selecting flights. With the end result being a prototype and a detailed set of wireframes, covering what would be needed in a real case to work with a team of developers in order to get the software built.

Process

The full process was composed by five stages, research, analysis, design, prototyping and wireframing.
During these five stages, I developed interview scripts, conducted interviews, ran usability tests, created user journey maps, surveys, etc. The flight booking process is a complex one, and I tried to focus on some of the problems that I came across my research and even testing. Some of the problems I focused on were clear display of information (stop-overs), easier way to compare fares and avoid information overload.

User Research & Goals

Competitive benchmarking, Online survey, Note-taking, Usability test.

Research was fundamental to understand the problems we are attempting to solve for users. Covered a range of research techniques, including the core skill of usability testing, such as interviewing, card sorting, online surveys and heuristic evaluation.

Workflows

Interaction design for mobile.

Using the data and materials from previous parts of the project, such as the "Customer journey map", I was able to draft a flow diagram for mobile. Although working on previous developed materials, this part of the project made me realise that some aspects needed change. Created a low fidelity prototype, based on the flow diagrams and sketches.

Prototyping and Wireframing

Adding more detail in the form of interactivity,extra details for developers.

Creation of a medium fidelity prototype, using the low fidelity prototype and new sketches. During the wireframes, I've addressed every question that may arise from the prototype, helping the developers build the product accurately.

2. User Research

The user research stage was essential for identifying problems and pluses from competitors and creating a goal oriented approach for my project. The competitive benchmark allowed me to identify industry standards; the survey was useful to define the goals and the note-taking to point out pain points and expected app behaviours. The reason why I chose Ryanair, Easyjet, Qatar Airlines and Emirates was to have different perspectives on the low cost and luxury market.

Competitive benchmarkCompetitors analysis.

Identified what the competitors are doing right, and learn from what they are doing wrong. For this, I’ve reviewed four mobile apps to gain some insights on how best to design the airline app.

SurveyOn-line Survey.

Gathered data on online behaviour using Airline services (booking, searching, paying, etc). With a mix of closed and opened questions I was able to understand purchasing behaviours and user priorities.

Relevant findings:

80% browse for flights in a search engine
70% buy flights in the website vs 3% in an App
80% use a registered user profile

Note-takingUnderstand users emotions.

Often overlooked as a core skill for UX professionals but good notes are a fundamental part of research. When taking notes my job is to highlight the key insights from the session: anything which will help me make decisions about my design choices later on.

Usability Test

During the usability testing I was able to identify:

Problems navigating the calendar;
Lack of information (Ex: COVID);
Better overall performance of the low-cost apps (Ex: progressive disclosure).

3. User Goals

Flow diagram for mobile

My process was divided in four stages. Initial screen sketching, sketching inside mobile layout, screens for testing inside a mobile layout prototype and final screen problems addressed.
1st stage - Sketch all the screens and states,
2nd stage - Already tried to visualise inside the screen, with real size limitations and constrains,
3rd stage - I used a real size phone sketch to understand if the information and sizes of the fields are usable,
4rd stage - I’ve addressed all the problems and details that I came across with while sketching, so that its ready for prototyping.

Prototyping

Testing

Making sure the prototype contains enough detail and interactivity to test the high-level flow, screen layouts, text, and basic interactions.

Sketch

Developed using Sketch.

Mid-fidelity Prototype

Based on the previous flow diagrams and sketches.

Medium Fidelity Prototype

4. Wireframes

Clarifying all the interactions and scenarios for all the screens.

Including buttons, transitions, animations and navigations between screens. This process takes part between the prototype and building the app stage. Like in a blueprint I provided all the necessary information at this stage, taking into consideration that I’ve based this in a medium fidelity, some aspects like colour are not addressed. This project serves as complement to the prototype project, providing additional information, such as error messages or button availability, in order for the developers to have all the necessary materials to build the app.

Conclusion

The main challenges I faced for this project were caused by the pandemic. Finding people for the usability tests was challenging. One of the things I learned from this project is how valuable some steps are. Building a really good research foundation helped me be prepared, but it didn’t solve everything. Prototyping and wire framing still managed to bring up problems that I didn’t consider before, such as the path from selection to the payment. From my experience in e-commerce, I think adding a clear path and steps for the costumer journey would add a great detail for the product. I focused on creating a bold and simple interaction, tackled the easiness of missed information such as stop overs and squeezed the extras so that the user could focus on the essential.

Although I’ve concluded my project for my course with the UX Design Institute, my next steps are to redo the selection to purchase therefore improving the user experience.

High-fidelity prototype

Developing a high-fidelity prototype for the app, going a step further in the details, and improving some aspects of the project, such as the path from selection to purchase.

Fly UX - Case study