Delta Airlines: Name Change Tool

Delta Airlines: Name Change Tool

Delta Airlines: Name Change Tool

Tool Designed to Correct SkyMiles Members' Name

Tool Designed to Correct SkyMiles Members' Name

About Delta Airlines SkyMiles Program

Delta Airlines is one of the largest airlines in the world, operating a massive fleet of more than 800 aircraft. With over 100 million members, the SkyMiles loyalty program allows customers to earn and redeem points for travel, upgrades, and other perks. The airline serves over 300 destinations in more than 50 countries, making it a popular choice for both domestic and international travelers.

Problem

Variations in users' names across their SkyMiles account, passport, or government-issued identification often result in lost reward miles and created confusion about their accounts

Variations in users' names across their SkyMiles account, passport, or government-issued identification often result in lost reward miles and created confusion about their accounts

Variations in users' names across their SkyMiles account, passport, or government-issued identification often result in lost reward miles and created confusion about their accounts

Name discrepancies increased the workload of airline customer service representatives, which took away time from them to focus on more complex issues and improve overall efficiency

Name discrepancies increased the workload of airline customer service representatives, which took away time from them to focus on more complex issues and improve overall efficiency

Name discrepancies increased the workload of airline customer service representatives, which took away time from them to focus on more complex issues and improve overall efficiency

Approach

Create a self-service tool in which users could correct any mistakes in their name for their SkyMiles Account

Create a self-service tool in which users could correct any mistakes in their name for their SkyMiles Account

Create a self-service tool in which users could correct any mistakes in their name for their SkyMiles Account

Improve the customer experience, as it provides a convenient and streamlined solution for a common problem, leading to greater satisfaction and loyalty.

Improve the customer experience, as it provides a convenient and streamlined solution for a common problem, leading to greater satisfaction and loyalty.

Improve the customer experience, as it provides a convenient and streamlined solution for a common problem, leading to greater satisfaction and loyalty.

Process

Discovery
UX and UI Design
Development
Reflexion

Project Details

Project Duration: 6 Months
Team: 1 Scrum Master, 1, TPO, 1 Product Owner, 8 Developers, and 1 QA

Platforms and Tools

Platform: Responsive web for desktop, tablet, and mobile
Tools: Figma and Version One

  1. Discovery

1.1 Understanding the User

In order to understand the user's problem better, I developed a series of questions to better understand the solution needed.

Where would the user use this tool
How do we verify the user's identity?
Has the user had a recent name change?
How many times can the user change names?
How do we target this to only users that need this tool?

1.2 SkyMiles Platform Insights

Through research, key insights were found in order to help address the problem.

  1. Currently, users cannot change their name after creating their SkyMiles account, only during the sign-up process

  2. Users must use their legal name in order to correctly check their identity if needed

  3. Straightforward navigation is needed for users to be able to correct discrepancies within their account

  4. Consideration for different cultural names' intricacies needs to be taken into account

  1. Design

2.1 User Flows

During the brainstorms for the design, I created a user flow for the different types of scenarios and users. It was imperative to give the user choices to correct their name, and the ability to adjust any mistakes made in their profile.

2.2 Designing User Suggestions and Free Input

The modal design consisted of a 2 step process for the user to adjust the name associated with their account.

In step 1 Users have the option to use their current Skymiles name, Secure Flight Passenger Name, or to enter their correct name

In step 1 Users have the option to use their current Skymiles name, Secure Flight Passenger Name, or to enter their correct name

In step 1 Users have the option to use their current Skymiles name, Secure Flight Passenger Name, or to enter their correct name

If neither the SkyMiles name nor Secure Flight Passenger Name is correct, the third option allows users to input their first, middle, and last name, along with prefix and/or suffix.

If neither the SkyMiles name nor Secure Flight Passenger Name is correct, the third option allows users to input their first, middle, and last name, along with prefix and/or suffix.

If neither the SkyMiles name nor Secure Flight Passenger Name is correct, the third option allows users to input their first, middle, and last name, along with prefix and/or suffix.

In step 2 users receive feedback to verify the accuracy of the name entered regardless of the option chosen.

In step 2 users receive feedback to verify the accuracy of the name entered regardless of the option chosen.

In step 2 users receive feedback to verify the accuracy of the name entered regardless of the option chosen.

2.3 Error Prevention with Disabled State

Users can self-edit their names only once. Therefore, presenting users with disabled states when they receive the modal offers significant advantages to prevent mistakes.

The disabled states serve the following purposes:

Preventing users from selecting an incorrect name, which could result in errors.

Preventing users from selecting an incorrect name, which could result in errors.

Preventing users from selecting an incorrect name, which could result in errors.

Providing feedback to users that they need to make a choice in step 1 and proceed to step 2.

Providing feedback to users that they need to make a choice in step 1 and proceed to step 2.

Providing feedback to users that they need to make a choice in step 1 and proceed to step 2.

Ensuring that users cannot submit without choosing their identity.

Ensuring that users cannot submit without choosing their identity.

Ensuring that users cannot submit without choosing their identity.

Allowing users to exit the modal freely by clicking on the "x" icon or outside the modal.

Allowing users to exit the modal freely by clicking on the "x" icon or outside the modal.

Allowing users to exit the modal freely by clicking on the "x" icon or outside the modal.

2.4 Transforming Name Change Modal to Mobile Design

To integrate the modal into a mobile platform, we had to make some design changes while keeping the desktop version identical in a mobile-friendly way.

The following decisions were made:

Shifted from a 2-step column design to a vertical 2-step design to fit the content on the mobile screen.

Shifted from a 2-step column design to a vertical 2-step design to fit the content on the mobile screen.

Shifted from a 2-step column design to a vertical 2-step design to fit the content on the mobile screen.

Retained the font, colors, and items to ensure consistency and accuracy between devices.

Retained the font, colors, and items to ensure consistency and accuracy between devices.

Retained the font, colors, and items to ensure consistency and accuracy between devices.

2.5 Adapting Modal for Delta Design Systems

Incorporating the same design system used in Delta.com, the modal includes various elements such as fonts, colors, form fields, dropdown menus, checkboxes, CTA buttons, and sizing.

This system ensures consistency and coherence across all Delta.com products, resulting in a polished and cohesive user experience.

  1. Development

3.1 Developer Handoff

Once my design proved to be successful, I began to annotate the notes needed for the developers. The team made sure that all the behaviors in the design were described as how they should react on the website. Sizes for text and spacing were also added to the designs so that developers have an accurate reference of sizes.

3.2 Placement of Modal and Behavior

The most effective way to provide users with this tool was by presenting it in the form of a modal when they landed on the SkyMiles page.

The following decisions were made:

The modal would only be displayed to users whose SkyMiles name and primary passenger name did not match.

The modal would only be displayed to users whose SkyMiles name and primary passenger name did not match.

The modal would only be displayed to users whose SkyMiles name and primary passenger name did not match.

The modal would clearly explain to the user the reason for the mismatch and provide a 2-step process to fix it.

The modal would clearly explain to the user the reason for the mismatch and provide a 2-step process to fix it.

The modal would clearly explain to the user the reason for the mismatch and provide a 2-step process to fix it.

To prevent users from submitting an incorrect name, the modal would initially appear in a disabled state.

To prevent users from submitting an incorrect name, the modal would initially appear in a disabled state.

To prevent users from submitting an incorrect name, the modal would initially appear in a disabled state.

  1. Reflection

4.1 Reflecting on the Project

This project provided me with valuable insights into the design systems, requirements, and behavior of various design elements throughout the website. It was a great opportunity for me to collaborate closely with developers, project owners, and quality assurance co-workers, which helped me establish strong working relationships with them.

4.2 Looking Ahead

In the future, as I develop new relationships and gain knowledge, I will be able to enhance my problem-solving abilities and design skills for the airline industry. This, in turn, will increase my efficiency in working with Delta.com products, allowing me to create and refine future designs for other projects, as well as provide support to developers when needed.

Read more of my case studies

Delta: Lazy Loading
Delta: AMEX Benefits
Helio Sleep
Theneo API

View All Case Studies

Read more of my case studies

Delta: Lazy Loading
Delta: AMEX Benefits
Helio Sleep

View All Case Studies

Read more of my case studies

Delta: Lazy Loading
Delta: AMEX Benefits
Helio Sleep

View All Case Studies

Home
Works
About
Contact