A modernized way to book flights
UX/UI DESIGN
UX/UI DESIGN
UX/UI DESIGN
WEB & MOBILE
WEB & MOBILE
WEB & MOBILE
BRANDING
BRANDING
BRANDING
VISUALS
VISUALS
VISUALS
ROLE
ROLE
ROLE
UX/UI Designer, Graphic Designer
UX/UI Designer, Graphic Designer
Lead researcher, UI designer, and artist overseeing project from start to end
Lead researcher, UI designer, and artist overseeing project from start to end
TOOLS
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
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
Many airline websites suffer from outdated UI designs that are informationally dense and visually cluttered. Additionally, the typical flight booking flow contains disruptive patterns, making it easy for users to lose their place during checkout while comparing flight options. Preliminary research suggests that these issues often deter inexperienced bookers, ultimately impacting sales and brand perception.
For this concept project, I explored ways to create a more streamlined booking experience supported by a cleaner, more accessible user interface. The goal was to lead the end-to-end design for a responsive website for a new airline company that is intuitive and inclusive—making it easier for users of all experience levels to book a flight quickly with confidence.
Many airline websites suffer from outdated UI designs that are informationally dense and visually cluttered. Additionally, the typical flight booking flow contains disruptive patterns, making it easy for users to lose their place during checkout while comparing flight options. Preliminary research suggests that these issues often deter inexperienced bookers, ultimately impacting sales and brand perception.
For this concept project, I explored ways to create a more streamlined booking experience supported by a cleaner, more accessible user interface. The goal was to lead the end-to-end design for a responsive website for a new airline company that is intuitive and inclusive—making it easier for users of all experience levels to book a flight quickly with confidence.
Many airline websites suffer from outdated UI designs that are informationally dense and visually cluttered. Additionally, the typical flight booking flow contains disruptive patterns, making it easy for users to lose their place during checkout while comparing flight options. Preliminary research suggests that these issues often deter inexperienced bookers, ultimately impacting sales and brand perception.
For this concept project, I explored ways to create a more streamlined booking experience supported by a cleaner, more accessible user interface. The goal was to lead the end-to-end design for a responsive website for a new airline company that is intuitive and inclusive—making it easier for users of all experience levels to book a flight quickly with confidence.
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
I conducted a competitive analysis on three major airline websites: United Airlines, Delta Airlines, and Korean Air. I examined key user flows and features on each site—ranging from flight booking and comparisons to account creation. My goal was too identify the pages, features, or interactions that posed the most significant usability issues.
I conducted a competitive analysis on three major airline websites: United Airlines, Delta Airlines, and Korean Air. I examined key user flows and features on each site—ranging from flight booking and comparisons to account creation. My goal was too identify the pages, features, or interactions that posed the most significant usability issues.
I conducted a competitive analysis on three major airline websites: United Airlines, Delta Airlines, and Korean Air. I examined key user flows and features on each site—ranging from flight booking and comparisons to account creation. My goal was too identify the pages, features, or interactions that posed the most significant usability issues.
Findings and Design Impact
Findings and Design Impact
All sites have the same flow: Fill out booking menu--> viewing flight options --> review/checkout. It is a very linear path that takes the users through three main pages and includes various features to narrow flight searches
All sites have the same flow: Fill out booking menu--> viewing flight options --> review/checkout. It is a very linear path that takes the users through three main pages and includes various features to narrow flight searches
All sites have the same flow: Fill out booking menu--> viewing flight options --> review/checkout. It is a very linear path that takes the users through three main pages and includes various features to narrow flight searches
Impact: I will retain the overall page flow to maintain consistency and familiarity. However, I still need to identify the most commonly use features and information to help bookers make a more definitive decision.
Impact: I will retain the overall page flow to maintain consistency and familiarity. However, I still need to identify the most commonly use features and information to help bookers make a more definitive decision.
Impact: I will retain the overall page flow to maintain consistency and familiarity. However, I still need to identify the most commonly use features and information to help bookers make a more definitive decision.
Inconsistent design patterns and a lack of visual hierarchy: many pages—particularly the homepage—had minimal spacing and densely packed elements. This makes it difficult to scan and overwhelming
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: many pages—particularly the homepage—had minimal spacing and densely packed elements. This makes it difficult to scan and overwhelming
Impact: I will prioritize spacing and clearer typography—using larger font sizes and varied font weights— to improve overall readability.
Impact: I will prioritize spacing and clearer typography—using larger font sizes and varied font weights— to improve overall readability.
Impact: I will prioritize spacing and clearer typography—using larger font sizes and varied font weights— to improve overall readability.
Price Comparisons: on every website there was some form of a flight price comparison grid
Booking menu comes first: on every website, the booking menu was the first item that appeared
Price Comparisons: on every website there was some form of a flight price comparison grid
Impact: This may be a significant feature to include on the website that will need a good visual composition
Impact: This may be a significant feature to include on the website that will need a good visual composition
Impact: This may be a significant feature to include on the website that will need a good visual composition
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 flyers
Let's interview some flyers
Let's interview some flyers
Understanding the Expectations
Understanding the Expectations
Understanding the Expectations
Our Participants
Our Participants
Our Participants
Interviews were conducted on those who had little to extensive experience booking flights. Some described the process of booking flights as "confusing" or "intimidating", while others described it as "very easy".
Interviews were conducted on those who had little to extensive experience booking flights. Some described the process of booking flights as "confusing" or "intimidating", while others described it as "very easy".
Interviews were conducted on those who had little to extensive experience booking flights. Some described the process of booking flights as "confusing" or "intimidating", while others described it as "very easy".
I aimed to gain deeper insights into what makes booking easy or difficult and what users typically look for when searching for flights. I also explored why users choose their preferred booking websites, what frustrations they experience, and which features most impact their decision-making.
I aimed to gain deeper insights into what makes booking easy or difficult and what users typically look for when searching for flights. I also explored why users choose their preferred booking websites, what frustrations they experience, and which features most impact their decision-making.
I aimed to gain deeper insights into what makes booking easy or difficult and what users typically look for when searching for flights. I also explored why users choose their preferred booking websites, what frustrations they experience, and which features most impact their decision-making.
Most important takeaways
Most important takeaways
Most important takeaways
Price is the biggest factor when booking a flight. Having the right tools to display prices clearly is essential when making informed choices
Price is the biggest factor when booking a flight. Having the right tools to display prices clearly is essential when making informed choices
Price is the biggest factor when booking a flight. Having the right tools to display prices clearly is essential when making informed choices
Users like to compare, compare, and compare! They do their research and compare to find the best flight options. To support this, the design needs compaison tools and intuitive layouts to make it easy to scan and evaluate 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
Ability to pay with travel points is a key factor when choosing an airline. This was the most surprising insight from interviews. Most users said they would abandon a site completely if this option was missing.
Ability to pay with travel points is a key factor when choosing an airline. This was the most surprising insight from interviews. Most users said they would abandon a site completely if this option was missing.
Ability to pay with travel points is a key factor when choosing an airline. This was the most surprising insight from interviews. Most users said they would abandon a site completely if this option was missing.
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.
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
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
More Projects
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
More Projects
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
