Fly UX
Background
- Role: UX Designer - UX Researcher
- Client: Fly UX, a start-up airline
- Goal: Create an online experience that is fast, easy, and intuitive.
- Task: Design a new website with a focus on the flight booking process
- Methods: Benchmark, Online survey, Usability test, Affinity diagram, Customer journey map, User flow diagram, Interaction design
- Design tools: Miro and Figma
- Deliverables: Medium-fidelity prototype, wireframe
- Duration: 6 months
Design process
1️⃣ Research
Benchmark
“Competitive benchmarking is an extremely useful research technique that allows you to identify what your competitors are doing right, and learn from what they are doing wrong. For this project, you’ll review four websites to gain some insights on how best to design your own airline website or app.”
Goals:
- How do best-in class websites and apps solve the problem?
- What are they doing really well that can be emulated?
- What are they doing not-so-well that can be improved?
- What conventions have been established that we need to follow?
Competitors:
- Air France
- Air New Zealand
- EasyJet
- Airbnb (to understand how a leader of another industry is resolving the same problem than airline companies)
Pain points:
- Too much informations on the homepage (Air France and Easy jet)
- Unclear icons (Air France)
- Unclear flights categories (Easyjet)
- Cheapest price for flexible dates not highlighted (all)
Good points:
- Minimalist display on the homepage (Air New Zealand, Airbnb)
- Clear informations about dates and additional flight feature (Air New Zealand)
- Seats selection well designed (all)
- Forms easy to fill-in (all)
Online survey
“You’ll create an online survey and email it to friends and colleagues to learn more about the goals of airline customers. The data you gather will help you make more informed design decisions later on, and give you some practice analysing survey data.”
Goals:
I wanted to learn more about the goals of airline customers and gather data that will help me make more informed design decisions later on:
- What are they trying to do?
- Is there anything preventing them for doing what they want?
About:
- 13 questions
- Qualitative and quantitative data
- Learn more about the goals and behaviours of people that use airline websites
Topline results
62%
are travelling once or twice a year
83%
Use a laptop to book a flight
62%
Use an aggregator and then switch to the airline website
91%
prefer to only see the flight booking option on the homepage and nothing else
Other results
- When using an aggregator, users want a large overview among the the options and prices
- When using the airline website, users are looking for security and confidence
- While going on their airline website, users are confident, excited but can also feel stress (because of Covid-19)
- Book a flight, compare the prices and check-in are the most common used action while going on the website.
- Almost all the users (91%) prefer to only see the flight booking option on the homepage and nothing else. A few of them also like to see discounts available (33%)
- Almost all the users don’t want to see anymore pop-up windows that pollute their experience (aggregator +). They want a simple design.
- A few of them who are « flexible travellers » want a better visibility about the cheapest dates.
Interview and Usability test
“We believe usability testing is the most powerful tool a UX researcher can use because it allows us to gain rich insights directly from the user. These insights inform our design decisions helping us to make better products. This exercise will bring you through setting
up, moderating, and recording a usability test. You will conduct a comparative usability test with one user and we recommend that you also conduct an interview as part of the session.”
Goals:
- Learn about the context of use of people that use airline websites or apps: what are they trying to do, who are they with, where are they, what devices are they using?
- Learn about the goals and behaviours of airline customers when booking flights
About:
Before running the usability test, the users were interviewed to get more insights about their goals.
The usability tests were then conducted to learn more about users behaviours and discover what struggles the customers could encounter using the competitors websites.
- Conducted remotely
- 2 competitors sites were tested: Easyjet and Air New Zealand
Also, to gather more insights, I had to take notes of two other pre-recorded usability tests.
Quotes from the test
“I Did not understand right away that here it was the departures and there the arrivals” - User during the usability test
“At this step I want to get to the end quickly” - User during the usability test
2️⃣ Analyse
Affinity Diagram
“Learning how to successfully run an affinity diagram session is an extremely important skill for a UX professional. These sessions allow us to sort through large volumes of data and get to the root of our findings. For this project, you’ll review all of the research from your previous work and create an affinity diagram to represent what you’ve learned so far. This work will help you with further analysis and design decisions in the coming projects.”
Goals:
Review your research, taking notes as you do. Use those notes to create an affinity diagram • Learn how to put structure on qualitative research data • Learn the power of collaborative analysis
As the first step to put structure in my data, I moderated a remote Affinity Diagram workshop on Miro.
- All the research has been shared with the participants : Benchmark, Online Survey, Note-Taking and the Usability test video.
- First, each participant was asked to take notes about all the research
- Then, with sticky notes, they have individually sticked each idea on the wall
- Then we tried to find the different categories that could appear in our own sticky
- At last, we made a consensus among our categories and also made sub- categories
Results:
- After completing the Affinity Diagram, most of the categories followed the booking process: Before Booking, Homepage, Search a flight, Flight selection and Options / Extras
Customer Journey Map
“Creating a customer journey map is a valuable technique to learn and another great project for your portfolio. You’ll build on the work you did in the affinity diagram by putting even more structure on the analysis of your research data. Remember, creating a journey map is not a mathematical, objective process - there is subjectivity involved. Often there will be gaps between the affinity diagram and the journey map, you need to use your own judgement to fill those gaps.”
The goal was to put even more structure on the analysis of my research data based on the Affinity diagram. So I made a Customer Journey Map on Figma:
- The elements of the timeline are : Before Booking, Homepage, Search a flight, Flight selection and Options / Extras. They all include sub-categories.
- The elements used for the Journey Map are: Goals, Behaviours, Context, Pain Points, Mental Model and Thoughts/Emotions
Major Analysis conclusions
- The main touch points are on the homepage and at the end of the process
- Covid-19 informations are necessary but take too much place
- All the informations displayed on the homepage can overload the users
- Users liked to see the suggestions of the most popular airports
- The users prefer the pop-up calendar to select dates
- Confusion about the departure and return flight
- Confusion about the stopovers
- Don't know how far the airport is from the city
- Liked the fact that you can modify without going back to the homepage
- Liked when the price is display early
- Liked to see the seats left
- Too much informations on the flights selection
- Struggles to see the departure time
- Some informations during the flights selection are unclear
- Struggles to choose a fare
- Struggles to find the "Confirm"/"Book" button
- The users have the feeling that the booking process lasts too long, with too much unnecessary steps and informations
3️⃣ Design
Flow diagram
“You’re now starting to design your Fly UX website. Your overall objective is to fix the issues you’ve uncovered during your research, which are highlighted on the customer journey map you created in project 6. In this project, you’ll define a high-level flow for the
desktop website. We’ll focus on one flow, that is, one primary use case. Don’t start to design your screens just yet, this project is to ensure you first understand how users will flow through your design.”
I have sketched out the user flow and represented all the interactions, screens and screens states.
The goal here is to start designing solutions of the problems encountered by the users in the research and analysis phase.
Examples:
- Highlight the booking insert instead of other informations on the homepage
- Automatically display a pop-up calendar when clicking on the dates field
- Add a map feature to see how far the airport is from the city
- Fares clearly presented and designed to be understood by the users
- Possibility to skip optional steps
- Etc.
Interaction Design (pencil and paper)
“In this project, you’ll continue the design process and sketch the screens for the mobile app flight booking process. In subsequent projects, you’ll convert these sketches into a prototype and wireframes. So far you’ve done a lot of work understanding and articulating the problem, you’re now ready to get into “solution mode” and start solving that problem.”
Goals:
- Build on the flow diagram you created in the previous project and sketch the screens and screen states for users flowing through the Fly UX mobile app
- Address all the issues and user goals identified in your research and analysis
4️⃣ Build
Prototype
“In this project you’ll create a medium fidelity prototype for the Fly UX desktop application. You’ve already defined much of the solution with your flow diagrams and sketches. Now you’re adding more detail in the form of interactivity, while also learning some powerful tools along the way.”
Goals:
- Build a prototype following the guidelines shown to you in the prototype lessons
- Make sure the prototype contains enough detail and interactivity to test the high-level flow, screen layouts, text, and basic interactions
5️⃣ Test
Usability test
“We want you to conduct one usability test, including an interview, using the desktop prototype you created. This test will allow you to define the extra details that developers need to build the product accurately.”
Goals:
- Continue to build your skills, experience and confidence in what we believe to be the most powerful UX technique
- Learn how to prepare and moderate a desktop usability test
- Learn how to conduct an interview and draw insights from users
- Learn how user testing a prototype can help you identify what’s working and not working in your designs, and help teams avoid building solutions that aren’t quite right
Thanks to these Usability tests, some adjustments has been made, including:
- Improve the pop-up window that allow location
- Better display of flexible dates
- Better display for the "Continue to"/"Skip" screen
- Improve the tabs for the seats selection departure/return flight
6️⃣ Hand-off
UX Specs
“You’ll create UX Specs for the Fly UX desktop application, from the homepage up to and including seat selection (this is the minimum requirement but you can go further if you wish). You’ve already completed most of the work in your sketches and prototype, and are now defining the extra details that developers need to build the product accurately.”
The goal here was to write down all the necessary informations and details a developper would need to build the website accurately.
We explained the rules, controls and feedbacks of each features, buttons or fields.
Learnings
By working on this project and earning this diploma,I have learn to:
- Think like a UX designer and bring the user-centred mindset to my product design project.
- Prepare and conduct a variety of user research studies, including usability testing, depth interviews, surveys etc.
- Combine different research techniques to develop both a broad and deep understanding of user goals and problems.
- Use affinity diagrams to triangulate research data and identify the key research insights.
- Use analysis frameworks such as customer journey maps to clearly articulate the existing customer experience.
- Define the high-level flow and navigation for desktop and mobile software applications.
- Design the appropriate controls, rules and feedback for desktop interfaces.
- Design and annotate wireframe specifications for developer handover using popular wireframing tools.
“Great affinity diagram, it looks like you had a really valuable mapping session.” - Emily Jacquier - UX Design Institute Mentor
“Brilliant flow, very well though out, you can tell a lot of time went into this.” - Rebecca Bradley - UX Design Institute Mentor
“Your sketches are really clear which is so important. Vey well communicated” - Rebecca Bradley - UX Design Institute Mentor
