responsive website design | app Design | Prototyping | Wireframes

Adding extra security for skymiles members by creating a modern, efficient, omni-channel Multi-facotr authentication experience.

The Key asks

Overall:

  • Integrate the MFA process with an outside vendor (Ping)

Setting Up MFA:

  • Ensure a SkyMiles account has been created before allowing users to set up MFA methods

  • Setting up and verifying a users primary email address is required prior to setting up alternative methods

Creating a cross-channel experience:

  • Give users the ability to set up email, phone numbers and the Fly Delta App as verification methods

  • Add the ability to scan a QR code to set up Fly Delta as a verification method

  • Push users to use the Fly Delta App as a verification method to increase app downloads and adaption and give users the most secure way to verify ID

  • Utilize push notification and native iOS tools when applicable

Project Breakdown

Impacted Channels/Platforms:

  • Desktop & Mobile Responsive website

  • Fly Delta app

Impacted Flows / Areas of Focus:

  • SkyMile Enrollment

  • Setting Up MFA After

    • Logging into Delta.com / Fly Delta App

    • From marketing emails

    • After purchasing a flight

  • Account Recovery

  • SkyMile Profile

 

enrollment

Process & Final Designs

Currently, Delta uses security questions and answers as their method of account recovery and security. To make the experience more secure, MFA is now replacing security questions and answers.

To ensure the transition is as seamless as possible, with the launching of MFA the enrollment form had to be updated to no longer give SQ&A as an option for users to utilize. Instead we were tasked with adding a way to start setting up MFA methods at the end of enrollment.

The key asks from the client were that the creation of the SkyMiles account had to occur first and that the process not get elongated a lot to avoid dropoff. The result was a 5-6 step process for enrolling in SkyMiles while also setting up 2 verification methods.

We first started the design process by creating mid to low fidelity wireframes to solidify the flow prior to going into design iterations. We then had 3 rounds of design reviews for both app and website designs.

The final designs include:

  • Removal SQ&A from the enrollment form

  • Automatically setup the users email address as a verification method

  • Giving users the option to set up a phone number of the Fly Delta app after submission of the enrollment form

  • Providing a QR code for desktop users to set up the Fly Delta app as a verification method

  • Allowing users to set up another method later, this is NOT a required enrollment step

 
 

Account Recovery

Process & Final Designs

Account recovery consists of setting up a new password if a user forgot their current one and also being sent their SkyMiles number/ username if they have forgotten their login.

Currently, in the account recovery flows, users have to answer the security questions & answers they set up during enrollment. While SQ&A are being rolled out, MFA is now being added as the way to verify identity prior to changing a password. For all new SkyMiles members and all existing member who go through the process of setting up MFA, this is the new flow they will encounter.

The key asks from the client were to make the experience as seamless as possible with few clicks. The result was a 2 click process for verifying identity.

We first started the design process by creating low fidelity box wireframes to solidify requirements and flows. We then had 2 rounds of design reviews. The account recovery process is the same for the app and website so different designs were not needed.

The final designs include:

  • Removed SQ&A from the account recovery process

  • Verifying ID prior to changing a password to remove the ability for any hackers/ bad actor to change a users password without their consent

  • Surface all methods that a user has set up (up to 5 methods)

  • Utilizes native push notifications

  • Provides a success animation for users to provide extra reassurance

 
 

Managing MFA within profile

Process & Final Designs

We want to give existing SkyMiles users multiple opportunities to set up MFA and also need to provide a way for users to manage the methods they have set up. This led to a new section within a users SkyMiles profile.

In this new sections, users will be able to set up MFA for the first time, add additional verification methods, remove verification methods, and change with verification method is primary. In a future state of MFA, the primary method will be launched on default so a user will no longer need to select which method they want to use to verify their ID.

The key asks from the client were that a user only add or remove a method, no editing, that it is clear to users in the collapsed state what can be set up, and that only 5 methods can be set up in total.

We first started the design process by creating low fidelity box wireframes to solidify requirements and flows. We then had 2 rounds of design reviews designs for the app and website.

The final designs include:

  • Removed SQ&A from profile once email has been set up as a verification method

  • All methods are managed in one space

  • Verifying ID Prior to seeing all the methods that are set up to remove the ability for any hackers/ bad actor to change MFA methods without a users consent

  • The 3 categories of methods are shown in the collapsed state of profile and the primary method is clearly shown

  • Provided 3 separate add buttons for each category to allow for a seamless addition process and removed the need for a user to select which type of method they wish to add

  • Modals to ensure that a user has intended to remove a method (to cut down on accidental clicking)

 
 

Reflection

The biggest learning opportunity for this project was dealing with frequently changing requirements and technical limitations. The integration of the Ping system resulted in requirements taking longer to solidify than normal. This led us to changing out process slightly and honing in solely on flows at the beginning. This allowed us to present recommended flows to the client and for them to ensure this worked with the Ping integration and that there were no technical limitations. Solidifying those first allowed us to not rework designs multiple times.

Another key learning opportunity for me was being the main design lead on this project. The team consistent of a project manager, product manager, a client services member, myself (the UX lead) and then another designer. I was the only designer to remain on the project for the entire year. This led to me getting to know the project, clients and technical side of it very well and become an expert. This was a heavily technical project and a complex issue, but I was able to lead the team to a seamless end experience.

 

Overview

Time: 1 Year

Tools: Figma and After Effects

Skills: UX/UI, Wireframes, App Design, Web Design, Prototyping, Presentation