Fly UX

The main project for the UX Design Institute Diploma was to design a booking system (desktop) for the fictional startup airline, Fly UX. The aim was to use great design as the competitive advantage over bigger and better resourced rivals. I worked through the whole design process — research, analysis, design, testing, prototyping and wireframing — to the point where the work could be delivered to developers for the system to be built.

Client: UX Design Institute

My role: UX/UI

Tools: Sketch, ScreenFlow, Survey Monkey, Indesign, Illustrator

1. Research

Benchmarking

An analysis of the booking systems of rival airlines was made to identify best practices, conventions in the industry, what aspects to be emulated and approaches to avoid. The websites that stood out to me had a clean and well-spaced layout that made scanning the information on the page easy and minimised the number of steps in the booking process. In short, those websites that focused on making flight bookings simple rather than trying to upsell to customers gave a better user experience.

User Research

To obtain a better understanding of users, I conducted an online survey and user interviews.

Key findings from online survey (49 responses):

  • Which device did you use to make your booking?
    60% laptop / 30% phone / 10% tablet
  • In general, what is the most unhelpful that you find on airline websites or apps?
    26% Having to register an account to book a flight
    19% Poor navigation
    13% Poor labeling of information
    10% No assistance during the booking process

Usability Interviews and Tests

Four user interviews were conducted and observations of the users making a booking on rivals’ websites revealed some interesting insights:

  • The reasons for some users getting stuck in the booking process was because of the poor designs of navigation or input controls – they did not look ‘clickable’.
  • The display of information was not always coherent. Users were sometimes confused on the pricing for the items that they had selected. Is the price for the outbound and inbound flight? Is the price displayed for one or two passengers?

2. Analysis

Affinity Diagram

A brainstorming session was organised to generate a list of all the observations from the research on flight booking systems. The output was organised into thematic groups and a rough outline of the problems that would have to be solved took shape.

Customer Journey Map

The groupings from the Affinity Diagram were further refined to reflect the distinct steps in booking a flight.

The Customer Journey Map indicated that the steps in the booking process that users found particularly frustrating were for luggage and seat selection and account registration. Therefore, there exists an area where Fly UX can outdo their rivals and provide a better booking experience. Accordingly, the aim was to design a solution that:

  • Improved the experience in these sections; and 
  • Moved users to the final payment page smoothly and rapidly.

3. Design

User Flow Diagram

The user flow for the desktop booking system is mapped out. The different screen states and interaction points are defined and all the issues uncovered in the research phase are addressed.

Interaction Design & Screen Sketches

Preliminary low-fidelity screen designs were quickly sketched. They were further refined and added to the user flow diagram to help visualise the interactions as the user moves through the booking system.

Prototyping and Testing

The prototype was created in Sketch. I tried to include as many interactive elements or changes in screen states as possible so as to make the prototype feel more realistic. A usability test was conducted and the prototype was further refined.

You are welcome to test the prototype yourself.

Wireframing

Finally, all elements for the system were annotated and a wireframe document was prepared to be passed on to a developer so that they could build the system accurately.

 

Mobile version and UI

A mobile version of the booking system was later made in Figma.

Privacy Settings
We use cookies to enhance your experience while using our website. If you are using our Services via a browser you can restrict, block or remove cookies through your web browser settings. We also use content and scripts from third parties that may use tracking technologies. You can selectively provide your consent below to allow such third party embeds. For complete information about the cookies we use, data we collect and how we process them, please check our Privacy Policy
Youtube
Consent to display content from Youtube
Vimeo
Consent to display content from Vimeo
Google Maps
Consent to display content from Google