top of page
Orbit Airlines Case Study.png

ORBIT AIRLINES

UX Diploma Case Study 2022

UX Design institute Course Project:  

Design a new website or mobile app for your client. You will focus specifically on the flight booking process: how users search for and select flights online. I was responsible for each step of the design process.

Orbit Airlines.png
ORB Top

DESIGN PROCESS

Design Process Louise Stewart

RESEARCH

  • Competitive Benchmarking 

  • Online Surveys

  • Usability Testing 

I used the triangulation method to gather my research. By using different methods of gather research it increases confidence in research data and provides a clearer understanding of the problem.

Competitive Benchmarking

By assessing competitors websites, I identified areas  aligning with the users 'mental models' and areas I could enhance to provide a smoother flow.  A few common issues were :

  • Too many repetitive prompts.

  • Overcrowding the screen with ad's - navigation is not always clear. 

  • Too many clicks to complete tasks.

Louise Stewart Competitive Benchmarking.png

Online Surveys

I created an online survey to gain insights as to how people book their holidays and which factors are deal breakers when it comes to booking online. I was able to identify :

  • The most important factor is price, followed by travel dates and baggage limitations.

  • 90% of people prefer to book their flights online.

  • 70% of people prefer to book direct with the airline. 

Louise Stewart Online Surveys.png

Usability Testing

By observing people use competitors to book a flight, a few issues kept occurring:

  • The baggage & economy options were confusing users.

  • No prompting or help is offered if the user is 'stuck'.

  • Users are missing important information due to information overload.

Louiose Stewart Usability Test.jpg
Reseach Button_edited.png
ResearchOA

ANALYSIS

  • Affinity Diagram  

  • Customer Journey Map

  • User Flow

Affinity Diagram

I analysed all research collected and created an affinity diagram. I did collaborate on this project as I believe everyone identifies something different from research findings. This method allowed to add structure to my research findings and identify the most common user interactions:

  • Users would like simplified baggage options.

  • Lack of direction and prompts on how to progress when user is stuck, also no visible back button to return to previous page. 

  • Repetitive prompts are annoying and cluttered homepages are resulting in users missing important information.

Louise Stewart Affinity Diagram

*Click image for full document

Customer Journey Map

From my affinity diagram, I created a customer journey map to tell the story of users experience across all booking journeys and bring the research information together into one easy readable document, as you can see users are most unhappy when it comes to flight selection and baggage options, then again at optional extras. 

Louise Stewart Journey Map

*Click image for full document

Flow Diagram

 The Customer Journey Map highlighted each stage the user goes through during the flight booking process, this helped to visualise where a screen sits within the structure, when and how the user would reach it. To create my user flow, I identified the best case /happy case user flow (I understand this flow would expand to include other user paths). 

 My goal is to reduce the amount of pages to make the booking progress smoother and more efficient for the user.

Louise Stewart User Flow_edited_edited.j

*Click image for full document

Analysis Tile_edited.png
Analysis OA
DesignOA

DESIGN

  • Sketching 

  • Wireframes

I was aware of the areas that didn't work for users around selecting flights and baggage options, lack of prompts for helping user progress with their booking if they were unsure what was next and over cluttered homages.

 

I paid particular attention to simplify these options to give the user a smoother flow. I reused elements across the pages, keeping the format consistent as this promotes recognition and consistency for the user. 

Creating and designing screens, bringing the project to life and solving user problems is definitely the stage I love most as a designer.

Louise Stewart Sketches

Simplified Baggage Options- Click image for full document

I kept the header design consistent throughout the booking process to create continuity and familiarity for the user. Each page is focused around that step within the booking process and is clear by progress bar and page title.

Louise Stewart Design_edited.png

PROTOTYPE & ANNOTATIONS

  • Figma

  • Adobe Photoshop

I transferred my sketches / ideas to digital format using Figma.  As I created the wireframes, I refined the design and made changes to enhance the design and experience for the user.  I made a high fidelity prototype adding UI elements bringing my design to life. I chose a colour pallet based on the company logo keeping a branding identity throughout the website. 

I created a progress bar to inform users of  each step and how close they were to finishing their booking, added a back button option top left of each page and simplified baggage and flight options. 

This was where I really felt at home, I loved learning the Figma software and creating a functional design.

*Click image for full prototype

Annotations

To have the design ready for developers, I created a document relating to the prototype with all necessary information the developer would need to build the project. The annotations define all the fine details of how the website behaves and interacts.

*Click image for full annotations document.

Prototype OA

REFLECTION

The usability tests really gave me an insight to how differently people use websites and encounter different problems, I was surprised at how many issues users had whilst using leading websites. It demonstrated that bad design affects every user no matter their expertise or familiarity with the technology in question. This reinforces the importance of UX research and the whole UX process, excellent communication with your client, users and team which will ensure you are all on the same page and will make for a more successful design. 

Reflection Tile_edited.png
Reflection OA
Prototype Tile_edited.png
bottom of page