PROJECT BRIEF OVERVIEW

PRODUCT

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

PROBLEM

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

GOAL

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.

TARGET USER

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

‍

UX DESIGN PROCESS

HIGH LEVEL PROCESS

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

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.

‍

‍

‍

‍

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.

‍

‍

‍

‍

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

Interviews

• 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

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.

‍

‍

‍

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.

‍

‍

‍

‍

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

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.

‍

‍

‍

‍

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 PROTOTYPE

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.

‍

‍

‍

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.

‍

‍

HANDOFF FOR BUILD AND TEST

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.

‍

‍