About
This project was part of my UX Design Diploma at Glasgow Caledonian University, run by the UX Design Institute. The assignment was to create a concept flight booking app based on research findings.
• Role: UX & UI Designer • Tools: Silverback, UXPressia, LucidChart, Sketch, Adobe XD
Phase 1: Research
During the discovery phase of the project, I did a series of usability tests and user interviews, as well as an online survey and a competitive benchmark to get a better understanding of the problems people encounter when visiting flight-booking apps.
Usability Tests
To set my project in motion, I've started with some usability tests to gain some qualitative insight into the usability of existing flight-booking apps and learn as much as I could about the goals, behaviours and context of airline customers when booking flights. For that, I've started by defining my objectives and deciding what I wanted to attain with them. I've also created a script, a consent form and a recruitment screener. My objectives were:
• Identify typical user behaviour on the KLM and Hopper apps;
• Discover their primary goals;
• Discover which features conform to their expectations and which do not;
• Identify friction points;
• Learn what will most likely cause users to leave this app;
• Discover where and when users feel confident and frustrated during the journey;
• Learn which bites of information are essential to them.
Depth Interviews
My next step was to conduct some depth interviews in order to learn more about the context of the use of people that use airline apps. For this, I've created an interview script to keep the interview on track, whilst giving careful attention to avoid any leading or closed questions as the data resulting from them would be fruitless. My objectives were:
• Find out what they are trying to do;
• Who are they with;
• Where are they;
• How, when and which kind of information they share with their peers.
Online Survey
I created an online survey to get more quantitative-attitudinal insights in the context of usage of this kind of apps. I've tried to learn more about their goals: what are they trying to do when visiting these apps, what - if anything - is preventing them from doing it, what else would they like to be able to do on airline websites apps. This survey, with a mix of open and closed-end questions, would take approximately 1-3 minutes to complete.
Competitive Benchmarking
Naturally, I've wanted to draw some learning from the best in class competitor apps. For that, I've researched four apps (both airlines and aggregators), and by taking screenshots of each step of the journey I've assessed what they did well and whatnot, which type of features users expect to find as well as which conventions I should follow.
Phase 2: Analysis
After gathering all the data, it was time to make sense out of it. For analysing all the data collected, I made an affinity diagram and a customer journey map. Below you can learn more about my analysis.
Affinity Diagram
After rewatching the usability tests sessions and depth interviews, I began to take notes. I wrote each point down on post-its, without forgetting the data collected from the benchmark and online survey. After that, I stuck all the post-its on a magic board and sorted them into categories to create the affinity diagram, as clear groups emerged.
Things organised neatly
Customer Journey Map
Having the information gathered from the affinity diagram, I organised it into a step by step view of the journey to show user's emotions, goals, behaviours, context and pain points at each stage of it. Alongside, I noted down ideas and opportunities to make the journey more smooth.
Key Findings
The four main findings I learned from using these research methods were:
• Users often consult the app to see options in regards to dates and prices and share it with others via instant messaging services, before actually booking flights;
• Feel disturbed by the constant up-selling and their almost inability to skip some steps (mainly luggage and seat selections);
• Favour checkout as a visitor rather than creating an account;
• Are very vigilant about their privacy and tend to abandon the process if asked too many personal details without a reasonable explanation.
Phase 3: Design
Flow Chart
Using the results of my research, I was able to create a digital flowchart aimed at alleviating some of the problems I've found. In spite of the vast number of ways in which a client could use a flight-booking app, I have chosen to limit my focus to a specific primary usage case. This choice was because flight booking journeys appear to be linear, with subsequent steps relying on previous ones.
Define Navigation
Here you can find some sketches I did to define the navigation. The main navigation is off-screen and only available if pressing the menu button. The progress bar shows in which step the user is and how far it is from the conclusion of the booking. Also, action controls are placed at the thumb range area, leaving not such primary ones to the top (back button and price breakdown).
Mobile Interaction Design
The next phase in the design process was to determine how each item on the app should function when the user interacted with it. I wanted this journey to be quick, straightforward and secure. For that, some things were taken into consideration, such as:
• Displaying the airports (both for depart and arrival) in alphabetical order; the ability to input the airport code in the search field and the correspondent city is presented;
• After the departure airport is selected, only the available destinations for the specific route are shown;
• When the search results are displayed, the ability to easily browse other dates without losing sight of the other one (changing departure date but keeping an eye on the return flight, e.g.);
• When selecting seats and luggage (if applicable) seeing the price changing and being able to consult the cost of the added item and edit it on the spot in spite of only allowing it in the very end of the journey
• Only asking relevant data for the booking and by doing it so, giving confidence to the user that the data collected is only the strictly necessary;
• Correct keyboards displayed following the type of data asked: numerical, alphabetical and e-mail keyboards for each kind of data;
• Eligibility for scanning the credit card for automatic data input and immediate recognition of the type of card being used (Visa, Mastercard, Maestro, Amex, to name few);
• Sharing options - user can share informative data with others in regards to his/her flight: dates and location only, keeping the sensitive information hidden such as the price or seat allocation;
• Sign-in or login options are only displayed in the very last stage of the journey, eliminating interruptions and forced actions that drive the users away from these apps. If desired, the booking can be added automatically to the user's profile upon sign-in / login.
Bringing colour to some ideas
Phase 4 - Prototype & Wireframe
High Fidelity Prototype
After sketching every screen state, I created every screen state in a high-fidelity style to create a prototype. This model could be sent back to the test /validation process and iterated for progress over time. Hit the play button to see the result.
Wireframe
Upon finishing the research, analysis, design and prototyping tasks, the documents could be assembled for distribution to the development team. Ideally, everything would have been taken into consideration at this point so that the development team would not have to conjecture. Below you can find some of them:
I chose not to draw any lines connecting the points as I felt they would disrupt the view and clutter the wireframes. I believe technical documents must feel right.
Live & Learn
The present project was my very first UX adventure, and I've tried to meticulously apply all the knowledge gathered during the lessons as well as additional personal research. Further reading references and inspiration found while looking at how others solved the same problem I was trying to solve, were crucial to the completion of this project.
Throughout the whole process, I've also tried to keep in mind Bruce Mau's Incomplete Manifesto for the Growth as since my Graphic Design University years it has been a guiding light for approaching new projects, and Dieter Rams' 10 Principles to Good Design.
What I learned
As my first project, almost everything was new, but I feel that both the usability testing and depth interviews were the most significant discovery. Now I feel confident on conduction such sessions, from the elaboration of the questions to set up the environment. By conducting both usability tests and interviews, the data extracted from these sessions were crucial to the development of this project. Without a shadow of a doubt, solid research will validate or challenge preconceptions and do the heavy lifting of the whole design process.
What I would do differently
Naturally being this my first project, there would be some things I would have done differently but to just enumerate some, I would definitely:
• Try other animation approaches - I am working towards it by learning new tools that will improve my animation skills;
• Conduct usability tests after the completion of the prototype to either validate my ideas or challenge them completely;
• Photograph progress more often (during a trip, my sketchbook was stolen, and I had to redo all my drawings).What I enjoyed
Without much surprise, the part I've mos enjoyed was the Design phase itself. I found out that defining the navigation separately from sketching the whole screens didn't take more time, quite the opposite: by setting the 'skeleton' upfront, composing on top of it was way more natural and easy. And from this point, I felt the next logical step was to pursue a Diploma in User Interface Design to deepen my knowledge in this field.