Flight Experience
Shorten booking and check‑in time with clearer, mobile‑first steps
Project description
This project was aimed to redesign the flight experience for Alaska Airlines and to imagine what the ecosystem would look like with a mobile ecosystem and responsive web design.
Background
Alaska Airlines is a widely used U.S. airline with a loyal customer base but an inconsistent mobile experience. With over half of travelers now booking flights via smartphones or tablets, it's critical for airlines to deliver seamless digital experiences.
This project focuses on reimagining the digital experience for Alaska Airlines by creating a responsive MVP website that works seamlessly across desktop, and most importantly mobile devices. The goal is to design high-fidelity flows for searching, booking, and checking in to flights, with a mobile-first design approach
This project was part of Design Lab’s bootcamp curriculum. Working as the solo designer, I acted as both the UI/UX designer and UX researcher, and I led every phase of the project.
Timeline
From explorations to final designs in 4 weeks while working with multiple projects at the same time
Tools Used
Figma, Figjam, Google Suite, Phantom AI
Problem
Booking flights and checking in on mobile devices has become integral into how users search, book, and check in. However, the primary methods that most people do these tasks are through a native mobile app, or through a third party site like Google flights or Kayak. This leaves vulnerability in the native desktop and the mobile web experience.
POV
I approached this project as someone overwhelmed by the mobile experience and wants to learn the easiest way to book, search, and check in using their phone and their browser. I wanted to design an experience that felt intuitive, organized, and seamless.
Process
This category details the step-by-step approach taken during the project, including research, planning, design, development, testing, and optimization phases.
Research & Planning
Conducted market research & user interviews to identify existing booking and check in app challenges and user preferences.
Define & Design
Synthesized the research and began defining the problems that the interviews and research presented. Defined user persona, outlined key features based on user needs and market trends, and created user and task flows.
Ideation & Implementation
With all of the knowledge, I iterated and built the visual design and brand. I built the logo, component library, and started building & testing low-fidelity wireframes.
Testing & Optimization
Conducted rigorous user testing across various devices and platforms to ensure compatibility and performance. Had the user go through the profile flow, and share feedback. Gathered user feedback and iteratively optimized the app based on usability testing, metrics, and user satisfaction.
Research & Planning
Since I was focused on creating a better responsive web experience, I wanted to understand what some of the biggest pain points were for users that reither prevented or deterred them from using the mobile site. I wanted to learn how users interacted with the interface so that I could build something intuitive for users.
So I focused on three key questions:
(1) What about the flight user experience feels laborious?
(2) What could we streamline to make the process easier to use on the phone?
(3) Is there anything worth prioritizing or anything triggering that would deter the user from using the mobile site?
Methodology
In order to learn more about users, I thought through different research methods such as user interviews, customer surveys, and contextual inquiries. For the purposes of this exercise, I went with user interviews.
I categorized and conducted five different user interviews, conducted secondary research on the different competitors in the space, and synthesized information the different learning styles that my users used as well as anything that may inform me as I build my web and mobile experiences.
Key Insights from
User Research
Many preferred certain processes to certain devices. For example, searching and booking was far more used on desktop or laptops and check in was used on the phone due to its convenience of adding a boarding pass to the phone after the check in process.
It was interesting to see how many different booking modalities each airline used. I found that certain airlines had components or features that were good but lacked in other areas that others made up for.
It was also interesting to see how much more robust the UX was when advanced search was used rather than booking on the main landing page.
Another thing I found interesting is a lot of the users I interviewed liked using google flights or other third party sites to book instead of booking directly on the website.
Competitive Analysis
My research revealed that while the booking and check-in flows were fast, users ran into roadblocks around fare clarity, personalization, and accessibility. Business travelers wanted efficiency and better fare explanations, families needed clearer child and seat grouping options, and infrequent travelers required more guidance. These themes helped me define the core problems to solve.
Define & Design
From my user interviews, I validated different use cases for booking and different methods that people preferred booking their trips through.
From these different patterns, I thought about how could I create an experience that took both sides into consideration. This led me to my problem statement:
Problem Statement: How might we create a booking and check-in experience that is fast for frequent travelers, yet clear, personalized, and accessible enough to support families and first-time flyers with confidence?
To better organize user insights into actionable structure and insight, we created user personas to help us better understand the user's preferences and make sense and discern patterns. After some early level testing, we then built our our feature roadmap with the features that we saw the users valued the most. We then built a series of user and task flows that mapped out the booking, searching and check in processes as we saw that these were the use cases that would be the most valuable for this project with all of our user feedback. All of these processes helped us define our problem, and design accordingly, which informed our wireframing, prototyping, and testing.
User Persona
We created two personas by the end of our research. The personas were based on the differing behavior patterns that I noticed when I was interviewing users. The users could be separated into two categories:users who were time sensitive and wanted to book quickly, or users who booked in bulk for their families or for leisure.
Features
For this project, I designed a cross-device travel experience that prioritizes booking on desktop and check-in on mobile responsive web. The must-have features focus on trust, clarity, and convenience, including seamless booking across devices, transparent fares and baggage policies, family/group booking, and real-time syncing with Apple Wallet/Google Wallet. These ensure the core flows are simple, reliable, and user-friendly.
Beyond the essentials, I explored value-added enhancements such as profile-based preferences, progress indicators, and loyalty visibility to streamline planning. To create moments of delight, I included interactive seat maps, boarding pass previews, and personalized upgrade offers. Finally, future opportunities like AI chatbot support, third-party integrations, and loyalty gamification can further deepen engagement. Together, this roadmap balances usability and scalability, ensuring a smooth foundation for users today while leaving space for future innovation.
From there, I built out the booking flow for desktop and the check-in flow for mobile, focusing on where each device fit best. The final designs aimed to balance speed for frequent flyers with clarity and reassurance for families and first-time travelers. This project taught me the value of designing for different traveler mindsets—and how tailoring flows to the right device can create a smoother, more inclusive travel experience.
User Flows
Based on those problems, I started ideating. I explored ways to make fare rules more transparent, tested flows that simplified family bookings, and looked at personalization touches like remembering seat preferences. For check-in, I brainstormed how to make mobile interactions faster and clearer, with features like family-friendly seat grouping and stronger accessibility cues.
After our research and defining stage, we felt confident to implement our vision. This was a unique exercise because there was an already established design system that we were working with. Since we knew that we needed to build a design experience for both mobile and web experiences, I envisioned building components that looked good on either device, and this was the vision I used to create the branding and low fidelity wireframes.
Branding
Branding & UI Components
For this project, I took an already well established design system of Alaska Air’s system and made some changes to it.
This UI component library was designed to create a consistent, scalable, and user-friendly system for Alaska Airlines’ booking and check-in flows. The components emphasize clarity and efficiency, with clean input fields, intuitive stepper controls for passenger selection, and streamlined date pickers that reduce friction in complex travel planning.
Built with both desktop booking and mobile check-in in mind, the library ensures cross-device consistency while supporting user-specific needs, such as family bookings, loyalty sign-ins, or special options like traveling with pets. By standardizing navigation bars, selectors, and action buttons, the system reduces cognitive load and helps users focus on their goals.
Ultimately, this component library provides a reliable foundation for future iterations, balancing functional necessities with thoughtful touches that make the experience more personal and trustworthy.
Low Fidelity Wire Frames
Alaska UI Kit
This is the design system I used that incorporated elements for the UI & component library
Low fidelity Wireframes
Reduce the number of steps and interactions to book a flight and check in.
