March - April 2022 | Concept project
UX research & UX/UI design roles focusing on user journey experience and accessible design systems.
Due to the pandemic, fewer people are booking flights, so it’s crucial that flight booking flows work properly for customers. Usability testing of mobile flight booking flow reveals that customers spent more time on pages due to unclear page hierarchy and text legibility.
Redesign mobile flight booking flow to help users scan for flight details. Increasing the usability test score by 2.55 points.
Starting with a usability test provided insights to refine JetBlue’s booking flow. The moderated test environment let me question participants when they were confused with the design revealing deeper behavior insights. The average usability test score was 6.25 out of 10.
Users missed key information while booking flights on mobile due to...
Tedious actions: “The amount of extra clicks is so unnecessary”
Redundant pages: “This is weird, I clicked checkout, and this is essentially the same screen but with a price on the bottom of the page?”
Small text size: “It’s hard to see the flight times.”
Unclear labeling: “Why am I selecting so many seats for this flight?”
By conducting interviews and a survey, I began understanding flyers’ decision-making process as they selected a flight. Flyers want to maximize the value of their flight by either saving money, getting there faster, and/or staying longer at the destination.
Price
Amount of stops
Flight departure time
Flight date
Ever changing travel & health requirements, such as pre-departure Covid-19 testing and quarantining, drastically changed the flying experience. To contemplate this experience, I created David Morris, a persona that acted as a high-level research summary of the recent flyers’ goals and frustrations.
Survey measures that 71% of travelers felt ready to fly domestically, but only 40% internationally. How can I reassure flyers during their journey?
Booking a flight is only one part of the overall flying experience, and with uncertain travel restrictions, I wanted to ensure that David succeeded in flying to his destination. By mapping out his journey, I found opportunities to alert David of travel restrictions, offer Covid tests and quarantine hotel bookings, and provide reminders for pre-flight steps.
After creating David’s flying journey, I mapped out JetBlue’s website flows and compared how both of these experiences aligned.
David’s goals are to research flights and to book an international flight.
JetBlue’s goals are to show flight options and complete the sale.
Usability testing identified that Trip Summary and Checkout pages are too similar. I removed the Shopping Cart page from the flow because it caused confusion in all the participants.
Users found the booking process tedious, causing them to make mistakes by overlooking page headers and labels. A solution involved fixing the hierarchy of JetBlue’s design system to increase the scannability of the page. Let users find information fast so they can easily compare flights and make a decision.
I quickly sketched key screens and critiqued the strengths and weaknesses based on usability testing insights.
Accessibility: A large amount of the legacy design contains 12px text. Simply put, make essential details legible and clickable.
Clear labeling: Let users know where they are in the process by labeling to avoid confusion.
Informative: Provide users with travel restriction information about their flight.
I used JetBlue’s current branding to revise portions of the mobile design system. To help users like David, the goal was to structure mobile content to be scannable as they researched flights on their phone.
Due to the low contrast between photos and headers, a few users didn’t realize when they transitioned from departure to return flights.
Typography: Users scan for price and time of day, so it visually needs to stand out.
Flight details: The original placement was close to the dropdown icon and created misclicks. I moved it to the opposite side of the card to improve accuracy.
Dropdown: I made the icon larger to indicate that clicking the card will reveal more details relating to fares.
For those flying internationally, there are more steps to fly and a higher risk of failing to meet all the travel requirements. Adding a section that educates users while they are still researching flights can help them feel more prepared to book a flight during uncertain times.
Users felt lost in the seat selection process and didn’t realize their roundtrip flights contained plane changes. By listing the number of flights, users can expect how many seat selections to add.
For my second round of usability testing, I conducted an unmoderated remote session through Maze to gather a combination of quantitative and qualitative feedback.
To test for complexity, users booked an international flight from New York to Kuala Lumpur, Malaysia, involving layovers and selecting multiple seats.
Usability test 2: 8.8
Usability test 1: 6.25
(1-10 rating)
8 of 10 users understood that their departure and return flights contained connecting flights that required them to select seats for 4 flights in total. This is a major improvement from the first usability test, where 0/4 of users understood why they selected four seats.
8 of 12 users found the destination’s travel restrictions. One stated, “It saves me the trouble of having to look up what I need separately.”
10 of 12 users stated that the booking process was straightforward.
“I just booked a flight on JetBlue and this is very accurate to the existing design!”
— Participant
Working on this project I learned a lot about building flexible design systems.
By focusing on parts of JetBlue’s flows that contained user pain points, I was able to determine which sections to refine. A considerable amount of the old design contained 12px text so the redesign focused on improving the mobile experience by increasing the hierarchy and legibility of text.
Next time I would prioritize edits with the greatest impact then select the top few. While redesigning it's tempting to keep making small edits here and there, and that time adds up.
Taking insights from this testing round and implementing them into a responsive desktop version.