What we did

UX research + design


UX Design Institute, Glasgow Caledonian University

Fly UX desktop booking website UX design

User experience design for flight booking process

Fly UX requested a design and prototype of their online flight booking experience rooted in a deep understanding of their target market users - an experience that must be quick, easy and intuitive for their users. Working through all the key steps and aspects of UX, we are developing a clickable desktop website prototype for a new airline.


Fly UX is a start-up airline created by the UX Design Institute, Glasgow Caledonian University as a case study for their UX program. Working as the sole UX researcher and designer, my objective was to improve the flight booking process (how users search, select and book flights) through research, prototyping and design to create a smooth and seamless experience. 

Multiple research techniques and analysis led to a deeper understanding of problems users encounter when booking a flight and helped identify key aspects that both encouraged and discouraged users at different points throughout the process. With these critical points now identified, I addressed these issues in my design by prototyping and validating my concepts - continuously iterating and refining my design to ensure an effortless and fluid experience for users. The final deliverable is a clickable, interactive desktop website prototype supported with detailed documentation for hand off to developers for product build.


Design a new website for Fly UX, a start up airline company.


Focus on the flight booking process: how users search for, find and select flights online.


Create an online experience that is fast, easy and intuitive. Design and build a clickable prototype that can be tested with users, in addition to delivering a detailed set of wireframes for handoff to developers for the final build.


American adults who book their flights online who have also traveled via air within the last 2-years.


Design is not always a linear process - certain projects may call for a slightly different flow, and often times certain situations or insights may require a jump forwards or backwards within the design process. For this particular project I followed this high level UX design process:

RESEARCH TECHNIQUES⎜Competitive benchmarking, online surveys, interviews, usability testing/note taking

As a newly founded start up, Fly UX does not have an online presence or design direction to assess or inform any design aspect of this project so I began with competitive benchmarking to discover how companies in the same market space have solved problems similar to the one I am working towards solving. Through this process I was also able to determine best and worst practices, as well as identify established mental models.

Competitive benchmarking the home pages of Qatar Airways, Southwest Airlines and American Airlines

In order to gather both quantitative and qualitative data directly from users, I created an online survey, designed usability scripts and conducted usability tests virtually through Zoom, as well as audit several colleagues usability tests - taking detailed notes for analysis. Through these research techniques, I uncovered key pain points users encounter and/or are weary of when searching for flights. Top key discoveries include the desire and expectation for a quick and easy search and booking process, transparent pricing is a top deciding factor, and fluctuating pricing and multiple add-on charges lead to user distrust and can lead the user to drop out of the booking process altogether.

Usability test of Delta Airlines conducted virtually with signed consent form

RESEARCH OUTCOME SUMMARY⎜Notable take-aways from research phase

Competitive benchmarking

  • Booking section should be immediately available upon landing on the site
  • Booking inputs are organized in a manner that leads the user through each input, preventing a missed input
  • Primary inputs to start search are kept at a minimum, reduces task overload on user
  • Clear CTA buttons, easily distinguishable from other page elements
  • Date selection inputs include a calendar view to select option
  • Flight options should be organized and designed to reduce clutter on page, making it easier to compare between flight options
  • Upgrades and add-ons are offered after flight options results
  • Summary details of chosen flight is presented before payment, sometimes more than once
  • User should be informed as to how many steps to complete the transaction, with current step user is on highlighted

Online surveys

  • Users do not want to be shown advertisements unless it relates specifically to their desired booking
  • Users distrust the price, expects there to be hidden fees and upgrades
  • Too many popups, fees and mandatory upgrades (i.e. baggage) lead users to drop out of process and try a different airline
  • The more a user books with an individual airline, the more confidence they build in the airline and booking process
  • Users prefer to use a desktop to search and book flights, feel like they get more information presented (larger screen, more content)
  • Users typically search and compare prices multiple times before actual purchase, repeatedly within and between airlines
  • Price is the top concern with booking flights


  • Price is the most important factor when travelling for pleasure
  • Dates are top factor for business trips
  • When travelling as a group, willing to pay more for seats together
  • Prefer to shop around several weeks to months before a long trip (4+ days)
  • Distrust higher in aggregate sites
  • Popups are annoying unless to show a user error
  • Do not like when a link to details is clicked and user is directed away from booking screen, preference to opening in new tab or as pop out bubble
  • Most users fly at least once a year for pleasure
  • When in a group trip, text messaging and email are the top forms of communication
  • Expectation that internet is available on flight (free or paid)
  • Users search and book flights on desktop, use phone app for peripheral services (check-in, boarding pass)

Usability testing

  • When navigating to a site, confusion as to where the booking section is if not on landing page
  • Some struggle and frustration when looking for buttons through each step
  • Flight and price summary reduce anxiety and lends confidence in user to purchase
  • The clearer and more transparent options are, the user is able to make a choice more quickly
  • Details and information laid out in left-right or top-down manner is easiest for user to understand
  • CTA buttons located on the right side or bottom of screen/sections are easy to find
  • Users don’t like to be shown ads or non-flight services during the booking process
  • Users like to see a summary throughout the process, especially on the purchase screen
  • Most users do not sign in or sign up for airline membership
  • Confusion around baggage terms and what is included vs an upgrade

ANALYSIS TECHNIQUES⎜Affinity diagram, customer journey map

With the raw data gathered from my research phase, I moved into analyzing the data in order to clearly define the problem or set of problems affecting users. With such a large volume of disorganized data, I began with building an affinity diagram which led to a more organized categorization of information. Reviewing my research, I took notes and wrote each observation on a post-it note then began to group the notes into high level categories based on screen states and stages - further refining those groups to include context, user emotions, behaviors and more. I also moved my notes into Miro which allowed me to keep refining the diagram and save my progress online. With my affinity diagram finalized into groupings and subgroupings, the massive amount of raw data was distilled into clear, understandable data points.

Affinity diagram brainstorming session, first phase

Once the affinity diagram complete, a more structured view could be developed from my data and analysis. In order to conceptualize how a user interacts with an airline to achieve the goal of booking a flight online, I built a customer journey map in Illustrator - laying out the different stages along with user goals to provide clarity and definition in the booking process while visualizing the true state of the current experience to include the users emotions, actions and behaviors.

Customer journey map for Fly UX, lay out of different stages in process with user goals, behaviors and experience within each stage.

ANALYSIS SUMMARY⎜Notable take-aways from analysis phase

Affinity diagram

  • Top goals/expectations: Primary goal when visiting an airline site is to book flight, users expect to see/find ‘book flight’ section immediately, do not want any peripheral information (e.g. sales, news, other services)
  • Top pain points: Difficult to find booking section, hard to find CTA buttons, pricing unclear if multiple passengers are booked, drop down menus on hover confuse and disorient user from task
  • Top areas unnoticed or disinterested in: Loyalty program, voucher/promo code, price lock, airline credit card, researching class/seat tier levels details

Customer journey map

  • Areas of focus for user experience improvement are navigating to and finding the book flight section, seat class/tier options present price as part of the primary info presented when choosing and ability to move back between steps without losing information or starting over
  • Identify exit points with context, strategize preventative design solutions

CONCEPT EXPLORATION AND DESIGN TECHNIQUES⎜User flow diagrams, concept sketching, low-fidelity prototyping, interaction design

When my customer journey map was complete, I began work on solving issues and pain points identified within the journey. Working in Figma, I created a user flow which defined a single use case high-level flow, with a few secondary use cases at certain points in the process that I felt were crucial to address early in order to ensure some specific problems were tackled. This user flow not only generated a smoother path through the booking process by solving for previously identified pain points, but also provided the groundwork necessary for concept refinement and the design phase.

Enlarged wall map for user flow

With a finalized user flow, I hand sketched my ideas on paper to start visualizing low-fidelity screen states and designs. Continuously roughing out and refining my sketches, I moved into making low fidelity paper prototypes with a focus on interactive design and the overarching experience. Identifying potential areas of friction, possible pitfalls and complicated or confusing points, I cycled between paper prototypes to rough sketches and back to paper prototypes repeatedly to improve the design with each iteration. These fast and inexpensive prototypes allowed me to quickly test my user flow, design concept and mental models while establishing my screens, screen states, and page elements. 

DESIGN AND PROTOTYPING TECHNIQUES⎜Medium-fidelity prototyping, usability testing, design iteration cycling

Referencing my low-fidelity interaction design prototype, I jumped into Sketch to build my medium-fidelity prototype screens. At this stage, I continued to focus on the flow and concepts but pushed further into screen layouts and hierarchy, the basic interactions, navigation and copy. This prototype process allowed for deeper insights and exposed clunky points in the design that needed further work, one of which was adding baggage.

Building out screens and screen states in Sketch

Originally designed for the user to add bags during the departure flight and return flight selections, once I built those medium-fidelity screens I realized several things that created friction with this flow. There were too many micro-tasks on this screen, it was possible to not notice or skip the baggage task and the pricing was not transparent until the Trip Summary step. I went back to rough sketches and paper prototypes focusing on this specific area, experimenting with multiple solutions and walking through these new scenarios to find the best designs to bring back into the medium-fidelity prototype. I built out these new baggage flow designs in Sketch and tested then eliminated the weakest designs - one with baggage as its own individual step (increased steps, added complexity), and another with baggage in the Trip Summary page within Depart and Return sections (could still be overlooked). What flowed best while keeping the pricing clear (a top user concern) was to move baggage to the Trip Summary page in its own highlighted section. This design created an explicit task that was structured in a sequence, making it difficult to skip. The designated section also clearly presented the cost of adding baggage, with both total price and a detailed price breakdown displayed in the same area and pattern as the flights and trip grand total.

Working through this same process with the other newly identified awkward points, I finalized the screens and moved into InVision to build a clickable prototype with trigger elements and interactions to allow for usability testing. A few iterations and tests later, I analyzed my solution against user goals and feedback, refining my design until it was ready to be prepped for build handoff to developers.

BUILD HANDOFF TECHNIQUES⎜Wireframes, functional specifications, developer handoff and communication

This UXDI project required wireframes after the medium-fidelity prototype, which I returned back to pen and paper in order to start building out the functional specifications with my screens printed out for reference. I then moved back into Sketch and built my wireframes screen by screen, annotating the specs for controls, rules and feedback to include everything in my design plus for any possible errors in different scenarios or flows.

Handoff documentation not only involves these wireframes, but also the user flows, information architecture and content. All of these documents provide the information on the designs hierarchy, structure, content and rules for developers to effectively build from, delivered in hard and digital files.

Wireframes (hard copy) for handoff

No items found.
UX Design Institute, Glasgow Caledonian University
UX research + design
Position: Program student

The approach

Following the UX design process, I worked thoughtfully through each phase: research, analysis, design, prototyping and wireframing - working towards developing a desktop website experience which reduces user friction and increases bookings.


Competitive benchmarking, online surveys, note taking, interviews, usability testing


Market and user research analysis, affinity diagrams, customer journey and flow

Concept Design Exploration

User flow diagrams, low-fidelity concept sketching, paper prototyping, interaction design

Design Development + Build

Medium-fidelity prototyping, usability testing, design iteration cycling, wireframes
Start the conversation

Let's get to work

Schedule a MEETING