Project overview:
Improving the airline booking experience
This case study was commissioned by the UX Design Institute in collaboration with Glasgow Caledonian University.
đ Client profile: An emerging airline poised to establish a robust online presence prioritizing speed, simplicity, and user intuition. Our approach centered on cultivating a profound understanding of their target audience
đ Project scope: Our objective revolved around crafting a new desktop or mobile website for the airline, with a specific focus on enhancing the flight booking process. This entailed reimagining how users navigate, search, and select flights online.
đ Comprehensive UX process:
đ Project Objective: To deliver a medium-fidelity prototype ready for user testing, complemented by a comprehensive set of wireframes, all aimed at improving the airline's digital booking experience.
â Role
UX Designer
User Researcher
UI Designer
Writer
Interviewer
- Tools
Google Meet
Google Slides
Google Forms
Jamboard
Paper / Post-it
Cameras
Smaply
Figma
Proto.io
â Date
September 2021 to
January 2022
Desktop Selection:
Opting for the desktop path was a strategic decision driven by insights gleaned from extensive research into user preferences and behaviours.
User Preferences:
In exploring the landscape of flight booking habits, a Forbes article revealed a compelling statistic: an overwhelming 90% of flight reservations were made via desktop platforms, starkly contrasting with a mere 5% on mobile devices.
This data, sourced from a Worldpay survey spanning 16,000 travellers across ten global markets, illuminated the prevailing preference for desktop interfaces among users.
Research Validation:
While this evidence propelled my decision-making process, it merely scratched the surface of the investigative journey. Subsequent research and engagement with the target users further validated and enriched my understanding, empowering me to tailor the design choices to their specific needs and preferences.
Competitive benchmark
Checking out the competition:
To start off, I wanted to learn more about different airline websites and see how they compare in a few key areas:
- Homepage: Where you first land on the website
- Search and search results: Where you look for flights and see what's available
- Selecting flights: Choosing the flights you want
- Entering your details: Putting in your personal information
- Payment: Paying for your booking
What I found:
Looking into these websites was really helpful. I found some good things they do, but also some stuff that might make things harder for users. I checked out Air Canada, Aeromexico, Condor Airlines, and also Google Flights, which compares flights from different airlines. I picked them because they all do the same thing but in different ways. I wanted to see what's the same and what's different about them.
Noticing differences and similarities:
Even though these websites look different, they all want to help people book flights. By looking at them closely, I tried to figure out what makes them work well or not so well.
Keeping it simple:
One big thing I noticed was that when websites have lots of features, it can make things more complicated for users. Sometimes, too many options can make it harder for people to find what they need or finish booking their flights.
Competitive Benchmark: AirCanada, Aeromexico, Condor Airlines and Google Flights
Survey
Gaining insights from user feedback:
To gain a deeper understanding of our target users, I crafted a 10-question survey using Google Forms, which garnered 44 responses. All respondents confirmed having prior experience booking airline tickets.
Reaching out to participants:
The survey was distributed among friends, family, and colleagues via WhatsApp, Slack, and email channels. While this approach introduced some bias, in a real-world scenario, I would have utilized a professional user testing platform to mitigate potential biases.
Opting for desktop design:
With 77% of respondents expressing a preference for using a laptop or desktop computer to book flights, the decision to prioritize the desktop version was reinforced.
Key insights:
I aimed to keep the survey concise and focused, employing 8 closed-ended questions to gather quantifiable data. Additionally, I included an open-ended question to allow users to share their past flight booking experiences, which would inform the design process.
Lessons learned:
One crucial lesson emerged regarding the formulation of multiple-choice questions. For example, when asking users to select three important factors for flight booking, the responses were diverse, making it challenging to discern the primary reason. This underscored the importance of crafting questions thoughtfully to yield clear and actionable insights.
Example of data collected from Survey â Question Number 4.
Example of data collected from Survey â Question 10.
Affinity diagram
Collaborative data review:
After compiling all the research findings, it was time to let the data speak for itself. Reviewing the data with friends turned out to be a fun and collaborative experience. Fortunately, we were able to do this in person, which allowed for lively discussions and the pooling of diverse perspectives. As they say, five minds are better than one! đ§
Unlocking insights together:
This approach not only enabled us to analyze the data collectively but also provided an opportunity to hone leadership skills and guide the team through the process. Using Post-it notes for brainstorming proved invaluable, with the board serving as our canvas to organize ideas into natural groupings.
Challenges and learnings:
One challenge we encountered was the sheer volume of data to absorb in a single session. Reflecting on this, I realized that in future group settings, it might be beneficial to have everyone review the data independently beforehand. This way, we could come to the brainstorming session prepared, resulting in a more efficient process and fresher perspectives.
Embracing the journey:
Despite the challenges, the experience was immensely enjoyable. The colorful array of Post-it notes gradually revealed the bigger picture, underscoring the power of collaborative efforts in uncovering insights and driving the design process forward.
Customer journey
map
Bringing the project to life:
This technique breathed life into the project. Using my own judgment, I further structured the research data collected earlier.
Simplifying the translation:
To distill all this information, I found it easier to go old school â using paper and colour-coding. This hands-on approach made it simpler for me to interpret the data. It also led to a better understanding of my findings and the categories in the affinity diagram.
Identifying Pain Points:
Here are some of the pain points users faced when booking flights:
âšī¸ Homepage overload with too many options and distractions
âšī¸ Difficulty selecting travel dates and making corrections
âšī¸ Lack of clarity on pricing, which keeps increasing with additional features like luggage, seat selection, and meals
âšī¸ Unclear duration of the buying process and too many pages to navigate or skip through
âšī¸ Excessive scrolling required, with all information ideally fitting on one page
âšī¸ Desire for the system to suggest the best flight options and explain why they're recommended
âšī¸ Need for easy error correction and search editing
Full customer journey map made with Smaply can be viewed here
Post it â 4 Pieces of Recycled Paper â Red and Black Pen â Beautiful Affinity Diagram by Pilar Solares
Flow diagram
Mapping out the maze:
It's time to make sense of the maze and create a clear map.
Learning from the exercise:
During this process, I discovered that the most natural way to read the diagram is from left to right. This simplifies interpretation and reduces the need to constantly decipher arrows.
Every interaction counts:
Understanding the significance of each interaction is crucial. This is especially important because stakeholders, like developers, will need to understand the steps and interactions involved from start to finish.
Full flow diagram created in Figma (request access) đđŧ here đđŧ
Preview of Flow Diagram â Flux Airlines â Case Study
Interaction design for desktop view
Sketching the screens:
Using the flow diagram as a guide, I began sketching screens and screen states for my desktop app. This allowed me to address all the issues and user goals identified during the research and analysis phases.
Facing challenges:
I'll admit, this step was tough for me. I'm not the best at drawing, and it felt like I was back in kindergarten, learning how to hold a crayon. But through this experience, I discovered the magic of translating my design vision onto paper. Without this step, I wouldn't have been able to fully utilize online prototype tools.
Seeing the magic:
Despite the challenges, this exercise showed me the power of bringing my aesthetic design ideas to life on paper. Below are some examples of my sketches.
Class Flight Selection on Flux Airlines â Case Study â Pilar Solares
Seat Selection â Sketch for Flux Airlines â Case Study â Pilar Solares
Passenger Information Form â Flux Airlines Case Study â Pilar Solares
Prototype
Building the Prototype:
I created a medium-fidelity prototype for this project.
Transitioning Online:
With the solution defined in the flow diagram and sketches, it was time to move it online and add more detail through interactivity.
Choosing the Tools:
I initially used Figma and Proto.io, but I found Proto.io more suitable due to its easy-to-learn and practical interactivity features.
Solutions in the Prototype:
* Clear homepage interface: Ensures a user-friendly and predictable experience.
* Luggage optional field: Allows users to request tickets with luggage included in the price, ensuring transparent pricing.
* Separate departure and return dates: Reduces confusion and simplifies date selection.
* Clear path to completion: Users know exactly how many steps are needed to complete their ticket purchase once search results appear.
* No excessive scrolling: All essential information fits on the user's screen.
* Easy modification of dates: Option to go back or edit dates is clearly displayed.
* Control over extra options: Additional options are presented before checkout, allowing users to skip if desired.
* Simplified billing process: Passenger information and payment details are displayed on a single page for ease of review and payment.
Video Recording of Flux Airlines Prototype by Pilar Solares â Created with Proto.io
First problem solved:
I successfully resolved my first UX design problem, navigating through different phases to find a solution.
Facing challenges:
Each phase presented its own set of challenges, but with each hurdle, I gained more confidence. Learning new design and prototyping technologies remains a challenge, but practice will help me master them.
Importance of user testing:
In a real-world scenario, I would have preferred using a professional company with unbiased user testers for testing, rather than relying on colleagues, family, and friends.
Satisfaction with prototype:
I'm pleased with the prototype desktop solution, but I recognize the need for more user testing to uncover further insights and iterations. Resolving my first UX design problem has been a rewarding journey, highlighting the importance of perseverance and continuous learning.
As I reflect on the challenges faced and the solutions implemented, I am reminded of the value of each phase in the design process. Moving forward, I am committed to further honing my skills, particularly in mastering new technologies and conducting comprehensive user testing.