FLY UX.

The Client.
  • Fly UX / UX Design Institute.
  • My Role.
  • Lead UX and UI designer
  • The Device.
  • iOS Native Application
  • The Tools.
  • Adobe Illustrator
  • Quicktime
  • Survey Monkey
  • Sketch
  • Axure
  • The Project.

    The goal of this project is to design a native app for a new start up airline, FLY UX.

    The Challenge.

    Like many start ups, the objective is to use great design and an User Experience focus, as a competitive edge over bigger and more bureaucratic airlines.

    The Outcome.

    I will conduct research to see how users currently search, find and book flights online. The focus will be to identify any user friction and pain points in the booking process and rectify this in the new native booking platform for Fly UX - giving the company a competitive edge!

    Research.

    Goals.
  • Why is the user booking a flight?
  • What problems do they encounter when booking online?
  • What is the users priorities when selecting a flight?
  • Are there any factors that would stop the user from completing the booking process?
  • What is the competition doing well and what is worth emulating.
  • Techniques.

    COMPETTIVE BENCHMARKING | ONLINE SURVEY | INDEPTH INTERVIEWS | USABILITY TESTS

    Competitive Benchmarking.

    Compared budget and premium airlines to see how the apps were set out, what conventions they followed and if there were any features worth emulating.


    QANTAS | VIRGIN AUSTRALIA | TIGER AIRWAYS | JETSTAR

    CONVENTIONS.
    • Linear flow.
    • Similar screen layouts.
    • Baggage, passenger Details and Seat Selection separated.
    • Progress Indicators.
    GOOD UX.
    • Smart defaults.
    • In search results, easy to see prices for days either side of original search date.
    • Clear flight summary, with only required price details ( tax breakdowns hidden) Clear visual hierarchy.
    Hinders UX.
    • Continually asked to sign in, which got repetitive and interrupted the user flow.
    • Large sections of text about payment and fares, difficult to take in on a smaller device.
    • Compare fare screens not formatted for mobile device.
    • Unclear CTA buttons.
    • Cluttered imagery.
    • Unclear feedback, trial and error required.
    Online Survey.

    Conducted online surveys to get an understanding of the users priorities when booking a flight and what, if any, pain points they encountered through the process..

    10 QUESTIONS | 25 PEOPLE SURVEYED | AGE 25 - 65 | TRAVELLING FOR WORK AND LIESURE

    This gave detailed insight into who uses the app and why. It also clearly showed the main pain points they encounted during the process, the same problems and frustrations were repeated multiple times.

    "I hate hidden Extra costs eg. baggage or seat selection, price never matches what was advertised.”

    "I trust booking directly with the airlinerather than a 3rd party.... I want to be able to save passenger information."

    78% of Users spend under a week researching a flight before booking.To monitor prices, research destination but don’t want to risk price going up.

    78% of Users prefer to complete booking on a desktop. Perception that information is easier to understand and easier to input data.

    86% of Users will use an Content Aggregator website such as Skyccanner to compare fares before booking.

    Users order of Priority

    1. Destination | 2. Price | 3. Arrival/Departure Times | 4. Stops / Layovers | 5. Airline

    Users screenshot results to share with other passengers.

    Usability Tests and Indepth interviews.

    Conducted 2 Usability Tests and Indepth Interviews.

    The user was asked to book a flight for 2 people within set travel period.

    They had to complete this task for 2 different airlines.


    | QANTAS | TIGER AIRWAYS |

    They were also asked questions about their travel behaviour, why they travel, how often they travel and any problems they encounter.

    PARTICIPANT 1 - M 32 | PARTICIPANT 2 - F 63 |

    "Is the fare price shown for 1 or both passengers?"

    "What does 'Apply to all Passengers' mean?"

    "Why does it need so much personal information from me? Why does it need my address"

    "I hate spinners, just ends up taking longer."

    "airline fees?"

    "Progress indicator is misleading, takes way longer then it implies."

    "I don't know what that symbol means, so I will just ignore it."

    "I want to be kept logged in so that it is quicker and remembers my details."

    'Only 2 fares left at this price' - That would make me book more quickly."

    "I am use to booking flights on comp, I can have multi tabs open and its easier to input data."

    Define.

    Goals.
  • To identify the stages of the process that are hindering the flow and potentially preventing the user from completing the booking.
  • What needs to be done to get the user to complete the booking on the app rather than the website?
  • Techniques.

    AFFINITY DIAGRAM | CUSTOMER JOURNEY MAP | USER PERSONA | BUSINESS & USER GOALS

    Affinity Diagram.
    Key Insights.
  • Unclear buttons and elements were a big problem with using the app. Elements, such as spinners looked good but actually slowed down user flow because the user didn’t know how to use them. Some buttons required trial and error, or it wasn't clear what needed to be done next.
  • Users want arrival and departure times to be really clear. They need to take getting to and from the airport into consideration and making the most of their leave.
  • Users are interested in Carbon offset, but not enough information about how it works. - don't trust the airline.
  • Convenience comes from recognisable layouts, clear visual hierachies, clear use of colour and saving personal details.
  • Most users didn't have brand loyalty - just wanted cheapest flights. Users got frustrated when they were asked to sign up too often.
  • Customer Journey Map.

    Used the Customer Journey Map to identify that the user experienced the most friction during flight result and booking section of the process.

    Opportunities.
  • Smart Defaults and autofil.
  • Access locations, to prefill departure airports and show related sale.
  • Appropriate use of elements, buttons and visual hierachy.
  • Simplify flight results, clearly display price, departure/arrival time and duration.
  • Compare fare and fare summary needs to be accessible.
  • Opprtunity to select different seat and baggage options for each passenger.
  • Add-ons need to be concise, minimise scrolling.
  • Detailed information about Carbon Offset and Insurance needs to be available.
  • Save log-in details and prefill personal information.
  • Business and User Goals.

    By finding out where user and business goals overlap, can see what areas will be worth focusing on from a business perspective and in turn meet user needs.

    The user is currently skipping extras, carbon offset and loyalty programs, because they want to complete process quickly and cheaply - If we can improve the flow can we improve brand loyalty and increase the chances of the user signing up to these things?

    User Persona.

    When booking a flight, Jane is normally booking for herself and her partner Tom. They normally travel interstate to see family a couple of times a year. Jane will keep an eye for cheap flights, and check Skyscanner for deals. They will travel overseas once every 18 months, location depends on flight prices, the time of year they are travelling and any recommendations they have had from friends. Jane has an account with a couple of airlines she uses frequently so she can save contact and payment details. Jane doesn’t travel with work very often and if she does her work would organise.

    Collated the data into a user persona to help focus the design development.

    Ideate.

    Goals.
  • Make flow smooth and effecient.
  • Streamline extras and loyalty program information.
  • Clear display of search results, with focus on displaying arrival and departure times clearly and filtering by price.
  • Breakdown of price per passsenger.

  • USER FLOW | SKETCHING | NAVIGATION | INTERACTION DESIGN

    User Flow.
    Considerations.
  • If user allows locations ( smart defaults activated - could influence screens user interacts with).
  • Whether the user sign-ins or sign up to the membership.
  • Option to proceed without reviewing extras?.
  • If logged in, smart defaults on contact and payment information.
  • If user adds extras, such as hotels and car rentals.
  • Sketches and Navigation.

    When sketching ideas for the screens I broke it down into the booking stages and key navigation.

    Flight Results.

    How flight results are displayed, clarity of price per passenger, visibility of fares either side of search date and filter options.

    Compare Fares.

    Compare fare screen needs to be clear - loyalty/member deals need be visible (maybe option to sign up?)

    Baggage Selection.

    Option to have different bag selection for each passenger, departing flight and returning flight. Select for one passenger after the other.

    Seat Selection.

    Select for all passengers at once and be shown price total.

    Hub and Spoke.

    Could the booking stage be hub and spoke? How would this look and function? double as a progress indicator?

    Summary.

    Needs to be detailed, visual hierarchy and breakdown of extras selected per passenger.

    Interaction Design

    Went through each screen to make sure all inputs, elements and buttons provided instant feedback to the user inorder to ensure smooth flow.

    Search.
  • Follow conformed ideas, clean simple search layout that users will recognise.

  • Key Points:
  • Smart Defaults where possible.
  • Digital Affordances.
  • Take into consideration main use cases ( ex. adults traveling without children).
  • Hide detailed information ( group bookings, hidden off canvas)
  • Results.
  • Goal is to keep design simplistic and clear with clear visual hierarchy.
  • Key Points:
  • Clear fare prices (price per passenger).
  • Clear compare fare screen.
  • Easy to move between dates.
  • Simplified sort panel.
  • Opportunity to become a member and see member fares.
  • Clear Flight summary.
  • Book.
  • Clear progress indicators, easy to amend and minimal inputs.
  • Key Points:
  • Central Hub and Spoke Booking Screen.
  • Simple baggage screen, option to book different bags for each passenger.
  • Price for seat selection is clear.
  • Clear CTA buttons.
  • Prototype.

    Goals.
    • Refine the design through wireframing.
    • Create interactive prototypes and test again to ensure smooth flow.
    • Once prototype is working specify UI design.
    • Techniques.

      WIREFRAMES | HGH FIDELITY PROTOTYPES | UI GUIDE

    Wireframes.

    Once I had sketched and refined the layout of the app. I moved on to creating digital wireframes. This really helped to look at the layout more clearly and get a more accurate representation of what would fit on the screen and what users expect from each screen and state.

    Prototype

    Created a high fidelity protoype using Axure. I wanted to make sure the protoype was comprehensive to really test how the user could interact.

    Validate.

    Once the prototype was complete, I ran another usability test with 1 participant. I asked them to complete the same task from the original usability test.

    OUTCOMES.

  • User ignored the sales/promotions on the homescreen. User was actually a bit distracted by this.
  • Moved through search screens quickly, all buttons and elements were clear.
  • Understood the Booking Screen. (hub and Spoke). Need to refine design, so it is clear that you can click back into completed sections.
  • Would like an option to share fare before booking.
  • Add notifications about fare availability, ex “Only 2 left at this price”.
  • Prototype Design.

    Refined the design and layout from the initial prototypes, taking on board user feedback and observations. Added features that allowed the user to change selected photo mid way through editing or delete added text.

    UI Style Guide.

    Created a simple colour palette, so it would be easy for the user to identify CTA functions and move seamlessly through the interface.

    Learnings.

  • The process is complicated and there is lot of work that needs to be completed at the beginning to ensure smooth flow through the development stage. With time I would like to refine the prototype again, taking into consideration the final feedback.
  • The overall app is functioning well, but would like to streamline the design elements. I had teach myself Axure so there are some limitations to the prototype which I would like to update.
  • I would like to improve the UI and add initial sign in screens, and a home button so user can start search again at any point.
  • It would also be really good to work on a flow based on someone already being logged in - this take in to consideration that the user may have saved contact, passenger and payment details.