My process
Step 1 - Research
The first stage is the most important stage – Research.
I conducted user and industry research to identify user problems and create a bank of powerful insights. Including; competitive benchmarking, online surveys, user interviews and usability testing.
Competitive Benchmarking
I compared the industry leaders to identify common best practises and user pain points. I analysed the key screens in the flight booking process across three airlines and one aggregator.
From the competitive benchmarking I identified the key user problem is navigating the app. I identified potential solutions including using a horizontal navigation menu bar. Highlighting key elements using colour and size. Applying the principles of proximity and alignment by utilising padding, borders and margins of negative space to separate unrelated content elements. To find out more please see the full report below.
Online Survey
I conducted an online survey with users to understand their goals, needs and problems. I focused on how the apps made the users feel, I wanted to understand their emotional responses, behaviours and preferences. I transformed the structured and unstructured questions into valuable quantitative and qualitative data.
Every user surveyed found the ‘flight search function’ and ‘navigation menu’ to be relevant or very relevant. The online survey showed that the most important areas to improve were the layout, structure and navigation menu. To help users navigate I need to highlight key links on the homepage. If the app is redesigned successfully, customer retention could be increased to 93.4%, an improvement of 26.7%.
User Interviews and Usability Testing
I conducted two usability tests and took notes from another two tests to gain further insights. I questioned users about their airline app usage, and did a deep dive analysis into the last time they used an airline app. I then asked the users to book a hypothetical flight on three rival apps. I studied their behaviour and encouraged them to voice their thinking process and emotional reactions.
The user interviews and usability tests gave me a real insight into the mind of the user. It enabled me to explore how the user thinks, behaves and reacts. This was an invaluable stage in the research process and provided deeper insights that influenced my designs. The usability tests highlighted the importance of an uncluttered and easy to navigate homepage, neutral color scheme and layout.
Step 2 - Analysis
Affinity Diagram
To collate and analyse my research findings I chose the affinity diagram method, which allowed me to structure qualitative data through collaborative analysis. I recruited three airline app users who are also technical or design experts. We reviewed and discussed my research and analysis findings to produce the affinity diagram, deeper insights and potential solutions.
Key user problems identified were cluttered pages, confusing navigation and important information being hard to locate. Potential solutions discussed were utilising space more effectively and colour-coordinating key elements and calls-to-action. The process also helped me identify the users flow through the key app screens.
Customer Journey Map
Next I created a customer journey map to translate my research data into a structured document. I used the customer journey map to define the high-level steps in the journey. Then at each stage I analysed the mood, goals, behaviours and user pain points. I plotted on a graph the positive and negative customer experience at each stage from the usability tests.
I discovered that the user experience required improving most during the flight details, upgrades and payment screens.
Please see a snapshot above or the full customer journey map below
Step 3 - Design Iterations
Flow Diagram
I expanded the customer journey map to create a flow diagram of the screens involved in the flight booking process. As the overarching application type is ‘Process’ I used a linear UX approach to create a simplified and consistent flow, that leads the user through the process. I ensured I included every screen state the user will visit in the process. I focused on the user action between each stage.
I redesigned the flow diagram multiple times to minimise the number of steps and improve the flow and user experience.
Please see my full process in the report below.
Interaction Design
To find the optimum solution to the users problems I sketched multiple design iterations for each screen. I compared the positives and negatives of each element across the designs before finalising each screen design.
I focused on ensuring users can complete their task as quickly and easily as possible, with minimal disruptions to their flow. My research also highlighted that users need clear instructions, flow and feedback messages. Therefore, I have clearly labelled and highlighted key information, calls to action and had to progress to the next step.
Step 4 - Prototype and User Testing
I created a medium-fidelity prototype, using adobeXD, to to finalise and test my solution.
My solution is based on my flow diagram and sketches, with added detail focusing on interactivity. The key goal is to validate and improve my designs, and identify potential issues before building the final product.
Try out my prototype - Fly UX Prototype
I tested my prototype by completing usability tests with users.
The user said the overall flow made sense and was easy to follow. The user followed the flow smoothly through the initial stages. There were a few small user pain points highlighted during the booking process, which I addressed before finalising my design.
Step 5 - Wireframe
The key goal of creating a wireframe is to demonstrate interactions, flow, screen design, layout and concepts. I focused on improving the user experience by ensuring it is clear to users what they can interact with and what will happen.
I have updated my medium-fidelity prototype with richer interactions with the interface, and solved the user pain points identified during the Usability Test. The focus is on the experience, screen states and mechanics not the visual design.
High-fidelity wireframes are important for the project hand-over because they contain the necessary details for developers to build the product. I labelled what action happens on what element on the screen and how it functions.