Case Study

Mileage Plan Join Form

Alaska Airlines
Senior Product Designer, E-Commerce
Customer Loyalty

Role
Lead e-commerce product designer responsible for customer acquisition and retention within the Alaska loyalty program.
Problem
Legacy join form was bloated. Cross-product stakeholders had for years been increasing the amount of required data pulled from users during Mileage Plan enrollment, and they maintained an iron grip on those requirements. Users were left to navigate a long and complex form with an outdated UI, that resulted in a heavy cognitive load.
Solution
Take a holistic approach to gathering user data contextually as users engage the various parts of the customer journey post sign up, solving cross-product business requirements for data collection and providing users a shortened form. A phased approach will step into the holistic approach in order to get buy-in from stakeholders. First phase updates an outdated UI to align with current form best practices. Second phase is a multi-step conversational experience with less required fields, and solves for gathering additional user data post-sign up. Final phase is a short single step join experience that focuses on a contextual progressive approach for gathering user data.



Previous Mileage Plan join form in all its glory. Long, an abundance of fields, and a heavy cognitive load from multiple sections and titles and labels.

Competitive analysis learnings showed industry trending towards minimal info collected on join forms. Double fields for verifying password replaced by single fields with show/hide, same for verifying email address. Social media sign up common place. In-field floating labels in place of above field labels. Having a conversation with the user about why info is collected. Reducing cognitive load by chunking related info into a multi-step experience. Using the progressive method to collect info as a user engages more in the site, versus upfront during sign up.

Highlighting areas to be modified on existing join form experience. Including reducing focus on SEO text, lightening the visual complexity and cognitive load of the sections, and simplifying the opt-ins.

UI Patterns: Floating labels for field titles, surfacing hint text on field activation, showing field validation.

UI Patterns: User adds zip/postal code, additional prepopulated fields then surface based on their entry.

Phase 1 solution that includes all previously required fields, but with greatly reduced cognitive load via in-field floating labels, prepopulated fields, combined opt-ins, updated UI, and new layout.

Phase 2 multi-step approach mobile view. With this next phase, cognitive load is further reduced by grouping related fields into steps. The user is engaged in a conversation to better understand why providing information is of value. Additionally, a skip option appears mid-way that allows user to sign up without completing all of the fields. This is the first part of the negotiation with cross-product stakeholders to reduce requirements. Introduced at this point is a "Flight Readiness" experience that communicates with users that their profile (and therefor their ability to book and load a plane) is not complete.

Flight Readiness indicator serves two valuable purposes. First, it's a tool to communicate with users how they can improve their experience by completing their profile in order to be ready to book and load their next flight. By including the TSA language, we surface that the additional info is required by security in order to travel, thereby alleviating potential concerns about providing personal info. Second, the indicator solves the business requirement of gathering any user data removed in the shortened form.

Phase 2 multi-step approach desktop view. Note the single field entry point to the experience. First step records the users email address, allowing us to easily contact them should an error occur.

Flight Readiness indicator as surfaced during the checkout path. This progressive contextual approach prompts the user to include the info added in the checkout contact information form to their mileage plan profile in order to make future bookings easier.

Phase 3 single-step approach. With the flight readiness indicator in place across various sections of the site, allowing users to add additional info to their profile at any point in their experience, we can now reduce the required fields down to just four.

Before and after comparing existing join form experience with the proposed single-step approach.