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?
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.
