Home

Fly UX booking system
Case Study

From brief, research and prototype iterations, through to final wireframes.

Fly UX flight booking system

The project brief was to create an online flight booking system for a start-up airline called Fly UX, the core case study in my university diploma. The component needed to work as far as booking the seats; payment and passenger details weren't a part of this project. The basic requirements were:

  • Create an online booking experience that is simple, fast and intuitive.
  • Develop a responsive website component, so a secondary codebase isn't needed.
  • Follow the whole UX cycle and document everything.
  • Create a working prototype and final wireframes.
Certificate for Professional Diploma in UX Design

Methodology

Because this was a start-up business, there was no existing website to conduct usability testing with. To get around this, I first conducted competitive benchmarking (combined with usability testing) on two competitor websites. Once I had done this, I ascertained the parts of the booking systems the subjects liked, and then built upon those in my prototype and wireframes. I also realised how to make my component a better experience, using something I created that I called 'stacks.' The order of the UX cycle was as follows:

  • STEP 01 - Competitive benchmarking and usability testing
  • STEP 02 - Affinity diagram from the results above
  • STEP 03 - Customer empathy map to measure the subjects goals, behaviours, contexts and pain points
  • STEP 04 - Low fidelity flow diagrams.
  • STEP 05 - Low fidelity interaction designs.
  • STEP 06 - Prototype iterations in Adobe Xd
  • STEP 07 - Detailed wireframes and developer handoff

Step 01 - Usability test
View the video

(For privacy purposes, this video is protected with login details. Please contact me if you wish to view it.)

For this usability test, the subject had to book a flight from Cork to Faro using the Aer Lingus website and then a flight from Dublin to Faro using the Ryan Air one. I used a test script whilst conducting this, as it gave context and allowed me to tell the subject the test conditions without getting distracted.

    Tools used:

  • Camtastia
  • Snowball USB mic
  • Macbook Pro

    Assumptions:

  • The Aer Lingus site would be easier to navigate than the Ryan Air one

    Actual outcomes:

  • The users were able to navigate the Ryan Air website with more ease.

    Takeaways:

  • The Aer Lingus site tripped the users up on more than one thing. Fly UX needs to avoid a locale choice, the flight search module need large CTA's to search, and the flight search buttons should be way above the fold.
Logos of Aer Lingus, Ryan Air and Fly UX.

Step 02 - Affinity diagram
View the full PDF (13.2mb)

From the usability test video I conducted in Step 01, I started writing onto 'Post It' notes, perceiving what the user liked, disliked, understood and was confused by. Once I had written all of my observations, I then stuck them onto a large sheet of white paper (to emulate a board) and started to loosely group them into sections. It took several attempts to organise these into cohesive groups, but once I had, they began to resemble vaguely structured data albeit still in qualitative form. When I was happy with the groupings, I then set about naming each of them and my affinity diagram was born!

Some of the images from my affinity diagram are below, but please click on 'view the full PDF' above to see them in their entirety.

    Tools used:

  • Post It notes
  • Marker pen

    Assumptions:

  • Patterns would become more apparent, structuring the data would become easier.

    Actual outcomes:

  • When writing my notes, I realised the users faced a lot more issues than I realised on the usability tests.Writing the notes became harder instead of easier.

    Takeaways:

  • The usability tests hid a wealth of information, some of which I hadn't realised at the time of conducting them.
Affinity diagram part 01
Affinity diagram part 02
Affinity diagram part 03
Affinity diagram part 04
Affinity diagram part 04




Step 03 - Empathy map
View the full PDF (994kb)

I then mapped out the user's journey from the affinity diagrams, highlighting their goals, behaviours, and context. This was coupled with their positive emotions and pain points whilst conducting the tests. Creating this empathy map had now produced quantitative data in a structured format.

    Tools used:

  • Adobe Illustrator

    Assumptions:

  • I still thought the Aer Lingus website would marginally be the better journey for the user.

    Actual outcomes:

  • The Ryan Air user journey was better than the Aer Lingus one.

    Takeaways:

  • Having the empathy map drawn, gave a detailed visual that the Aer Lingus user experience was actually quite a lot poorer than the Ryan Air one.
The customer jourmney map I created.

Step 04 - Flow diagrams
View the full PDF (10mb)

From all of the data collated so far, I was now able to start creating the user flow diagrams. Because of time constraints, I designed based on two people, two luggage choices, and three different types of flight. The full breakdown of each potential scenario is below, assuming it was two people travelling on the same dates in each instance.

  • One way flight - baggage type 01 | One way flight - baggage type 02
  • Return flight - baggage type 01 | Return flight - baggage type 02
  • Multi trip - baggage type 01 - baggage type 01 | Multi trip - baggage type 01 - baggage type 02
  • Multi trip - baggage type 02 - baggage type 01 | Multi trip - baggage type 02 - baggage type 02

Some of the images from my flow diagrams are below, but please click on 'view the full PDF' above to see them in their entirety.

Affinity diagram part 01
Affinity diagram part 02
Affinity diagram part 03
Affinity diagram part 04



Step 05 - Interaction designs
View the full PDF (8.9mb)

I now had enough data to start designing how users would interact with the component. For this, I referenced the flow diagrams in Step 04 for consistency and to make the interactions marry up with the flow.

Some of the images from my interaction designs are below, but please click on 'view the full PDF' above to see them in their entirety.

Interaction diagram part 01
Interaction diagram part 02



Step 06 - A medium fidelity prototype.

From my research data, flow diagrams and interaction designs, I was then able to start building an interactive medium-fidelity prototype of the module using Adobe Xd. This prototype went through three iterations, with usability testing conducted after each change. I had to adapt each prototype, as there were unexpected results in the usability tests that showed me my errors. This followed a define, design, prototype circle.

This is a functioning interactive prototype. Please click on a flight type in the left pane (ie return etc) to start the prototype, and click 'Enable all' on the Adobe cookie notice to display correctly.

The module has functionality, but the following conditions are required for it to work:

  • Find flight - Return flights
    Dep/arr airports auto populate (no text fields in Xd)
    Dep date: 15 Jan | Ret date: 22 Jan | Passengers: 2

    Select flights
    Dep: Choice 01 | Ret: Choice 01 | Baggage: Option 01 | Seats: 5A and 5B

  • Find flight - One way flights
    Departure airport auto populates (no text fields in Xd)
    Dep date: 15 Jan | Passengers: 2

    Select flights
    Dep: Choice 01 | Baggage: Option 01 | Seats: 5A and 5B

  • Find flight - Multi city
    Dep/arr airports auto populate (no text fields in Xd)
    Dep date 01: 15 Jan | Dep date 02: 22 Jan | Passengers: 2

    Select flights
    Dep 01: Choice 01 | Dep 02: Choice 02 | Baggage: Option 01 | Dep 01 and 02: Seats: 5A and 5B

Step 07 - Final wireframes
View the full PDF (17.1mb)

I now had enough data and a working prototype to create final wireframes to hand over to the developer. These wireframes were based on user research and not assumption. Going through the iterations with the prototype, gave me a product that I knew would work and the wireframes were a by-product of all of the above steps. These wireframes were the final part of this case study, as entering passenger details and taking payment wasn't in the brief.

Some of the images from my final wireframes are below, but please click on 'view the full PDF' above to see them in their entirety.

 

Final wireframes 01
Final wireframes 02
Final wireframes 03
Final wireframes 04