Slide 10 of competitive benchmark
Kanishea Jay
UX Writer
Fly UX
A redesigned flight booking system with a user centered design approach
Overview
Project Brief:
Fly UX is a fictional airline, created by The UX Design Institute as part of the UX Design certification course. The aim of this project is to create a quick, easy, and intuitive mobile experience. For this project, I chose to focus on the flight booking process, which consists of how users search, find, and select flights and seats.
Goal:
The end goal is to build a detailed set of wireframes and a clickable medium-fidelity prototype that can be tested with users.
Role
Lead and Sole UX researcher and designer
Duration
5 Months: Sept 2020 - February 2021
Tools
Sketch, InVision, Miro, Survey Monkey
Research/Discovery
The first, and most important step to designing a new flight booking app is to look at how competitors and other organizations are trying to solve the same problem. The goal of the research and discovery phase is to identify user goals, behaviors, needs, and attitudes regarding the flight booking process. The observation and feedback collection methods were chosen.
Methods applied in the research/discovery phase:
2.1 Competitive benchmarking
2.2 Online Survey
2.3 Note-taking
2.4 Usability Testing
2.1 Competitive Benchmarking
To understand how best-in-class airlines are solving the problem that Fly UX is trying to solve, a number of airlines were analyzed to understand the conventions we should follow, highlight best practices we should emulate, and identify what we can improve upon. The organizations I chose to analyze were: Delta Airlines, American Airlines, Alaska Airlines, and Expedia.
I chose Delta Airlines and American Airlines due to personal familiarity and popularity amongst family and friends. I chose Alaska Airlines for the exact opposite reason. I thought it would be interesting to examine an airline I knew nothing about to bring forth any assumptions I may of had and to allow for richer results. Expedia was chosen because it is marketed as being a competitive platform that also offers more than the other 2 airlines (Hotels, rental cars, packages, etc.).
To complete this competitive benchmark, I analyzed the homepages, as well as the date, flight, and seat selection pages of each organization. I color-coded the comments to keep them organized and make viewing easier.
Green = Positive
Orange = Expected
Red =Negative
What I learned:
Creating this project was an exciting start to completing this UX case study. I learned early on how my assumptions could easily make their way into the research and made sure to keep this in mind throughout this experience as to not affect the results.
Slide 13 of survey analysis
2.2 Survey
I created an online survey to identify the goals, behaviors, and context of people booking flights via mobile app. Using 8 questions to encourage people to fill out the entire survey form, I decided to keep all questions on a single page so users could visually see their progress. A mixture of multiple-choice, structured, and unstructured questions was asked in order to gain qualitative and quantitative insights. The data gathered helped me make more informed design decisions and also provided additional practice analyzing survey data.
My Process:
To avoid bias in my research, I attempted to recruit a broad range of users. The only criteria were to have traveled within the last two years. I chose to make two years a requirement because starting in 2020, there were strict travel restrictions around the world, due to COVID-19, which could've prevented a large number of people from traveling. I distributed my survey to the four places:
Travel Puppies Facebook group - This group is made up of people who plan and travel for pleasure. I figured their experience with airlines would be more frequent and offer valuable information.
LinkedIn - I attempted to reach a wide range of professionals and students who travel for business, school, and pleasure.
Columbia University graduate and alumni forums- A vast community of nationwide and international students, TA's, and professors of all ages, professions, and ethnicities use this forum.
2 personal group chats comprised of friends and family
After distributing my survey, I received a total of 19 respondents. Of the total, 15 filled out the survey completely.
Guiding Questions:
What platform do you typically use when booking flights?
What problems or frustrations do you face during the booking process or when trying to accomplish your goal?
What about your preferred website or app makes the booking process or accomplishing your goal easier?
What changes would you make to your preferred website or app?
What I learned:
I enjoyed creating the questions for this survey because I was able to put what I've learned from my clinical psychology degree to use. The data gathered helped me make more informed design decisions, and also provided additional practice analyzing and structuring such data. The survey portion of the research and discovery phase is where I was able to truly focus on the user and learn of their needs and pain points.
Slide 8 of Usability Test #1 Notes Presentation
2.3 To further my research, I proceeded to take notes.
Good notes are a fundamental part of the research. While watching recordings of two mobile usability tests (Aer Lingus and Eurowings) provided by The UX Design Institute, detailed notes were taken and key insights that focused on goals, behaviors, context, positive interactions, and pain points were highlighted.
I decided to use this color-coding system to better organize my notes and make them easy to scan for later use.
Green = Positive comments/ observations
Red = Negative comments/observations
Orange = Interesting observations
What I learned:
This portion of the research and discovery phase was my first introduction to usability testing and showed me the value it has in researching and designing user-centered products. At first, I treated this project like a manuscript and wrote down everything the user said and did. Remembering that my notes had to be useful and easy to read, I started over and focused solely on the user's goals, behaviors, context, positive interactions, and pain points. Typing and organizing these notes helped me better familiarize myself with the results and got me more invested in creating solutions that actually work.
Screenshot from Usability test
2.4 Usability Testing
Diving deeper into the goals, behaviors, needs, and attitudes of users booking flights through mobile apps, I conducted a usability test of my own.
Two organizations, previously used for the competitive benchmark (Delta Airlines and Expedia), were tested in a remote usability test using Reflector. Due to the coronavirus lockdown, a remote test was the safest option. I planned and crafted a usability test script to use while conducting this Zoom meeting.
My process:
For this usability test, I had the same criteria and a very similar recruitment strategy as the previously mentioned survey. To reach those who already filled out the survey, I sent out a thank you post on LinkedIn, the Travel Puppies Facebook group, and the Columbia University graduate and alumni forums. Following that post, I extended an invitation to participate in a usability test. The invitation included the following information:
Description of the test.
Required criteria (Must have traveled via airplane within the last two years and have an iPhone).
The length of the test (40 minutes).
4 people reached out willing to do the survey and 2 of those people scheduled a usability test. Of the 2 respondents, I was able to successfully complete 1 test.
After completing this mobile usability test, I went through the note-taking process using the same color-coding system.
What I learned:
This phase of research helped me experience first-hand why usability testing is the most powerful tool a UX researcher can use. It allowed me to not only gain rich insights directly from the user but also take my note-taking skills and observations to the next level.
Although I have experience with therapy and mental health evaluations, which are arguably very similar to user testing, I learned that there is a different level of care and discipline I needed to successfully conduct a usability test. It took three tries to get it right, as I caught myself being biased and influencing the user more than I should have.
Overall, this project helped build my experience and confidence in usability testing and learn how to conduct depth interviews for better design decisions.
What I'd do differently:
I'm eager for the opportunity to conduct an in-person test. I believe it would offer even more insights and conclusions. Being able to make and keep constant eye contact and pick up on body language was difficult via Zoom and I anticipate it being easier in person. I also think it would offer a better way to connect and make the user feel comforted in being seen, heard, and understood.
Slide 10 of Usability Test #2 Notes Presentation
Analysis
The next step in the UX design process is to analyze all insights gained from the research to clearly articulate the problems FlyUX aims to solve for the user. Both affinity diagrams and customer journey maps were used to make sense of the large volume of raw data and truly understand the problem to be solved.
Methods applied in the analyzing phase:
1. Affinity Diagram
2. Customer Journey Map
3.1 Affinity Diagram
The Affinity diagram is arguably one of the best tools for organizing unstructured data and getting to the root of research results.
Being that this was my first time using Miro, I decided to complete this affinity diagram solo to gain familiarity with the software. I divided this session into five steps:
Step 1: To begin this process of creating my affinity diagram, I gathered all of the information I received from previous research. This information consisted of research data from:
Competitive Benchmark - Using my comparative analysis summary of 3 mobile airline apps (Delta Airlines, American Airlines, and Alaska Airlines) and 1 mobile travel app (Expedia).
The online survey I created and distributed amongst family, friends, and colleagues.
Note-taking - All notes were created from the UXDI provided usability test of two users (user1 + user 2) on two different mobile airline apps (Aer Lingus + Eurowings) and a usability test done by myself of one user (User 3) on two different mobile travel companies (Delta airlines + Expedia).
Usability Test - This remote usability test was done by myself on one user.
Step 2: Using the collaborative online tool Miro, I converted all of the research findings to individual sticky notes and color-coded them by source. In an effort to keep all notes only of raw data and suggestions from users, I deleted a few from slide 1 to slide 2.
Step 3: From slide 2 to slide 3, I did more fine-tuning of sticky notes to reduce repetitive data and correct formatting and verbiage errors.
Step 4: This step consists of my first attempt to roughly organize all data and put them into groups based on similarity.
Step 5: Once groups were organized, I created borders to further distinguish them from one another and provide easy identification.
What I learned:
Although I did not use any of the collaborative features in Miro, I learned how to successfully use the software and all of the powerful collaborative tools available. It was fun learning how to structure all of the qualitative research data in such a creative way.
For my next UX case study, I will work with a team and use Miro to take full advantage of the collaborative tools.
3.2 Customer Journey Map
To add even more structure to my research data and understand how customers find and interact with airline apps, I created a Customer Journey Map. The map creates a visualization of how a customer flows through the app, step by step. It focuses on their experience (visualized through emojis), thoughts, context and goals, behaviors, pain points, and any potential opportunities, to make FlyUX a successful product.
Before composing my customer journey map on Miro, I created a rough sketch by hand. Once I felt comfortable with my drawings, I transferred my data to the software. I found it easier to keep both my affinity diagram and the notes for the usability test handy since I would be building off of them both. I counted on the affinity diagram to make sure its high-level steps corresponded with those of the customer journey map. I depended on the notes to quickly reference negative and positive experiences (since they were color-coded).
What I learned:
In addition to helping me stay organized, having a draft of the customer journey map allowed me to get a better understanding of how I can use Miro to creatively build this document from scratch. Creating this user flow also gave me more confidence and taught me how to trust myself, as there were gaps between the affinity diagram and the customer journey map that needed to be filled and I had to rely on my own judgment to do so.
Image of Customer Journey Map
Design
The overall objective of the design phase is to fix the issues that were exposed during the research. Elaborating on what was highlighted in the customer journey map, this phase is where design decisions are drafted to begin altering the user experience to make sure that their future interactions are superior to that of previous ones.
Methods applied in the design phase:
4.1 Flow Diagram
4.2 Low-Fidelity Sketches
4.3 Prototype
4.1 Flow Diagram
Flight booking follows a linear flow as users flow from one input to the next. To get a better visualization of the logical routes users should take when interacting with the solutions I create, a flow diagram is essential.
To create this flow diagram I, once again, drew a rough sketch and used Miro, in an attempt to master the web application. I sketched the flow starting from the homepage and up to, and including, seat selection, making sure to incorporate each step that the user would take to complete the task.
Creating a flow diagram not only helps to deepen my understanding, it truly puts the user first and forces designers to keep them a priority. I made sure to maintain the mental models that users expect while implementing my design recommendations into the interaction flow.
What I learned:
At first, generating this flow diagram was difficult to grasp because each screen, state, and interaction had to be represented, and there was always something being left out. Before transferring my work to Miro, I drafted this flow diagram three times from start to finish. This process really helped me see how important detail is to crafting an experience that matters for both consumers and producers. I appreciate how this practice forced me to keep the user front and center while determining their relationship to the system I was building.
Image of User Flow Diagram
Image of low-fidelity sketch
4.2 Low-Fidelity Sketches
Heavily relying on the flow diagram that was produced from all previous steps, I sketched a non-interactive, paper-based prototype to test the functionality of the design decisions that were made.
To complete the sketches I used paper, colored pencils and a quick google search on symbols and images to use for low-fidelity mobile app prototypes.
I completed 4 iterations of sketches:
My original sketches included a constant bottom navigation bar across the app with 3 icons (Home, Flights, and More). I decided to get rid of that design and add a progress bar on top instead. This change was to help ease flow and reduce user uncertainty. There are 6 steps from start to finish, with some steps requiring more of the user's attention. A progress bar would help reduce the user's perception of time.
For the second iteration of sketches, I changed the calendar in step 1 from one that led to a different page and was within a border. I decided to make it a pop-up screen because seeing the step 1 screen slightly faded in the background may make filling out the calendar seem like a quicker task. It also helps to stay consistent; I already designed the location input screen as a pop-up. Eliminating borders around the calendar was to create an illusion of space and freedom.
Originally, I had the flight seating options (Comfort Plus, Main, and First Class) on screen with Step 1, but decided against it by the 3rd iteration. I wanted to get rid of anything that forced the user to make decisions they'd need to navigate backward in the app to change. For most, the decision to select such seating usually depends on price, so, I added these options to step 2 where pricing would be selected. Making seating selection buttons that can easily be selected and deselected while also allowing the user to compare prices for flights was my goal. I also decided to display the seating selection as option on every subsequent step in cases where a user might change their mind.
My last iteration included adding plus sign icons onto the Passenger and Select Seats buttons in step 4. This design decision was made to make the intention of the buttons more obvious. If in a rush, I wanted the user to be able to easily scan the page and still flow effortlessly through the process.
What I learned:
At this point in the process, I thought I knew exactly how I should design the FlyUX mobile app. However, making low-fidelity sketches opened my mind to receive new design solutions. Through plenty of iterations, I learned to value how quick and easy it is to simply erase and start anew. I was concerned about not being artistic enough to convey the solutions I had in mind but had to remember that visual appearance wasn't important in this phase of the process
4.3 Prototype
After defining much of the solution with the flow diagram and low-fidelity sketches, I created a mid-fidelity prototype with interactive detail. This prototype provided a great opportunity to problem-solve my own ideas, as well as, test out high-level flow, screen layouts, text, and basic interactions. This prototype was developed in Sketch and made interactive in InVision.
My process:
Using my low-fidelity sketches to guide me, I created the first iteration of screens. I then sent them out to be reviewed by my instructors and peers, before conducting a usability test.
I received feedback to be mindful of content density and button and text sizing. After fixing these issues and doing a bit more research on optimal type hierarchy, I added interactivity in InVision and conducted a usability test.
The usability test revealed navigation issues in step 3 to step 4 and the user expressed difficulty understanding how to select a flight and move to the next screen. After doing more research on how to create fixed elements in InVision, how to make button adjustments, and confirming the solutions, I felt comfortable moving on to wireframing.
What I Learned:
Learning both Sketch and InVision proved to be a little difficult for me at first. After a few tutorials and practice, I was able to breeze through and complete the medium-fidelity prototype. The main takeaway from this portion of the design phase was to practice and ask plenty of questions because there are so many resources that layout type scale and material components that can make designing much less difficult.
Wireframes
Slide 17 of WireFrame
After completing the prototype with all interaction corrections, it was time to create effective handover documentation. Although FlyUX is a fictional airline with no intention for development, it was still important to learn how to define the extra details that developers need to build the product accurately.
In order to complete these wireframes, I had to break down the detail in each:
screen
selection
element
animation
field
In addition to making detailed wireframes, I added headers and titles to each page so developers can easily navigate and understand all instructions.
What I learned:
Generating wireframes helped me understand how much the UX profession relies on teamwork. Having used the wireframing tools provided by The UX Design Institute, I learned how to properly annotate notes so that developers can properly do their jobs at bringing my design to life.
Summary
What I Enjoyed
I enjoyed bringing my love for psychology, the human mind, and decision-making into this project. I appreciate how important of role psychology can play in UX research and design, and feel like I can use all parts of my creative self and the academic skills I've previously acquired to make people's lives easier.
What's Next
I am currently finishing up a group project independent of The UX Design Institute. For this project we are creating a donation app that will allow me to gain the following skills:
Collaborating with other UX professionals and using collaborative software
Figma
UI
UX writing and microcopy
Drop me a message
Let's share ideas & discuss ways to collaborate!