Flight Cancellation Flow
The Scenario
Two travelers are on a flight from San Francisco to Boston with a layover in Austin. When they land in Texas, they learn that the flight is cancelled due to a severe storm in the Northeast. The last flight to Boston has left for the day. However, they are booked on the first flight out the next day. All of the passengers from this flight are entitled to a free nights stay at a local hotel and a $12 meal voucher for dinner. The travelers will receive an email with a link to the web page where they can confirm the details.
This is a sample notification users would typically receive when their flights get cancelled..
The Design Challenge
As the UX product designer, my job was to create the flow that takes the user from the email to the application where they will choose a hotel, get a meal voucher, and confirm the selections. After research was performed, I created a flow chart showing the journey, compiled wireframes for each screen, and designed high-fidelity mockups of the experience.
Travelers who fly American have many ideas on how to improve the current dynamic recommendation system.
Foundation Research
Finding customer pain points online was essential for the empathy building process. Flight cancellations are stressful when they occur and I really feel for anyone that has to go through this hassle. Reading online articles from travelers flying American gave me real perspective on the situation. Unfortunately, the issues I uncovered were on the development side. Design was not the issue. In essence, I learned that I should consider creating a flow that took the user to the end point with as few clicks as possible. Links to the articles, screen shots from the conversations, and online images are combined into a concise file that is available using the link below.
User Experience Sketches
As soon as I felt I had done enough research on the users, I was ready to start sketching out my ideas. Adhering to the American Airlines brand was essential. Therefore, I was compelled to download the application on my phone so I could get familiar with the design patterns they employ. The samples below are comprised of layouts for hotel and flight bookings. These loose layouts helped me get a feel for the space and were inspired by various competing brands.
Customer User Flow
After the layout sketches were complete, I compiled a user flow based on the input from users who shared their insights online. The flow is broken up into three sequential segments to make it easier to read and was later revised after user testing was conducted.
User Flow 1: Users will land at the booking screen and have the option to book a hotel or decline the offer upfront. This section of the flow as totally revised after user testing.
User Flow 2: During the second phase of the flow, users select how many rooms they wish to book, select a particular location, and configure their room layout.
User Flow 3: The last portion of the flow prompts the user to use the food voucher and shows what happens if they decline the option.
Wireframes
The layout exploration process made it easier for me to transition into Sketch. Making wireframes was pretty straightforward and I elected to focus on the Android experience.
Revised User Flow
User testing told me that I need to take into consideration what would happen if the user accidentally declined the offer. A confirm selection screen needed to be added to the flow in the event a user changed their mind in a split second. This allows users to return to the offer without exiting the application. It also provides them with directions to contact customer service if they decide to decline..
The entire journey is mapped out here and is detailed in two images below.
The first half of the journey is detailed above.
The second half of the experience is detailed above.
High Fidelity Mockups
The final flow was met with several objections by the stakeholders. They wanted to see a simpler layout for the second screen. The travelers only need to select a hotel location and do not need to see any dates. Typography was also questioned at times as was the size of the icons used for the hotel configuration. All things considered, I was told that my layout was very close to the existing process currently being used.
