A modernized way to book flights
AIRLINES
AIRLINES
AIRLINES
FLIGHTS
FLIGHTS
FLIGHTS
MODERN
MODERN
MODERN
SIMPLFIED
SIMPLFIED
SIMPLFIED
SEAMLESS
SEAMLESS
SEAMLESS
BOOKINGS
BOOKINGS
BOOKINGS
ROLE
ROLE
UX/UI Designer
UX/UI Designer
Lead researcher and UI designer overseeing project from start to end
Lead researcher and UI designer overseeing project from start to end
TOOLS
TOOLS
Figma, Figjam, Discord, OBS Studio, Procreate
Figma, Figjam, Discord, OBS Studio, Procreate
Utilized various tools for research, design, user flows, brand design, and interviews
Utilized various tools for research, design, user flows, brand design, and interviews
DURATION
DURATION
90+ hours
90+ hours
Desktop/mobile viewports and branding were successfully created
Desktop/mobile viewports and branding were successfully created
Here's the stitch
Here's the stitch
Here's the stitch
With travel becoming a growing trend among young adults, I chose it as the focus of this project. Through initial research, I discovered that many airline websites had outdated UI designs, which made me question why they looked that way and how they could be improved. This insight led me to explore ways on how an airline website could be reimagined with a modern look and experience. To achieve this, I aimed to understand the needs of both travelers and airlines and design a website that effectively addressed them. The project encompassed defining company values and goals, crafting a cohesive brand identity, and executing a seamless booking flow. This project allowed me to develop my skills by building a product from start to finish while solving a real-world UX challenge.
With travel becoming a growing trend among young adults, I chose it as the focus of this project. Through initial research, I discovered that many airline websites had outdated UI designs, which made me question why they looked that way and how they could be improved. This insight led me to explore ways on how an airline website could be reimagined with a modern look and experience. To achieve this, I aimed to understand the needs of both travelers and airlines and design a website that effectively addressed them. The project encompassed defining company values and goals, crafting a cohesive brand identity, and executing a seamless booking flow. This project allowed me to develop my skills by building a product from start to finish while solving a real-world UX challenge.
With travel becoming a growing trend among young adults, I chose it as the focus of this project. Through initial research, I discovered that many airline websites had outdated UI designs, which made me question why they looked that way and how they could be improved. This insight led me to explore ways on how an airline website could be reimagined with a modern look and experience. To achieve this, I aimed to understand the needs of both travelers and airlines and design a website that effectively addressed them. The project encompassed defining company values and goals, crafting a cohesive brand identity, and executing a seamless booking flow. This project allowed me to develop my skills by building a product from start to finish while solving a real-world UX challenge.
Let's begin our research
Let's begin our research
Let's begin our research
Understanding Common Site Patterns
Understanding Common Site Patterns
Understanding Common Site Patterns
To begin this project, I conducted a brief competitive analysis of popular airline websites, including United Airlines, Delta Airlines, and Korean Air. My goal was to understand the typical user flow when navigating an airline website and booking a flight. I also noted common features and stylistic choices across these platforms.
To begin this project, I conducted a brief competitive analysis of popular airline websites, including United Airlines, Delta Airlines, and Korean Air. My goal was to understand the typical user flow when navigating an airline website and booking a flight. I also noted common features and stylistic choices across these platforms.
To begin this project, I conducted a brief competitive analysis of popular airline websites, including United Airlines, Delta Airlines, and Korean Air. My goal was to understand the typical user flow when navigating an airline website and booking a flight. I also noted common features and stylistic choices across these platforms.
Important Findings for Consideration
Important Findings for Consideration
Important Findings for Consideration
All sites have the same flow: Fill out booking menu--> viewing flight options --> review/checkout.
All sites have the same flow: Fill out booking menu--> viewing flight options --> review/checkout.
All sites have the same flow: Fill out booking menu--> viewing flight options --> review/checkout.
Impact to design process: I will follow the same pattern for consistency and familiarlity
Impact to design process: I will follow the same pattern for consistency and familiarlity
Impact to design process: I will follow the same pattern for consistency and familiarlity
Inconsistent design patterns and a lack of visual hierarchy: some pages were packed with information that made it difficicult to read and intake information
Inconsistent design patterns and a lack of visual hierarchy: some pages were packed with information that made it difficicult to read and intake information
Inconsistent design patterns and a lack of visual hierarchy: some pages were packed with information that made it difficicult to read and intake information
Impact to design process: I am going to prioritize simplicity and proper informational heirarchy
Impact to design process: I am going to prioritize simplicity and proper informational heirarchy
Impact to design process: I am going to prioritize simplicity and proper informational heirarchy
Booking menu comes first: on every website, the booking menu was the first item that appeared
Booking menu comes first: on every website, the booking menu was the first item that appeared
Booking menu comes first: on every website, the booking menu was the first item that appeared
Impact to design process: I am going to create a booking modal on the home page
Impact to design process: I am going to create a booking modal on the home page
Impact to design process: I am going to create a booking modal on the home page
More information is needed in order to prioritize the top features and services users typically expect
We need to investigate the reasons behind this
More information is needed in order to prioritize the top features and services users typically expect
Let's interview some experienced flyers
Let's interview some experienced flyers
Let's interview some experienced flyers
Understanding the Expectations
Understanding the Expectations
Understanding the Expectations
Our Participants
Our Participants
Our Participants
I wanted a good mix of inexerienced and experienced flyers to identify gaps. Luckily, I managed to recruit those ages 23-30 who all had some to extensive experience booking flights online.
When interviewees were asked on their general thoughts on booking flights as a whole, some described the process of booking flights as "confusing" or "intimidating", while others described it as "very easy".
I wanted a good mix of inexerienced and experienced flyers to identify gaps. Luckily, I managed to recruit those ages 23-30 who all had some to extensive experience booking flights online.
When interviewees were asked on their general thoughts on booking flights as a whole, some described the process of booking flights as "confusing" or "intimidating", while others described it as "very easy".
I wanted a good mix of inexerienced and experienced flyers to identify gaps. Luckily, I managed to recruit those ages 23-30 who all had some to extensive experience booking flights online.
When interviewees were asked on their general thoughts on booking flights as a whole, some described the process of booking flights as "confusing" or "intimidating", while others described it as "very easy".
We aimed to gain deeper insights into what makes booking an easy or difficult process, what users typically look for when booking flights, why they use their preferred booking website, frustrations or annoyances when booking, and the most commonly used features
We aimed to gain deeper insights into what makes booking an easy or difficult process, what users typically look for when booking flights, why they use their preferred booking website, frustrations or annoyances when booking, and the most commonly used features
We aimed to gain deeper insights into what makes booking an easy or difficult process, what users typically look for when booking flights, why they use their preferred booking website, frustrations or annoyances when booking, and the most commonly used features
Affinity Map
Affinity Map
Affinity Map
Price is the biggest factor that decides where a user will book: all users aim to find the cheapest flight or best deal
The more information, the better! Some mentioned feeling "scammed" or "deceived" by hidden fees; they want to know exactly how much they are being charged for and for what
Users stated they would only book with a new airline if it was credible, cheaply priced, or partnered with credit cards
All users compare flight prices before fully committing to a booking - this may be done on third-party websites such as Expedia or Google Flights, or directly on the airline website
4/5 users mainly use their preferred website due to travel points earned from credit card partnerships
Ranking Flight Criteria: price → departure/arrival time→ layovers VS nonstop → amenities/services
User frustrations mainly stem from some websites being “outdated” or “slow”: causing unwanted site auto timeouts and data loss
Users expressing deep frustrations with account creating: it is “more work” or a “hassle”
Users prefer to check-in online: it saves them time - They also prefer text flight updates
Price is the biggest factor that decides where a user will book: all users aim to find the cheapest flight or best deal
The more information, the better! Some mentioned feeling "scammed" or "deceived" by hidden fees; they want to know exactly how much they are being charged for and for what
Users stated they would only book with a new airline if it was credible, cheaply priced, or partnered with credit cards
All users compare flight prices before fully committing to a booking - this may be done on third-party websites such as Expedia or Google Flights, or directly on the airline website
4/5 users mainly use their preferred website due to travel points earned from credit card partnerships
Ranking Flight Criteria: price → departure/arrival time→ layovers VS nonstop → amenities/services
User frustrations mainly stem from some websites being “outdated” or “slow”: causing unwanted site auto timeouts and data loss
Users expressing deep frustrations with account creating: it is “more work” or a “hassle”
Users prefer to check-in online: it saves them time - They also prefer text flight updates
Price is the biggest factor that decides where a user will book: all users aim to find the cheapest flight or best deal
The more information, the better! Some mentioned feeling "scammed" or "deceived" by hidden fees; they want to know exactly how much they are being charged for and for what
Users stated they would only book with a new airline if it was credible, cheaply priced, or partnered with credit cards
All users compare flight prices before fully committing to a booking - this may be done on third-party websites such as Expedia or Google Flights, or directly on the airline website
4/5 users mainly use their preferred website due to travel points earned from credit card partnerships
Ranking Flight Criteria: price → departure/arrival time→ layovers VS nonstop → amenities/services
User frustrations mainly stem from some websites being “outdated” or “slow”: causing unwanted site auto timeouts and data loss
Users expressing deep frustrations with account creating: it is “more work” or a “hassle”
Users prefer to check-in online: it saves them time - They also prefer text flight updates
Most important takeaways
Most important takeaways
Most important takeaways
Price is the biggest factor when booking a flight
Price is the biggest factor when booking a flight
Price is the biggest factor when booking a flight
Users like to compare, compare, and compare! They do their research and comparisons to find the best flight options
Users like to compare, compare, and compare! They do their research and comparisons to find the best flight options
Users like to compare, compare, and compare! They do their research and comparisons to find the best flight options
The ability to pay with travel points is a key factor when choosing an airline
The ability to pay with travel points is a key factor when choosing an airline
The ability to pay with travel points is a key factor when choosing an airline
Now that the foundational research as been completed, let's meet our user
Now that the foundational research as been completed, let's meet our user
Now that the foundational research as been completed, let's meet our user
We've validated our research and have our target user in mind,
time to create the blueprints
Website Skeleton
A site map was created based on early research, following the common structure/flow of airline websites. To keep it simple, I minimized the number of pages, ensuring bookers can quickly access the necessary tools and information
Booking Modal
Menu available in the center of the hero section where users are able to immediately begin searching for flights or check-in online
Pages afterwards follow the same flow as other airline websites and will include features/clearly displayed information for a seamless user experience
SkyMiles
Where users can go to join Skylines' rewards program to accumulate travel points
Help
Interviewees expressed their frustrations when seeking specific flight information, such as luggage or flight regulations. Therefore, these pages will be direclty available under the help tab.
Welcome Lucas!
Welcome Lucas!
Welcome Lucas!
Lucas, a frequent flyer, values finding the best flight prices but often gets visually overstimulated and struggles with confusing checkout processes. He wants to be able to view all of the best flight options and needs a simple way to compare options and book effortlessly.
Lucas, a frequent flyer, values finding the best flight prices but often gets visually overstimulated and struggles with confusing checkout processes.
He wants to be able to view all of the best flight options and needs a simple way to compare options and book effortlessly.
Lucas, a frequent flyer, values finding the best flight prices but often gets visually overstimulated and struggles with confusing checkout processes. He needs a simple way to compare options
We've validated our research and have our target user in mind,
time to create the blueprints
Website Skeleton
A site map was created based on early research, following the common structure/flow of airline websites. To keep it simple, I minimized the number of pages, ensuring bookers can quickly access the necessary tools and information
We've validated our research and have our target user in mind,
time to create the blueprints
Defining the Task Flow
I wanted users to experience searching for and booking a flight, as well as using Skyline's online check-in. Each page includes a variety of actions and infromation including: filtering options, price comparisons, and a detailed fee breakdowns.
Task Flows Key
Searching for Flights and Booking
Press image to enlarge
Task flow was created to follow the same process as other airline websites.
Two routes are available depending on which type of booking method users click on e.g. MEMBER VS GUEST
Online Check-in
Check-in will be accessible via a tab on the Booking modal, allowing users to quickly enter their booking details and be redirected to their flight information page.
The process is designed to be fast and efficient, providing only the essential information needed for travel.
Set up is complete
Let's design
Let's see the final designs
Website Skeleton
A site map was created based on early research, following the common structure/flow of airline websites. To keep it simple, I minimized the number of pages, ensuring bookers can quickly access the necessary tools and information
Set up is complete
Let's design
Booking Modal
Booking Modal
Menu available in the center of the hero section where users are able to immediately begin searching for flights or check-in online
Pages afterwards follow the same flow as other airline websites and will include features/clearly displayed information for a seamless user experience
Menu available in the center of the hero section where users are able to immediately begin searching for flights or check-in online
Pages afterwards follow the same flow as other airline websites and will include features/clearly displayed information for a seamless user experience
SkyMiles
SkyMiles
Where users can go to join Skylines' rewards program to accumulate travel points
Where users can go to join Skylines' rewards program to accumulate travel points
Help
Help
Interviewees expressed their frustrations when seeking specific flight information, such as luggage or flight regulations. Therefore, these pages will be direclty available under the help tab.
Interviewees expressed their frustrations when seeking specific flight information, such as luggage or flight regulations. Therefore, these pages will be direclty available under the help tab.
Defining the Task Flow
I wanted users to experience searching for and booking a flight, as well as using Skyline's online check-in. Each page includes a variety of actions and infromation including: filtering options, price comparisons, and a detailed fee breakdowns.
Defining the Task Flows
I wanted users to experience searching for and booking a flight, as well as using Skyline's online check-in. Each page includes a variety of actions and infromation including: filtering options, price comparisons, and a detailed fee breakdowns.
Task Flows Key
Searching for Flights and Booking
Press image to enlarge
Task flow was created to follow the same process as other airline websites.
Two routes are available depending on which type of booking method users click on e.g. MEMBER VS GUEST
Online Check-in
Check-in will be accessible via a tab on the booking modal, allowing users to quickly enter their booking details and be redirected to their flight information page.
The process is designed to be fast and efficient, providing only the essential information needed for travel.
Early Designs
Low-fidelity wireframes were immediately created in Figma to set up user testing. My aim for Skylines was to have it visually stand out from other airline sites by using a minimalist design with more spacing to emphasize key areas.
Desktop & Mobile Home Page
Both viewport homepages feature a centrally placed modal, enabling users to begin searching for flights immediately. This modal includes all essential flight booking tools for easy access and minimal navigation.
Reviews
Since Skylines is a new airline company, I added a testimonials section to build trust and credibility
Desktop & Mobile Flight Options Page
A price comparison ticker was added for easy price comparison.
Flight options were designed to resemble tickets, neatly organizing essential information to minimize eye scrolling.
Progress tracker was added for easier navigation.
Selecting a Flight
I added clear selection indications with important flight information listed all on the card together
Desktop & Mobile Flight Options Page
To prevent errors, I designed this page to provide users with a clear overview of their choices, including a breakdown of travel fees and an edit button for easy modifications. Interviewees also voiced frustration with account and sign-in prompts appearing at inconvenient times. To address this, I added two CTAs on the summary page to prepare users for account creation or information input, an unavoidable step in air travel booking.
Desktop & Mobile Home Page
Both viewport homepages feature a centrally placed modal, enabling users to begin searching for flights immediately. This modal includes all essential flight booking tools for easy access and minimal navigation.
Reviews
Since Skylines is a new airline company, I added a testimonials section to build trust and credibility
Desktop & Mobile Flight Options Page
A price comparison ticker was added for easy price comparison.
Flight options were designed to resemble tickets, neatly organizing essential information to minimize eye scrolling.
Progress tracker was added for easier navigation.
Selecting a Flight
I added clear selection indications with important flight information listed all on the card together
Desktop & Mobile Flight Options Page
To prevent errors, I designed this page to provide users with a clear overview of their choices, including a breakdown of travel fees and an edit button for easy modifications. Interviewees also voiced frustration with account and sign-in prompts appearing at inconvenient times. To address this, I added two CTAs on the summary page to prepare users for account creation or information input, an unavoidable step in air travel booking.
Desktop & Mobile Home Page
Both viewport homepages feature a centrally placed modal, enabling users to begin searching for flights immediately. This modal includes all essential flight booking tools for easy access and minimal navigation.
Reviews
Since Skylines is a new airline company, I added a testimonials section to build trust and credibility
Desktop & Mobile Flight Options Page
A price comparison ticker was added for easy price comparison.
Flight options were designed to resemble tickets, neatly organizing essential information to minimize eye scrolling.
Progress tracker was added for easier navigation.
Selecting a Flight
I added clear selection indications with important flight information listed all on the card together
Desktop & Mobile Flight Options Page
To prevent errors, I designed this page to provide users with a clear overview of their choices, including a breakdown of travel fees and an edit button for easy modifications. Interviewees also voiced frustration with account and sign-in prompts appearing at inconvenient times. To address this, I added two CTAs on the summary page to prepare users for account creation or information input, an unavoidable step in air travel booking.
Desktop & Mobile Home Page
Both viewport homepages feature a centrally placed modal, enabling users to begin searching for flights immediately. This modal includes all essential flight booking tools for easy access and minimal navigation.
Reviews
Since Skylines is a new airline company, I added a testimonials section to build trust and credibility
Desktop & Mobile Flight Options Page
A price comparison ticker was added for easy price comparison.
Flight options were designed to resemble tickets, neatly organizing essential information to minimize eye scrolling.
Progress tracker was added for easier navigation.
Selecting a Flight
I added clear selection indications with important flight information listed all on the card together
Desktop & Mobile Flight Options Page
To prevent errors, I designed this page to provide users with a clear overview of their choices, including a breakdown of travel fees and an edit button for easy modifications. Interviewees also voiced frustration with account and sign-in prompts appearing at inconvenient times. To address this, I added two CTAs on the summary page to prepare users for account creation or information input, an unavoidable step in air travel booking.
Testing the Initial Designs
An important part of this designing phase was to ensure the website was beginner friendly. The website should be easily digestible and inuitive for all types of flyers (beginner—> expert). I recruited five more participants to test Skyline's early designs.
3/5 participants have booked less than five flights
2/5 participants were not entirely comfortable with booking flights and described the process as "intimidating"
Key Points from Testing
All participants said the site was easy to read and a smooth process - validates design choices
All users agreed that the mobile version was easy to use and consistent, however they did not like how the check out information was stacking - redesign needed
3/5 participants did not like how the total price was displayed: they said they would not want to scroll back to the top of the page to view the totals - resdesign needed
3/5 users wanted more price breakdowns: "I want to make sure there are no hidden fees" - additional component designs needed
Task Flows Key
Searching for Flights and Booking
Press image to enlarge
Task flow was created to follow the same process as other airline websites.
Two routes are available depending on which type of booking method users click on e.g. MEMBER VS GUEST
Now let's see what our final testers think
Let's see the final designs
Now let's see what our final testers think
Online Check-in
Check-in will be accessible via a tab on the Booking modal, allowing users to quickly enter their booking details and be redirected to their flight information page.
The process is designed to be fast and efficient, providing only the essential information needed for travel.
The Results
Set up is complete
Let's design
Early Designs
Early Designs
Low-fidelity wireframes were immediately created in Figma to set up user testing. My aim for Skylines was to have it visually stand out from other airline sites by using a minimalist design with more spacing to emphasize key areas.
Low-fidelity wireframes were immediately created in Figma to set up user testing. My aim for Skylines was to have it visually stand out from other airline sites by using a minimalist design with more spacing to emphasize key areas.
Desktop & Mobile Home Page
Both viewport homepages feature a centrally placed modal, enabling users to begin searching for flights immediately. This modal includes all essential flight booking tools for easy access and minimal navigation.
Reviews
Since Skylines is a new airline company, I added a testimonials section to build trust and credibility
Desktop & Mobile Flight Options Page
A price comparison ticker was added for easy price comparison.
Flight options were designed to resemble tickets, neatly organizing essential information to minimize eye scrolling.
Progress tracker was added for easier navigation.
Selecting a Flight
I added clear selection indications with important flight information listed all on the card together
Desktop & Mobile Flight Options Page
Page includes a clear overview of their choices, including a breakdown of travel fees and an edit button for easy modifications.
Interviewees also voiced frustrations with account and sign-in prompts appearing at inconvenient times. To address this, I added two CTAs on the summary page to better streamline users through the checkout process.
Desktop & Mobile Home Page
Both viewport homepages feature a centrally placed modal, enabling users to begin searching for flights immediately. This modal includes all essential flight booking tools for easy access and minimal navigation.
Reviews
Since Skylines is a new airline company, I added a testimonials section to build trust and credibility
Desktop & Mobile Flight Options Page
A price comparison ticker was added for easy price comparison.
Flight options were designed to resemble tickets, neatly organizing essential information to minimize eye scrolling.
Progress tracker was added for easier navigation.
Selecting a Flight
I added clear selection indications with important flight information listed all on the card together
Desktop & Mobile Flight Options Page
Page includes a clear overview of their choices, including a breakdown of travel fees and an edit button for easy modifications.
Interviewees also voiced frustrations with account and sign-in prompts appearing at inconvenient times. To address this, I added two CTAs on the summary page to better streamline users through the checkout process.
Desktop & Mobile Home Page
Both viewport homepages feature a centrally placed modal, enabling users to begin searching for flights immediately. This modal includes all essential flight booking tools for easy access and minimal navigation.
Reviews
Since Skylines is a new airline company, I added a testimonials section to build trust and credibility
Desktop & Mobile Flight Options Page
A price comparison ticker was added for easy price comparison.
Flight options were designed to resemble tickets, neatly organizing essential information to minimize eye scrolling.
Progress tracker was added for easier navigation.
Selecting a Flight
I added clear selection indications with important flight information listed all on the card together
Desktop & Mobile Flight Options Page
Page includes a clear overview of their choices, including a breakdown of travel fees and an edit button for easy modifications.
Interviewees also voiced frustrations with account and sign-in prompts appearing at inconvenient times. To address this, I added two CTAs on the summary page to better streamline users through the checkout process.
Desktop & Mobile Home Page
Both viewport homepages feature a centrally placed modal, enabling users to begin searching for flights immediately. This modal includes all essential flight booking tools for easy access and minimal navigation.
Reviews
Since Skylines is a new airline company, I added a testimonials section to build trust and credibility
Desktop & Mobile Flight Options Page
A price comparison ticker was added for easy price comparison.
Flight options were designed to resemble tickets, neatly organizing essential information to minimize eye scrolling.
Progress tracker was added for easier navigation.
Selecting a Flight
I added clear selection indications with important flight information listed all on the card together
Desktop & Mobile Flight Options Page
Page includes a clear overview of their choices, including a breakdown of travel fees and an edit button for easy modifications.
Interviewees also voiced frustrations with account and sign-in prompts appearing at inconvenient times. To address this, I added two CTAs on the summary page to better streamline users through the checkout process.
Desktop & Mobile Home Page
Both viewport homepages feature a centrally placed modal, enabling users to begin searching for flights immediately. This modal includes all essential flight booking tools for easy access and minimal navigation.
Reviews
Since Skylines is a new airline company, I added a testimonials section to build trust and credibility
Desktop & Mobile Flight Options Page
A price comparison ticker was added for easy price comparison.
Flight options were designed to resemble tickets, neatly organizing essential information to minimize eye scrolling.
Progress tracker was added for easier navigation.
Selecting a Flight
I added clear selection indications with important flight information listed all on the card together
Desktop & Mobile Flight Options Page
To prevent errors, I designed this page to provide users with a clear overview of their choices, including a breakdown of travel fees and an edit button for easy modifications. Interviewees also voiced frustration with account and sign-in prompts appearing at inconvenient times. To address this, I added two CTAs on the summary page to prepare users for account creation or information input, an unavoidable step in air travel booking.
Desktop & Mobile Home Page
Both viewport homepages feature a centrally placed modal, enabling users to begin searching for flights immediately. This modal includes all essential flight booking tools for easy access and minimal navigation.
Reviews
Since Skylines is a new airline company, I added a testimonials section to build trust and credibility
Desktop & Mobile Flight Options Page
A price comparison ticker was added for easy price comparison.
Flight options were designed to resemble tickets, neatly organizing essential information to minimize eye scrolling.
Progress tracker was added for easier navigation.
Selecting a Flight
I added clear selection indications with important flight information listed all on the card together
Desktop & Mobile Flight Options Page
To prevent errors, I designed this page to provide users with a clear overview of their choices, including a breakdown of travel fees and an edit button for easy modifications. Interviewees also voiced frustration with account and sign-in prompts appearing at inconvenient times. To address this, I added two CTAs on the summary page to prepare users for account creation or information input, an unavoidable step in air travel booking.
Desktop & Mobile Home Page
Both viewport homepages feature a centrally placed modal, enabling users to begin searching for flights immediately. This modal includes all essential flight booking tools for easy access and minimal navigation.
Reviews
Since Skylines is a new airline company, I added a testimonials section to build trust and credibility
Desktop & Mobile Flight Options Page
A price comparison ticker was added for easy price comparison.
Flight options were designed to resemble tickets, neatly organizing essential information to minimize eye scrolling.
Progress tracker was added for easier navigation.
Selecting a Flight
I added clear selection indications with important flight information listed all on the card together
Desktop & Mobile Flight Options Page
To prevent errors, I designed this page to provide users with a clear overview of their choices, including a breakdown of travel fees and an edit button for easy modifications. Interviewees also voiced frustration with account and sign-in prompts appearing at inconvenient times. To address this, I added two CTAs on the summary page to prepare users for account creation or information input, an unavoidable step in air travel booking.
Desktop & Mobile Home Page
Both viewport homepages feature a centrally placed modal, enabling users to begin searching for flights immediately. This modal includes all essential flight booking tools for easy access and minimal navigation.
Reviews
Since Skylines is a new airline company, I added a testimonials section to build trust and credibility
Desktop & Mobile Flight Options Page
A price comparison ticker was added for easy price comparison.
Flight options were designed to resemble tickets, neatly organizing essential information to minimize eye scrolling.
Progress tracker was added for easier navigation.
Selecting a Flight
I added clear selection indications with important flight information listed all on the card together
Desktop & Mobile Flight Options Page
To prevent errors, I designed this page to provide users with a clear overview of their choices, including a breakdown of travel fees and an edit button for easy modifications. Interviewees also voiced frustration with account and sign-in prompts appearing at inconvenient times. To address this, I added two CTAs on the summary page to prepare users for account creation or information input, an unavoidable step in air travel booking.
Testing the Initial Designs
Testing the Initial Designs
An important part of this designing phase was to ensure the website was beginner friendly. The website should be easily digestible and inuitive for all types of flyers (beginner—> expert). I recruited five more participants to test Skyline's early designs.
An important part of this designing phase was to ensure the website was beginner friendly. The website should be easily digestible and inuitive for all types of flyers (beginner—> expert). I recruited five more participants to test Skyline's early designs.
3/5 participants have booked less than five flights
2/5 participants were not entirely comfortable with booking flights and described the process as "intimidating"
3/5 participants have booked less than five flights
2/5 participants were not entirely comfortable with booking flights and described the process as "intimidating"
Key Points from Testing
Key Points from Testing
All participants said the site was easy to read and a smooth process - validates design choices
All users agreed that the mobile version was easy to use and consistent, however they did not like how the check out information was stacking - redesign needed
3/5 participants did not like how the total price was displayed: they said they would not want to scroll back to the top of the page to view the totals - resdesign needed
3/5 users wanted more price breakdowns: "I want to make sure there are no hidden fees" - additional component designs needed
All participants said the site was easy to read and a smooth process - validates design choices
All users agreed that the mobile version was easy to use and consistent, however they did not like how the check out information was stacking - redesign needed
3/5 participants did not like how the total price was displayed: they said they would not want to scroll back to the top of the page to view the totals - resdesign needed
3/5 users wanted more price breakdowns: "I want to make sure there are no hidden fees" - additional component designs needed
Let's see the final designs
Final Products
Final Products
Final Products
Key Designs
Key Designs
Key Designs
Below is a collection of key parts of Skylines' design
Below is a collection of key parts of Skylines' design
Below is a collection of key parts of Skylines' design
Company Values
Giving visitors an idea of what Skylines is about
Company Values
Giving visitors an idea of what Skylines is about
Company Values
Giving visitors an idea of what Skylines is about
Flight Cards
Showcases airport names, times, stops, amenities, and price points for each class
Flight Cards
Showcases airport names, times, stops, amenities, and price points for each class
Flight Cards
Showcases airport names, times, stops, amenities, and price points for each class
Price Comparison Chart Show the different price points between classes & its amentities, as well as flight fees
Price Comparison Chart
Show the different price points between classes & its amentities, as well as flight fees
Price Comparison Chart
Shows the different price points between classes & its amentities, as well as flight fees
Price Calendar
Shows average flight costs on different days
Price Calendar
Shows average flight costs on different days
Price Calendar
Shows average flight costs on different days
Check-in Info
Appears once a user searches for their ticket
Check-in Info
Appears once a user searches for their ticket
Check-in Info
Appears once a user searches for their ticket
Virtual Boarding Ticket available after online check-in for flyers to review in detail
Virtual Boarding Ticket
available after online check-in for flyers to review in detail
Virtual Boarding Ticket
Available after online check-in for flyers to review in detail
Now let's see what our final testers think
Implementing the Final Designs through User Tests
Implementing the Final Designs through User Tests
Implementing the Final Designs through User Tests
Skyline's website is designed to be beginner-friendly, offering a modern, improved alternative to existing airline sites. It simplifies flight booking by providing all necessary information upfront. Five testers, each with prior online booking experience, were recruited to navigate the prototype as if booking a trip. A live facilitator observed and recorded their actions and feedback
Skyline's website is designed to be beginner-friendly, offering a modern, improved alternative to existing airline sites. It simplifies flight booking by providing all necessary information upfront. Five testers, each with prior online booking experience, were recruited to navigate the prototype as if booking a trip. A live facilitator observed and recorded their actions and feedback
Skyline's website is designed to be beginner-friendly, offering a modern, improved alternative to existing airline sites. It simplifies flight booking by providing all necessary information upfront. Five testers, each with prior online booking experience, were recruited to navigate the prototype as if booking a trip. A live facilitator observed and recorded their actions and feedback
Test Goals
Test Goals
Test Goals
1. Necessary Features: ensure the site has all the tools bookers need when searching
2. Easy to Navigate: ensure designs are readable and clear
3. Streamlined: users should be able to get to the confirmation page with little issues
1. Necessary Features: ensure the site has all the tools bookers need when searching
2. Easy to Navigate: ensure designs are readable and clear
3. Streamlined: users should be able to get to the confirmation page with little issues
1. Necessary Features: ensure the site has all the tools bookers need when searching
2. Easy to Navigate: ensure designs are readable and clear
3. Streamlined: users should be able to get to the confirmation page with little issues
Tasks
Tasks
Tasks
1. Users started at the home page and had to search for and fully book a trip of their choice
2. Afterwards, users had to check into their flight
1. Users started at the home page and had to search for and fully book a trip of their choice
2. Afterwards, users had to check into their flight
1. Users started at the home page and had to search for and fully book a trip of their choice
2. Afterwards, users had to check into their flight
The Results
The Results
Final Takeaways
Final Takeaways
This project was such an insightful and fruitful experienece. Not only did I create an entire brand and company from scratch, but I also practiced how to create proper visual hierarchy to highlight key parts and features of a website. Current airline website are, without a doubt, very informationally packed and are often intimidating to use for newer users. Many interviewees described booking flights as "intimidating" or "confusing". I really enjoyed building off of these opinions and frustratiomns to produce a modern take on what airline websites could be.
This project was such an insightful and fruitful experienece. Not only did I create an entire brand and company from scratch, but I also practiced how to create proper visual hierarchy to highlight key parts and features of a website. Current airline website are, without a doubt, very informationally packed and are often intimidating to use for newer users. Many interviewees described booking flights as "intimidating" or "confusing". I really enjoyed building off of these opinions and frustratiomns to produce a modern take on what airline websites could be.
Final Takeaways