EZTRAVEL
EZTRAVEL
UI/UX Design
Web App
Background
Background
Through usability testing, user interviews and competitor analysis, I identified several recurring pain points with flight booking websites. Confusing UI elements made it hard to complete basic tasks, hidden fees created frustration and distrust and unclear next steps in the booking process increased drop-off rates.
The goal was to focus on qualitative research and combine the best practices from existing platforms with user-centred refinements. These included transparent information, simplified navigation and the use of smart defaults and contextual guidance.
Through usability testing, user interviews and competitor analysis, I identified several recurring pain points with flight booking websites. Confusing UI elements made it hard to complete basic tasks, hidden fees created frustration and distrust and unclear next steps in the booking process increased drop-off rates.
The goal was to focus on qualitative research and combine the best practices from existing platforms with user-centred refinements. These included transparent information, simplified navigation and the use of smart defaults and contextual guidance.
Through usability testing, user interviews and competitor analysis, I identified several recurring pain points with flight booking websites. Confusing UI elements made it hard to complete basic tasks, hidden fees created frustration and distrust and unclear next steps in the booking process increased drop-off rates.
The goal was to focus on qualitative research and combine the best practices from existing platforms with user-centred refinements. These included transparent information, simplified navigation and the use of smart defaults and contextual guidance.
My Role
UX/UI, Research, Brand design, interaction design
Software
Figma, Miro, Google Docs, Zoom
Methods
Usability Testing, Affinity Diagram, User Journey Map, Flow Diagram, Wireframe, Prototype
The Process
Research
Research
Define
Define
Ideate
Ideate
Design
Design
Research
User Interviews
User Interviews
Starting with interviews I put together a script, asked questions and gathered stories of frustrations with existing booking platforms like Ryan Air, Skyscanner and Aer Lingus. Doing so I was able to take away some key points and quotes. The main issues encountered involved navigation and clarity of information.
Three distinct users were interviewed. There background, frequency of travel and experience booking flights online varied. This gave a wide range of data which allowed me to pinpoint the most common barriers a user encounters when booking flights.
Starting with interviews I put together a script, asked questions and gathered stories of frustrations with existing booking platforms like Ryan Air, Skyscanner and Aer Lingus. Doing so I was able to take away some key points and quotes. The main issues encountered involved navigation and clarity of information.
Three distinct users were interviewed. There background, frequency of travel and experience booking flights online varied. This gave a wide range of data which allowed me to pinpoint the most common barriers a user encounters when booking flights.
“
“
“
The text can be very small and very hidden for like… key information”
I really dislike this, it's like a text wall”, “Now I’m like, what does any of this mean?”
It didn’t suggest that you put your date in there, I wasn't sure where to click”
Usability Testing
Usability Testing
I conducted usability tests with three distinct users on competitors sites; RyanAir, Aer Lingus, Eurowings and AirFrance. Each walked through two different scenarios on competitor’s websites.
Book a flight from Dublin to Paris using the Ryanair and Eurowings websites.
Book a flight from Paris to Dublin using the AirFrance and Aer Lingus website.
I conducted usability tests with three distinct users on competitors sites; RyanAir, Aer Lingus, Eurowings and AirFrance. Each walked through two different scenarios on competitor’s websites.
Book a flight from Dublin to Paris using the Ryanair and Eurowings websites.
Book a flight from Paris to Dublin using the AirFrance and Aer Lingus website.
Fig. 0 - Conducting a usability test
Through the tests some valuable insight was gained.
Users appreciated features such as the drop down calendar on all sites.
The use of colour was complemented on AirFrance and Eurowings, in comparison to RyanAir and Aer Lingus. The former duo’s use of colour was more intuitive; highlighting key elements and navigation.
On all websites, navigation was a pain point, leading to unclear next steps.
All users noted the lack of price transparency for Ryanair and Aer Lingus.
These insights directly informed design decisions, ensuring that the final solution adhered to the users' mental models and also addressed user pain points.
Through the tests some valuable insight was gained.
Users appreciated features such as the drop down calendar on all sites.
The use of colour was complemented on AirFrance and Eurowings, in comparison to RyanAir and Aer Lingus. The former duo’s use of colour was more intuitive; highlighting key elements and navigation.
On all websites, navigation was a pain point, leading to unclear next steps.
All users noted the lack of price transparency for Ryanair and Aer Lingus.
These insights directly informed design decisions, ensuring that the final solution adhered to the users' mental models and also addressed user pain points.
Affinity Diagram
Affinity Diagram
Next I mapped the data, using an affinity diagram. By grouping similar observations and pain points, clear themes began to emerge — such as hidden fees, unclear navigation, and inconsistent UI elements. This was key in informing my design decisions down the line.
Next I mapped the data, using an affinity diagram. By grouping similar observations and pain points, clear themes began to emerge — such as hidden fees, unclear navigation, and inconsistent UI elements. This was key in informing my design decisions down the line.
Fig. 1 - Mapping data to affinity diagram
Fig. 2 - Cluster Grouping
Fig. 3- Refined Grouping
Fig. 3- Refined Grouping
Key Research Insights
Keep Navigation Simple
Clear progression through each step
Highlight navigation CTAs
Follow typical user flows
Keep Navigation Simple
Clear progression through each step
Highlight navigation CTAs. Follow typical user flows
Contextual Guidance
Clear explanations for each element to reduce confusion.
Smart defaults to guide the user through inputs
Contextual Guidance
Clear explanations for each element to reduce confusion. Smart defaults to guide the user through inputs
Transparency is Key
Break down fees clearly at each stage, eliminating surprises.
Clearly show user progress through a progress bar.
Transparency is Key
Break down fees clearly at each stage, eliminating surprises.
Clearly show user progress through a progress bar.
Keep Navigation Simple
Clear progression through each step
Highlight navigation CTAs
Follow typical user flows
Contextual Guidance
Clear explanations for each element to reduce confusion.
Smart defaults to guide the user through inputs
Transparency is Key
Break down fees clearly at each stage, eliminating surprises.
Clearly show user progress through a progress bar.
Define
Problem Statement
Problem Statement
Problem Statement
Airline and flight booking websites are often overwhelming, cluttered, and confusing. With hidden fees, unclear navigation, and a lack of transparency, users frequently leave frustrated, or abandon their booking altogether.
Airline and flight booking websites are often overwhelming, cluttered, and confusing. With hidden fees, unclear navigation, and a lack of transparency, users frequently leave frustrated, or abandon their booking altogether.
Airline and flight booking websites are often overwhelming, cluttered, and confusing. With hidden fees, unclear navigation, and a lack of transparency, users frequently leave frustrated, or abandon their booking altogether.
Customer Journey Map
Customer Journey Map
I started sketching out the 8 main task flows for how a user would interact with when booking a flight. Most of the features would be done sequentially, starting from the search results and ending on the booking confirmation.
This main sequence was essential. Using the data from the research stages I was able reliably back this journey map up with real qualitative data and first-hand examples, thus providing an accurate customer journey map to help in the future UX design stages.
The journey map helped figure out:
How the user feels going through the site?
Are there any pain points as they progress through the flow?
What are users thinking at each step?
I started sketching out the 8 main task flows for how a user would interact with when booking a flight. Most of the features would be done sequentially, starting from the search results and ending on the booking confirmation.
This main sequence was essential. Using the data from the research stages I was able reliably back this journey map up with real qualitative data and first-hand examples, thus providing an accurate customer journey map to help in the future UX design stages.
The journey map helped figure out:
How the user feels going through the site?
Are there any pain points as they progress through the flow?
What are users thinking at each step?
Fig. 4 - Customer Journey Map
By mapping out the user flow, I was able to pin point which steps of the process are the most stressful or time consuming. Through this i was able to focus my efforts on designing these steps to be as pain-free as possible. Ultimately, it helped empathise with the user.
By mapping out the user flow, I was able to pin point which steps of the process are the most stressful or time consuming. Through this i was able to focus my efforts on designing these steps to be as pain-free as possible. Ultimately, it helped empathise with the user.
Ideate
Flow Diagram
Flow Diagram
The next step was to break down the booking process into clear, step-by-step interactions, simulating the user flow.
Fig. 5 - Flow Diagram, breaking down the main user flow
By visualising the user flow, I was able to identify the main path users would take while also identifying any edge cases that need to be covered in the design.
By visualising the user flow, I was able to identify the main path users would take while also identifying any edge cases that need to be covered in the design.
Wireframes
Wireframes
Next was sketching some low-fidelity wireframes, focusing on layout, navigation, and overall flow rather than visual details. This quick, iterative approach allowed me to explore multiple ideas, test different structures, and refine the booking process before moving into high-fidelity designs in Figma
Next was sketching some low-fidelity wireframes, focusing on layout, navigation, and overall flow rather than visual details. This quick, iterative approach allowed me to explore multiple ideas, test different structures, and refine the booking process before moving into high-fidelity designs in Figma
Fig. 5 - Home Page sketch
Fig. 6 - Home Page sketch with calendar pop-up
Fig. 7 - Search Results page
Fig. 8 - Search Results page with ticket pop-up
Fig. 8 - Search Results page with ticket pop-up
Fig. 9 - Summary and Payment pages
Upon iteration, i found the pop ups to be obtrusive. As a result I looked back on the key goals; transparency, clear navigation and user guidance. After reflecting I decided clear and simple pages for each step were more in line with the user’s mental models.
Upon iteration, i found the pop ups to be obtrusive. As a result I looked back on the key goals; transparency, clear navigation and user guidance. After reflecting I decided clear and simple pages for each step were more in line with the user’s mental models.
Design
Branding
Branding
The app’s branding was designed to be calm, easy on the eye and evocative of the sky and sea. The imagery and messaging focus on the excitement and escapism involved with booking your dream holiday.
The app’s branding was designed to be calm, easy on the eye and evocative of the sky and sea. The imagery and messaging focus on the excitement and escapism involved with booking your dream holiday.
Colour Palette: The calm blues and soft lighter tones create a serene and relaxing atmosphere to detract from any external stresses for the user
Colour Palette: The calm blues and soft lighter tones create a serene and relaxing atmosphere to detract from any external stresses for the user
Colour Palette: The calm blues and soft lighter tones create a serene and relaxing atmosphere to detract from any external stresses for the user
Typography: The font chosen; Inter, focuses on legibility and accessibility. Easy to read and translate to different device sizes.
Typography: The font chosen; Inter, focuses on legibility and accessibility. Easy to read and translate to different device sizes.
Typography: The font chosen; Inter, focuses on legibility and accessibility. Easy to read and translate to different device sizes.
Buttons: Buttons and links are distinct and provide guidance through bold colours and contrast.
Buttons: Buttons and links are distinct and provide guidance through bold colours and contrast.
Buttons: Buttons and links are distinct and provide guidance through bold colours and contrast.
Fig. 10 - Branding and UI components
By visualising the user flow, I was able to identify the main path users would take while also identifying any edge cases that would need to be covered.
Prototype
Prototype
After refining the wireframes and creating the branding, I developed an interactive prototype in Figma to bring the booking experience to life. This prototype allowed me to simulate real user interactions, validate design decisions, and gather feedback through usability testing.
After refining the wireframes and creating the branding, I developed an interactive prototype in Figma to bring the booking experience to life. This prototype allowed me to simulate real user interactions, validate design decisions, and gather feedback through usability testing.
Fig. 11 - Full interactive prototype, feel free to test it out!
Figma link for the interactive prototype
Reflection
Key Takeaways
Key Takeaways
This project presented numerous challenges. What elements will i have to trade-off for a user centric product? How can I create something fresh while adhering to the users’ mental models? How can I differentiate my flight booking website from others? Given the stress involved with planning flights, it was difficult to apply my research findings into the final product. I found myself truly enjoying the process of developing user flows, conducting usability testing and designing the app itself. This project truly highlighted the human element of UX and how important it is to research thoroughly and listen to potential users.
Some key takeaways are:
Break the process into distinct steps: With so many issues to consider, it was important to take each step in the UX process and take my time with it. From Research to design, each step build upon the previous to create a successful product.
Think like the user: When designing its easy to get lost in the details. Adopting the viewpoint of the user allowed me to pool my efforts into the most important main user flow.
Use existing patterns to decrease cognitive load: Spending time designing a unique interaction or design for a common function isn’t necessary if users already expect it to work a certain way.
This project presented numerous challenges. What elements will i have to trade-off for a user centric product? How can I create something fresh while adhering to the users’ mental models? How can I differentiate my flight booking website from others? Given the stress involved with planning flights, it was difficult to apply my research findings into the final product. I found myself truly enjoying the process of developing user flows, conducting usability testing and designing the app itself. This project truly highlighted the human element of UX and how important it is to research thoroughly and listen to potential users.
Some key takeaways are:
Break the process into distinct steps: With so many issues to consider, it was important to take each step in the UX process and take my time with it. From Research to design, each step build upon the previous to create a successful product.
Think like the user: When designing its easy to get lost in the details. Adopting the viewpoint of the user allowed me to pool my efforts into the most important main user flow.
Use existing patterns to decrease cognitive load: Spending time designing a unique interaction or design for a common function isn’t necessary if users already expect it to work a certain way.
What’s Next?
This is a project I plan to continue iteration on, to further develop the concept. The next steps for the project include;
Further usability testing: Continues testing will allow me to iterate and dive deeper into the user flow. As a result I can iron out any issues that arise for the user while using EZTravel.
Develop edge cases: One aspect I’d like to explore is edge cases when it comes to the app. What are the outliers when it comes to user’s desires and expectations? How could I further cover these cases?
This is a project I plan to continue iteration on, to further develop the concept. The next steps for the project include;
Further usability testing: Continues testing will allow me to iterate and dive deeper into the user flow. As a result I can iron out any issues that arise for the user while using EZTravel.
Develop edge cases: One aspect I’d like to explore is edge cases when it comes to the app. What are the outliers when it comes to user’s desires and expectations? How could I further cover these cases?
Back to top
Back to top