Fly UX booking system
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.
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.
- Snowball USB mic
- Macbook Pro
- The Aer Lingus site would be easier to navigate than the Ryan Air one
- The users were able to navigate the Ryan Air website with more ease.
- 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.
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.
- Post It notes
- Marker pen
- Patterns would become more apparent, structuring the data would become easier.
- 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.
- The usability tests hid a wealth of information, some of which I hadn't realised at the time of conducting them.
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.
- Adobe Illustrator
- I still thought the Aer Lingus website would marginally be the better journey for the user.
- The Ryan Air user journey was better than the Aer Lingus one.
- 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.
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.
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.
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
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
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
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.