BLUE JAY
A responsive travel website that streamlines the flight searching and booking process.
Researcher
UI/UX designer
Wire framing
Branding
Prototyping
my role:
timeline:
80 Hours
December 2022 - January 2023
tools:
Figma
Background: Designing a User-Centered Flight Booking Experience
The best travel experiences start by booking a means of transportation. Air, rail, the ocean, et cetera: these are just a few methods of getting from point A to point B. I created a responsive travel website that simplifies the flight searching and booking process.
The goal of this project was to create a user-friendly and visually simple interface that allows users to quickly and easily search and book flights.
How can we streamline that daunting process for travelers?
Participant Insights: Understanding the needs and pain points of frequent travelers in flight booking
To begin, I conducted primary research by conducting user interviews to understand the pain points and motivations of users as it pertains to searching and booking flights. From these interviews, I discovered that users appreciate a visually simple and organized interface that doesn't overwhelm them with too many options. They also appreciate transparent pricing and good rewards programs.
Key findings
Some participants did not like Expedia due to the cluttered website and lack of customer service. But they agree that Expedia has cheaper flights.
All participants filter by price and arrival time.
Some participants filter by seating on the flight and if there is a layover.
Participants rarely book packages/only book their flight online.
Participants averaged around a few days to make a final decision on a flight and will often check back online to see if prices have fluctuated.
Analyzing the competition: Identifying opportunities to stand out in the crowded online travel industry
After interviewing my participants, I researched and compared 3 popular flight searching and booking websites. I compared their strengths and weaknesses to help determine what would make for my own successful searching and booking website.
From my research I gathered the following:
Keep the space visually simple and organized. The searching/booking process is extremely detailed and users can get lost if the visual space is too cluttered.
Users like options but not too many options as this can hinder their ability to decide. They need a way to compare prices.
Users appreciate transparent pricing and a good rewards program.
Listening to the user's voice: Prioritizing the most desired flight search filters for a personalized booking experience
I conducted a survey to help decide what users believed to be the most important filters they needed in order to decide on a flight.
50-75% of participants agreed that these filters are most important when it came to searching and booking a flight: price range, duration of travel time, arrival time, departure time
67-83% classified these filters as least important when it came to their searching and booking process: carbon emissions, filter by airline, flight class
33-50% classified check-in and carry-on baggage as well as flight seat choice to be moderately important while duration of layovers and number of layovers were classified as somewhat important.
Empathy map: Understanding the customer's perspective
In order to understand the user better I created an empathy map detailing the user's needs, feelings, and behaviors, ultimately leading to a more user-centered and effective product.
Streamlining the Flight Booking Process: Creating a User Flow that Simplifies the Journey
I created a user flow that is designed to minimize the number of steps required to complete the booking process and to make it easy for users to find the information they need at each stage. I wanted to highlight the key design decisions that were made to support the user flow, such as using clear and simple language, providing helpful feedback, and reducing visual clutter.
Bringing the Design to Life: Mid-Fidelity Wireframes
Using insights from my interviews and research, I created wireframes and visual designs for a responsive travel website. I chose a monochromatic blue theme and kept the font simple to keep the focus on the content.
Refining the Design: User Testing and Iteration
The prototype was tested by 4 participants who all agreed that the design was simple and appropriate. They were able to navigate the site with ease and had little difficulty understanding the task before them.
With their insight I made the following iterations:
Enlarged some text to emphasize which part of the booking stage users were in
Created more options for users to go back to the previous step in case they changed their mind
Enlarged the airplane graphic to make choosing seats easier
Why these iterations?
Usability testing revealed that participants encountered confusion and spent significant time during the booking stage of the task flow. Enlarging key text elements can help users focus on important key factors required for their final decisions.
Usability testing also showed that many participants desired the ability to navigate back and forth between pages to confirm their details before finalizing the flight booking.
Prior to testing, the assumption was that users would prefer to view the entire airplane layout for seat selection. However, usability testing showed that the majority of users attempted to zoom into the graphic to choose their seats, indicating a need to revise the seat selection interaction.
What I learned:
Overall, I am satisfied with the website, and I believe its design is well-suited for its intended purpose. The design process went smoothly with minimal challenges, and while there will always be a need for iterations, a majority of my hypotheses prior to testing proved to be accurate.
During usability testing, I encountered difficulty in preparing users for testing without explicitly stating the tasks. After speaking with my peers, I decided to create a scenario where users could imagine booking a round trip flight to visit their family in California right after work. This approach allowed me to guide participants towards my desired user flow without explicitly revealing the exact focus of the test. By providing this scenario, participants were able to explore more freely, without feeling pressured to solely complete tasks for my usability test.
While this project was a great learning experience, I recognize that there is still more to be done. In the future, I plan to do additional testing for more feedback, continue iterating based on the feedback received, and add more pages and features to the website. Additionally, I would budget more time for wireframing so I can include more information for the user like the climate of their destination and travel tips for first-time visitors.
Next steps:
Doing additional testing for feedback
Continuing to iterate based on the feedback received
Adding more pages and features to the website
