[vc_row el_class=”row_padding_top row_padding_bottom has-animation”][vc_column width=”1\/2″]
<\/h4>[vc_column_text]Project brief:<\/strong> Design a new app for Wings2Fly, a start-up airline that delivers high-quality services, illustrated in an effective flight booking process. Role: \u00a0<\/strong>UX Designer and Researcher 1A. Competitive Benchmarking<\/strong><\/p>\n 1A<\/strong> \/ 1B \/ 1C<\/p>\n [\/vc_column_text][\/vc_column][vc_column width=”2\/3″][vc_column_text]A. Competitive Benchmarking \u200dFindings:<\/strong> From competitive benchmarking, I learned how best-in-class companies deal with the problems they try to solve. In addition, I learned to understand and follow industry conventions and identify the best practices I need to emulate.<\/p>\n \u200dStudy:<\/strong>\u00a0Most of the features of the studied competitors are very similar. I noticed a few differences: 1B. Online Survey<\/strong><\/p>\n 1A \/ 1B<\/strong> \/ 1C<\/p>\n<\/div>\n [\/vc_column_text][\/vc_column][vc_column width=”2\/3″][vc_column_text]1B. Online Survey \u200dFindings:<\/strong> Gathering quantitative and qualitative data gave me insight into the motivations and behaviours of the sample surveyed for booking a flight. In addition, conducting an online survey and gathering data was beneficial for developing different research skills. Finally, the collected data helped me make educated design decisions on analyzing and structuring data.<\/p>\n \u200dStudy:<\/strong> Most users are comfortable booking online and plan to use flight services soon. However, users prefer to purchase and make flight reservations using an online app or website. Please see the details here.[\/vc_column_text][vc_column_text]> See Online Survey<\/a>[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_single_image image=”2752″ img_size=”full”][\/vc_column][\/vc_row][vc_row el_class=”row_padding_top row_padding_bottom has-animation”][vc_column width=”1\/3″] 1C. Note-Taking &\u00a0Usability Test<\/strong><\/p>\n Note-Taking of two external usability tests and usability tests conducted by myself<\/p>\n 1A \/ 1B \/ 1C<\/strong><\/p>\n<\/div>\n<\/div>\n [\/vc_column_text][\/vc_column][vc_column width=”2\/3″][vc_column_text]1C. Note Taking & Usability Testing \u200dFindings:<\/strong> Online Booking app is a powerful tool that empowers us to offer users the possibility to search for and book flight trips at their convenience. But with power comes great responsibilities to keep the user engaged and motivated and to convert users into customers. But a bad user experience can frustrate users so much that it can drive them away. That was one experience that I almost witnessed on these Usability Testings.<\/p>\n \u200dStudy:<\/strong> If I had to mention a few results underlined in the study, I’d say that users find it hard to locate the Book Now funnel on the Home page. Then stops between the flights and luggage are details that get lost in the booking process. Finally, choosing flight fares, users find it hard to understand related terms, and certain features can be confusing.[\/vc_column_text][vc_column_text]> See the Usability Test<\/a>[\/vc_column_text][vc_column_text]> See the Note Taking from Usability Test<\/a>[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_single_image image=”2753″ img_size=”full”][\/vc_column][\/vc_row][vc_row el_class=”row_padding_top row_padding_bottom has-animation”][vc_column width=”1\/3″] 2A. Affinity Map<\/strong><\/p>\n The next part of the process was reviewing, concluding and collecting all information from the Research Phase – Competitive Benchmarking, Online Survey, Note Taking and Usability Tests – identifying patterns and structuring data through Affinity Map and Customer Journey Map.<\/p>\n 2A<\/strong> \/ 2B<\/p>\n<\/div>\n<\/div>\n<\/div>\n [\/vc_column_text][\/vc_column][vc_column width=”2\/3″][vc_column_text]2A. Affinity Map \u200dFindings:<\/strong> It was interesting to observe how users from different backgrounds and locations can have the exact needs and values. Users are looking for easy processes, low prices and a thriving online booking experience.<\/p>\n \u200dStudy:<\/strong> Listening to the user’s voice is the key to improvement, and their feedback is vital and welcomed simultaneously. Booking app software needs to be accessible, understandable and self-explicit. Users like to have the steps explained in plain and unambiguous language and details presented upfront. From a look standpoint, the design should be minimal, pleasing to the eye, and very well explained, judging by the famous saying “less is more.”[\/vc_column_text][vc_column_text]> See the Affinity Map<\/a>[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_single_image image=”2755″ img_size=”full”][\/vc_column][\/vc_row][vc_row el_class=”row_padding_top row_padding_bottom has-animation”][vc_column width=”1\/3″] 2A \/ 2B<\/strong><\/p>\n<\/div>\n<\/div>\n<\/div>\n [\/vc_column_text][\/vc_column][vc_column width=”2\/3″][vc_column_text]2B. Customer Journey Map \u200dFindings:<\/strong> The Customer Journey Map demonstrates how customer confidence starts on the point of confidence and is quickly affected by missing the Booking Button or landing on a busy Home page. If the Flight Search and Calendar Booking are going smooth, problems are revealed on the Flight Packages and divers Fares Options that confuse and drop the confidence level. Interestingly enough, the end of the process brings the user on good ground. Still, some elements like excessive Covid messages and look and feel factors still affect a positive client’s general impression.<\/p>\n \u200dStudy:<\/strong> Customer Journey Map demonstrates the demanding points where a critical engagement challenges the user’s emotions, and the result is that process completion can be dangered.[\/vc_column_text][vc_column_text]> See the Customer Journey Map<\/a>[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_single_image image=”2756″ img_size=”full”][\/vc_column][\/vc_row][vc_row el_class=”row_padding_top row_padding_bottom has-animation”][vc_column width=”1\/3″] 3A. User Flow Diagram<\/strong><\/p>\n Using my Research Data and Analyzed data as building blocks, I laid a solid foundation for the Design phase, building clarity and confidence by embedding users’ feedback in my product.<\/p>\n 3A<\/strong> \/ 3B<\/p>\n<\/div>\n<\/div>\n<\/div>\n [\/vc_column_text][\/vc_column][vc_column width=”2\/3″][vc_column_text]3A. User Flow Diagram \u200dStudy:<\/strong> Listening to the user’s voice is the key to improvement, and their feedback is vital and welcomed simultaneously. Booking app software needs to be accessible, understandable and self-explicit. Users like to have the steps explained in plain and unambiguous language and details presented upfront. From a look standpoint, the design should be minimal, pleasing to the eye, and very well explained, judging by the famous saying “less is more.”[\/vc_column_text][vc_column_text]> See the User Flow Diagram<\/a>[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_single_image image=”2757″ img_size=”full”][\/vc_column][\/vc_row][vc_row el_class=”row_padding_top row_padding_bottom has-animation”][vc_column width=”1\/3″] 3B. Interaction Design<\/strong><\/p>\n The next part of the process was reviewing, concluding and collecting all information from the Research Phase – Competitive Benchmarking, Online Survey, Note Taking and Usability Tests – identifying patterns and structuring data through Affinity Map and Customer Journey Map.<\/p>\n 3A \/ 3B<\/strong><\/p>\n<\/div>\n<\/div>\n<\/div>\n [\/vc_column_text][\/vc_column][vc_column width=”2\/3″][vc_column_text]3B. <\/strong>Interaction Design<\/strong> \u200dSketching 4A<\/strong><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n [\/vc_column_text][\/vc_column][vc_column width=”2\/3″][vc_column_text]4A. Medium-Fidelity prototype \u200dInteractive Prototype <\/h4>[vc_column_text]<\/p>\n 5A. Interaction Design<\/strong><\/p>\n 5A<\/strong> \/<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n [\/vc_column_text][\/vc_column][vc_column width=”2\/3″][vc_column_text]5A. Create wireframe for developers
\n\u200d
\nThe problem: <\/strong>Most flight booking applications are challenging and have complex interactions. The lack of clarity about the airfare packages is causing frustration, and friction, resulting in losing customers.
\n\u200d
\nDesign goal:<\/strong> Wings2Fly wants an online experience that is effective, clear, and intuitive based on a deep understanding of its target user’s needs and preferences.<\/p>\n
\n\u200d
\n\u200dDuration: <\/strong>6 months – 8 March<\/strong> to 8 August 2022<\/strong>
\n\u200d
\n\u200dTools: <\/strong>Adobe Photoshop, Adobe Illustrator, Adobe XD, Figma, Miro, Survey Monkey, Reflector and ScreenFlow[\/vc_column_text][\/vc_column][vc_column width=”1\/2″]<\/h4>[vc_column_text]1. Research:<\/strong>
\n1A. Competitive benchmarking
\n1B. Online Survey
\n1C. Note-Taking and usability tests
\n\u200d
\n2. <\/strong>Analysis:<\/strong>
\n2A. Affinity Diagram,
\n2B. Customer Journey Map
\n\u200d
\n3. <\/strong>Design:
\n\u200d<\/strong>3A. User Flow Diagram
\n3B. Interaction Design
\n\u200d
\n4. <\/strong>Prototype:
\n\u200d<\/strong>4A. Medium-fidelity prototype
\n\u200d
\n5. <\/strong>Wireframe:<\/strong>
\n5A. Created wireframe for developers
\n\u200d[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=”60px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_single_image image=”2749″ img_size=”full”][\/vc_column][\/vc_row][vc_row el_class=”row_padding_top row_padding_bottom has-animation”][vc_column width=”1\/3″]1. RESEARCH PHASE:<\/h4>[vc_column_text]<\/p>\n
\n\u200d<\/strong>In the research phase, I started performing competitive benchmarking to better understand and in-depth immersion within industry conventions. For this purpose, I used the following apps: Lufthansa, American Airlines, Air Canada and Cheapflights. These airlines were chosen because they offer high-quality services and operate worldwide.
\nHowever, the main feature that I closely observed was the online booking service. Each competitor was reviewed based on home screens, booking process steps, and fare and seat selections.<\/p>\n
\n– Easy Accessible vs Hard Accessible
\n– Simplified Interaction vs Complex Interaction
\n– Distracting Interface vs Minimalistic Interface
\n– Clear Information vs Ambiguous Expressions[\/vc_column_text][vc_column_text]> See Competitive Benchmarking Study<\/a>[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_single_image image=”2754″ img_size=”full”][\/vc_column][\/vc_row][vc_row el_class=”row_padding_top row_padding_bottom has-animation”][vc_column width=”1\/3″]1. RESEARCH PHASE:<\/h4>[vc_column_text]<\/p>\n
\n\u200d<\/strong>Online Survey was the next on the Research process, and I conducted it using Survey Monkey. The questionnaire asked the audience to share their insights, pain points and expectations based on their past experiences with airline booking software. The sample size was 20 participants and sent a survey link via email. Unfortunately, due to the nature of the free Survey Monkey plan limitations, I was forced to use just the first ten feedbacks for the final report.<\/p>\n1. RESEARCH PHASE:<\/h4>[vc_column_text]<\/p>\n
\n<\/strong>Three usability tests were conducted to understand further the user’s goals and behaviours, the context of use, pain points and mental models when booking flights.
\nUXDI provided two usability tests, and I took detailed notes from these sessions. Learned the importance of note-taking and paying closer attention to facial and vocal feedback answers from these usability tests. Instead of writing down every word, I focused on every relevant detail that helped me understand and address the problem. As a result, I could understand and build new skills, experience and confidence by synthesizing and applying the same approach to my usability test study.
\nNext, I conducted and moderated my usability test for one user booking with two airline apps. I completed the test in person, inviting the user to my office, where I had prepared all materials. Because it was my first usability test, I had the opportunity to learn a few new software used for the test, ScreenFlow and Reflector.<\/p>\n2. ANALYSIS PHASE:<\/h4>[vc_column_text]<\/p>\n
\n\u200d<\/strong>Organizing the data by writing the key findings from the research phase into the stickers and placing them on a virtual board on Miro was an opportunity for me to learn new software. First, I took five colour stickers for each research source to identify where the insight came from – three Usability Tests, one Competitive Benchmarking and one Online Survey. Then, I placed each category with its data creating five groups of different colours.
\nThe next step was identifying the data’s common elements and those related to creating specific groups. Using the grouping technique, I made the following groups: Flight Packages, UX Fails, UX Positivesm Booking Process, Use Desktop, Laptop, phone, travel apps, Home Page, Design, Flying Purpose, Booking Factor, calendar, Booking Decisions and a few more.<\/p>\n2. ANALYSIS PHASE:<\/h4>[vc_column_text]<\/p>\n
\n\u200d<\/strong>The next step is to use the in-depth analysis revealed by the affinity diagram to illustrate the structured data into a user behaviour flow of decisions and emotions experienced by the user through the booking process. The user behaviour flow is called the Customer Journey Map because it shows the deepest and highest user experience moments over the process. The highest moments are defined by positives, the good feelings when the user is engaged and confident; the lowest is marked by critical moments when the user’s trust is damaged and pain points are present.<\/p>\n3. DESIGN:<\/h4>[vc_column_text]<\/p>\n
\n<\/strong>A linear process of booking presents Screen States (rectangles) and Interactions (circles), progressing on the sequential process from the Homepage to the booking confirmation showing the whole booking path.
\nUsing this visual progression, I identified actions and states that helped me lay down my first project sketches in the drawing process.
\n<\/strong>
\n\u200dFindings:<\/strong> It was interesting to observe how users from different backgrounds and locations can have the same needs and values. Users are looking for easy processes, low prices and a thriving online booking experience.<\/p>\n3. DESIGN:<\/h4>[vc_column_text]<\/p>\n
\n<\/strong>Once I established the flow, the next step was drawing sketches of the booking process of my newly developed app’s layout. Finally, after all the previous research processes, I started putting the pen on paper and making sketches for an iPhone 13 Pro screen.<\/p>\n
\n<\/strong>Drawing low-fidelity sketches can be messy, but it is a fast, effective and low-cost activity where basic structures reveal step by step, drawing by drawing the layout and look of the newly developed app. I used a few markers with different colours to highlight details and mark the essential thoughts. I draw the vital elements from a composition standpoint using not a replacement text but an actual text to conserve the look and prevent future changes. I tried to put as many details as I thought bill be necessary; however, when I was building the medium-fidelity prototypes later, I realized that a few new annotations were still required.[\/vc_column_text][vc_column_text]> See Wings2Fly Sketches<\/a>[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_single_image image=”2758″ img_size=”full”][\/vc_column][\/vc_row][vc_row el_class=”row_padding_top row_padding_bottom has-animation”][vc_column width=”1\/3″]4. DESIGN:<\/h4>[vc_column_text]<\/p>\n
\n<\/strong>After I defined the solution from my flow diagram and sketches, I moved to create a medium-fidelity prototype, adding interactivity to the booking process. I built the interactive prototype in Figma, where I had the chance to learn and understand Figma in dept. To use Figma at its full potential, I took a course from SaaS Design where I got a certification For Beginner To Figma Pro.<\/p>\n
\n<\/strong>Creating the prototype was fruitful because I enjoyed creating it and adding interactivity to make it functional. In addition, this process taught me the importance of creating the prototype considering every detail the user will use in the booking process. In the future, I would like to expand my knowledge using Adobe XD, but for now, I find Figma a fantastic tool for prototyping and interaction.[\/vc_column_text][vc_column_text]> See Wings2Fly medium-fidelity prototype<\/a>[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_single_image image=”2759″ img_size=”full”][\/vc_column][\/vc_row][vc_row el_class=”row_padding_top row_padding_bottom has-animation”][vc_column width=”1\/3″]<\/p>\n
\n\u200d<\/strong>My sketches and prototype work are done, and I need to gather, document and present the extra details to developers to build the product accurately. This process helped me define the terminology, understand the functionality and write down the requirements to build the application accurately.<\/p>\n