A responsive website and visual refresh of a legacy airline brand
Trans World Airline (TWA) is an iconic international airline founded by Charles A. Lindberg and was part of the ‘Big Four’ fleet. TWA has a long history of offering elevated flying experiences to consumers with a personalized touch. TWA’s parent company, American Airlines, sees the opportunity to open an elite flying experience. They look for a flexible, streamlined, and intuitive user experience to match the legendary customer service and care. They plan on launching the new carrier in 12-18 months, when the world fully opens after the COVID-19 pandemic.
Relaunch TWA with a clean, fresh website that focuses on customers’ needs and update the brand identity to align TWA’s new goals.
An updated website focused on booking flights, online check-in, and refreshing a brand identity that keeps the core TWA essence alive.
The research phase began with understanding the users and the market. To help me discover why I asked questions such as:
I analyzed TWA’s direct and indirect competitors to understand better what features TWA’s website must have, what would be nice to have, and what could set them apart from their competitors.
After data compilation and finding commonalities between my interviews, a clear picture of my users' wants, pain points, and needs emerged.
Having uncovered the common wants, needs, and pain points among those I interviewed, the next step was to create a user persona that embodied those traits. Creating a persona that behaved like a real person allowed me to keep design decisions aligned with user goals.
Meet Mateo, a 31-year old freelance photographer living in LA. Mateo is constantly flying and booking his next flight due to his work. What he is looking for is:
I created an empathy map that followed user research and aligned design decisions and functionality with Mateo’s needs and wants. The empathy map also served as reference material for making sure design decisions matched user needs, wants and goals.
Using Mateo’s logic and thinking, I moved on to creating a user flow on how he would quickly book a flight, including checking out as a guest, returning user, or new user. I considered how certain pages could relate to each other and how Mateo could successfully book a flight hassle-free.
The next step was defining the interface and the information hierarchy at a basic level with the research done. These wireframes quickly sketched ideas to create a low-fi wireframe of the critical pages. These wireframes helped lay the groundwork for the design phase in which the UI design and the brand fresh would come together.
I recruited three participants who had booked flights through in-person testing, despite the pandemic and lockdown. I fleshed out my lo-fi wireframes into mid-fi ones to prototype on users. After completion, I followed up with questions on each page and documented each success, concern, and observation.
Before allocating more time to a fully fleshed-out hi-fi mockup, a prototype of the mid-fi wireframes was created using InVision and in-person usability tests were conducted with otter.ai
You're flying from Los Angeles to Orlando from March 19-28. The departure time from LAX is 10:15 am and returning from MCO at 5:45 pm. You are flying in main cabin. Please make sure you are fully completing the booking flight.
After the first round of testing, the feedback about user flow and confusion was noted and made adjustments to the following hi-fi prototypes.
TWA’s wireframes are ready for take-off. A new UI Kit reflects TWA's rich and well-crafted history but with a sleek face-lift.
The UI kit was created with inclusivity in mind and ensured anyone who wanted to explore could do so. The typeface Inter was selected for its warmness and legibility at small sizes. The myriad colors of the sky informed the final color palette.
After establishing TWA’s new brand, the next step was to apply it to the hi-fi prototypes and the revisions noted in user testing the mid-fi prototype.
Through the Research and Testing phases, I learned that users were frustrated with the typical airline sites due to their complex language and confusing ticket prices. Several users expressed that they preferred aggregated booking sites such as Google, Kayak, and Momono because they can see price fluctuations in real-time and be notified by email of price changes.
Establishing a simplified user interface is key as the booking flow had a 100% completion even with non-native English speakers. Adding the options for price tracking directly allowed users to compare prices, make informed purchases, and bring them back to book through TWA versus another platform.
These insights, along with other implemented decisions such as TWA’s policy in COVID-19, flying in the pandemic, flexibility of rescheduling, and canceling flights, align both users’ goals and TWA’s business goals and sets the brand apart from its competitors. TWA is well on its way to launching in a pandemic and post-pandemic world.
Due to time constraints, there are things to iterate and refine down the line with more time and a larger budget. I would like to:
