United Airlines Website Redesign
Role
Lead UX Designer
Timeline
4 Weeks
Tools
Figma, Jira, Zeplin
Company Overview
United Airlines, one of the world's leading airlines, operates an extensive global network that connects passengers to destinations across the Americas, Europe, Asia, Africa, and Oceania. With its headquarters in Chicago, Illinois, United is committed to providing a superior travel experience, offering innovative services, and maintaining high standards of customer service.
Project Overview
Introduction
As a User Experience and Interaction Designer for United Airlines, I led the redesign of over eight key pages on United's website. My role involved collaborating with stakeholders, a development team, and a project manager for each page, managing the design process for multiple pages concurrently. The objective was to create a cohesive, accessible, and user-friendly experience across United's digital platforms.
Approach
-
Visual Design Principles: The redesign leveraged principles such as hierarchy, contrast, balance, and whitespace to create visually appealing and functional interfaces. Hierarchy ensured that the most important information was prominent, while contrast and balance made the pages visually engaging.
-
Brand Consistency: United's new design system was meticulously integrated across all redesigned pages, ensuring a cohesive look and feel. This reinforced United's brand identity and provided a seamless user experience across all touchpoints.
-
Accessibility: Accessibility features were a top priority, with the design adhering to WCAG standards. Features like adjustable text sizes, keyboard navigation, and screen reader compatibility were implemented to make the website accessible to all users.
-
Responsive Design: Each page was designed with a responsive framework, ensuring optimal functionality and appearance across desktop, mobile, and tablet devices. This approach provided a consistent user experience regardless of the device used.
-
Enhanced Navigation: Navigation was improved through intuitive components and skip links. This made it easier for users to find information quickly and navigate the website efficiently.
-
Alignment and Grid: Alignment and grid systems were essential in redesigning, ensuring a structured and harmonious layout across all pages. Using a consistent grid system, we achieved visual balance and coherence, making it easier for users to navigate and absorb information. Proper alignment ensured that elements were visually connected and aligned with the brand's aesthetic, enhancing the overall user experience.
-
Content Strategy: An integral part of the redesign involved a comprehensive strategy to ensure all website content was clear, concise, and user-focused. Collaborating closely with copywriters, we developed a content plan aligned with United Airlines' brand voice and messaging. We implemented SEO best practices to improve the website's visibility on search engines and crafted content to be engaging and informative, providing users with the information they needed while enhancing their overall experience.
Design System
Military Benefits
Page Overview
The primary goal of the Military Benefits page is to provide clear, comprehensive information about the exclusive travel benefits and discounts available to active-duty military members and veterans. This page enhances the user experience by streamlining travel planning, reducing stress, fostering loyalty, ensuring that military members feel valued and supported throughout their travel journey, and reinforcing United's dedication to serving those who serve.
​
Key Improvements
Use of Images: Images help to quickly signal the page's relevance to military members, making the information more engaging and accessible.
​
Varied Text Size: Incorporating more heading sizes into the design improves the page's readability, creates a structured layout, and highlights important information through visual hierarchy.
​
Use of Color: The light grey and light blue sections effectively break up the information and highlight associated content for the user.
Adding icons: The use of icons creates visual cues that help users find information and break up large sections of text. They also highlight key information and simplify complex ideas.
​
Use of lists: Bulleted lists help break down information into manageable pieces, making it easier to scan.
​
Accessibility: The width of the paragraph text does not extend past 748px, improving the accessibility of the page. Text that extends across the full width of the screen can be more difficult to read and comprehend.
Before
After
Designing for All Screen Sizes
The Military Benefits page was designed to be responsive across various screen widths. The information is stacked for smaller screens to maintain readability, while the margins adjust dynamically to fit the screen width. Images scale down proportionally to avoid clutter and maintain visual appeal, and larger text sizes decrease to ensure a balanced and accessible layout. This responsive design approach ensures that users have a seamless and intuitive experience, regardless of their device, improving accessibility and engagement across all platforms.
Desktop
Tablet
Mobile
United Club Access
Page Overview
​The United Club and United Polaris Lounge Access page aims to provide comprehensive information about lounge access benefits and eligibility, enhancing the user's travel experience. By detailing access criteria for different types of passengers, including premium cabin customers, club members, military personnel, and frequent flyers from partner airlines, the page helps users understand their access rights and how to utilize these benefits effectively. The content improves user experience by ensuring travelers can quickly locate information on accessing lounges, thereby enhancing their comfort and convenience before and between flights. Another business goal for this page is to increase premium cabin customer conversions by highlighting the amenities of the clubs and lounges.
​
Key Improvements
Page Navigation: By using a top navigation menu instead of skip links, users easily found information and accessed key content quickly. This improved engagement by encouraging users to explore more content; the skip links moved users down the page. However, the menu allowed users to easily switch between different lounges and compare.
​
Simplified Charts: Through user research, my team identified areas where users were confused about lounge access, required documentation, and guest policies. I redesigned the charts using more straightforward language to help users find the needed information quickly.
Before
After
Interaction Design & Prototyping
Using Figma, I created interactive prototypes of the web page, showcasing the menu navigation for both desktop and mobile screens. The prototypes also illustrated the hover states for the buttons. Creating a prototype allowed me to demonstrate to stakeholders how the page would function and ensured a smooth handoff to developers.
_gif.gif)
_gif.gif)
Aircraft Accessibility
Page Overview
The Aircraft Accessibility page aims to provide clear, detailed information about the accessibility features available on United Airlines planes. This page helps users understand the specific accommodations, such as movable armrests, wheelchair-accessible bathrooms, and cargo door sizes that can accommodate wheelchairs. By offering a tool that allows passengers to view the accessibility features of their specific aircraft, the page ensures that travelers with disabilities can plan their trips with confidence and ease.
The content on this page significantly enhances the user experience by making it easy for passengers to determine if their needs will be met on their flight. This transparency fosters a more inclusive travel environment, allowing all users to navigate their journeys comfortably and with peace of mind.
Key Improvements
Dropdown Menu: The redesigned page features a dropdown for users to select a plane and view the accessibility information. By displaying information only for the selected plane, the page becomes less cluttered and overwhelming, improving readability and minimizing cognitive load. Users can directly access the information relevant to their specific flight, providing a more tailored and relevant experience. The dropdown format is more mobile-friendly, ensuring a seamless experience across different screen sizes and devices.
​
Enhanced Chart Design: By adding columns that explain to users which rows have moveable armrests, wheelchair-accessible bathrooms, and the size of the cargo doors, customers with accessibility needs can quickly find the information they need and know which planes can accommodate them.
​
​Frequently Asked Questions: Adding frequently asked questions (FAQs) improves the user experience by providing quick and easily accessible answers to common inquiries, reducing the need for users to contact customer support. FAQs help users find relevant information efficiently, enhancing their overall experience and satisfaction with the website. Additionally, they can clarify complex topics, guide users through processes, and address potential concerns proactively, ensuring a smoother and more informed interaction with the site.
​
Varied Text Size: Incorporating more heading sizes into the design improves the page's readability, creates a structured layout, and highlights important information in the chart through a visual hierarchy.​
Before
After
Before
After
Airport Check-In Counter
Page Overview
The Airport Check-In Counter page aims to streamline the check-in process for travelers by providing precise and detailed information on the locations and operating hours of check-in counters across Canada. The page ensures travelers can easily find and access the services they need by listing specific counters in major cities and countries, along with their exact locations and hours of operation. The inclusion of operational details, such as opening times and the importance of checking flight status, helps users plan their arrival efficiently and avoid unnecessary delays.
​
Key Improvements
Dropdown Menu: By allowing users to select a state or region, the page becomes less cluttered and overwhelming, improving readability and minimizing cognitive load. Users can directly access the information relevant to their location, providing a more tailored and relevant experience. The dropdown format is more mobile-friendly, ensuring a seamless experience across different screen sizes and devices.
​
Use of Images: Images help to quickly signal the page's relevance, making the information more engaging and accessible.
Pro Tips: Traveler pro tips are featured throughout the website to emphasize key information, enhancing brand consistency.
Use of Related Links: Adding related links to the bottom of the page enhances the user experience by providing easy access to additional relevant information. This helps users quickly find related resources, such as airport maps or check-in processes, without having to search for them separately. It streamlines the user's journey by centralizing important information, reducing frustration, and improving overall navigation on the website.
​
Accessibility: Increasing the text size on the airport check-in page improves accessibility by making the content easier to read for users with visual impairments or those who struggle with smaller text.
Adding icons: Icons create visual cues that help users find key information, break up large sections of text, and overcome language barriers.
Before
After
TravelBank
Page Overview
The TravelBank page offers users a comprehensive guide to managing and using their TravelBank accounts. The goal of this page is to ensure MileagePlus members can fully utilize their benefits while also encouraging other customers to join the MileagePlus program.
Key Improvements​
Adding Skip Links: Skip links help users navigate the page efficiently and find the information they need, while also providing an overview of the available content.
​
Charts and Icons: The redesigned page incorporates charts and icons to enhance readability and minimize cognitive overload. Charts present complex information in a clear and concise manner, making it easier for users to understand their TravelBank benefits, balances, and expiration dates at a glance. Icons serve as visual cues, guiding users through the page and highlighting key features and actions.
​
Improved Copy: The redesigned page offers more detailed information, helping users understand how TravelBank works and the various ways it can be utilized. This enhancement increases user engagement and reduces the number of support requests. Additionally, the page includes links for users to self-service their TravelBank needs, providing a more streamlined and user-friendly experience.
​
Use of Images: Images quickly signal the page's relevance, making the information more engaging and accessible. They evoke emotions and inspire users by showcasing what they can do with their TravelBank cash, such as allowing a child to see more of the world.
Before
After
United Club Amenities
Page Overview
The United Club Amenities page aims to enhance travelers' airport experience by highlighting the various features and services available at United Club locations. By providing clear information about these amenities, the page helps users maximize their time at the airport, making their travel journey more comfortable and productive. Another goal for this page is to convert United customers into business-class customers who can take advantage of these amenities.
Key Improvements
Use of Images: Using images in place of icons on this page helps show users what the United Clubs have to offer. This page showcases multiple lounge locations, food, drink, and the comfortable lounging they can experience at the airport. This conveys what the lounges have to offer more quickly than the previous design.
​
Clearer Copy: By using straightforward headings like "Free food and drinks" instead of "Treat Yourself" and "Wi-Fi" instead of "Be productive," users can quickly identify the available amenities without needing to read through all the text. This approach makes it easier for users to see the amenities offered at a glance, enhancing the overall user experience.
Before
After
Premier Upgrades
Page Overview
The MileagePlus Flight Upgrades page is designed to inform MileagePlus members about the different upgrade options available to enhance their travel experience. The page helps users understand how to use their miles or PlusPoints to upgrade their seats on United and Star Alliance flights by providing precise details on the types of upgrade awards, how to request them, and the waitlist priority. The content simplifies the process of upgrading, allowing users to make informed decisions and maximize their benefits, ultimately leading to a more comfortable and enjoyable journey.
Key Improvements
Charts and Icons: The redesigned page incorporates charts and icons to enhance readability and minimize cognitive overload. Charts present complex information clearly and concisely, making it easier for users to compare the types of upgrade rewards and the options to upgrade an existing reservation. Icons serve as visual cues, guiding users through the page and highlighting key features and actions.
​
Waitlist Priority: By clearly explaining how the waitlist process works, United enhances transparency, helping to reduce user frustration. This clarity also incentivizes customers to consider upgrading their account type to improve their chances of securing an upgrade.
Before
After
Premier Status
Page Overview
The Premier Status page is designed to inform users about the benefits and requirements of achieving Premier status within the MileagePlus program. Its goal is to outline the various levels of Premier status, the benefits associated with each level, and how members can qualify. By providing clear and detailed information, the page enhances the user's travel journey by helping them understand how to maximize their rewards, track their progress, and take full advantage of the perks that come with Premier status.
What I Learned
Redesigning these web pages gave me a range of valuable skills essential for effective website design and meeting business objectives. I honed my ability to work within an established design system while ensuring consistency and brand alignment across all touchpoints. I developed strong communication skills, particularly in collaborating closely with developers to ensure seamless implementation, and in managing projects efficiently to meet deadlines.
In addition to working with stakeholders, I learned how to present multiple iterations and solutions to design challenges, justifying my design decisions based on user research and always advocating for the best possible user experience. I became proficient in using design system and component documentation to maintain brand consistency, and I contributed to the evolution of our design library by proposing new components for review and future use.
Evaluating Website Design Changes
When redesigning a website, it's crucial to establish clear goals and metrics to evaluate the success of the project.
​
Website Metrics
Using metrics like bounce rate, session time, conversion rate, and button clicks, I can compare how a redesigned page performs compared to the original design and make changes based on those metrics.
​
User Testing
User testing allows our research team to observe how users interact with a page, including usability, navigation, pain points, and overall experience.
​
A/B Testing
For testing calls-to-action and layout changes, A/B tests can help us determine which site performs better with users.
​
Heuristic Evaluation
I use heuristic principles to review the page against established usability guidelines. This helps me determine any usability issues that could affect the user.