Case Study

Mileage Plan Join Form

Alaska Airlines
Senior Product Designer, E-Commerce
Customer Loyalty

Lead e-commerce product designer responsible for customer acquisition and retention within the Alaska loyalty program.
Existing join form was bloated due to cross-product stakeholder requirements for collecting user info on sign up. Users were left to navigate a long and complex form with an outdated UI and heavy cognitive load.
Provide users a shortened form and solve for cross-product requirements by phasing in a holistic approach to gathering user information progressively during the customer journey post sign up, such as contextually during the ticket booking path.

Previous join form with its heavy cognitive load stemming from multiple sections and titles, an outdated UI, and content noise.

Competitive analysis learnings showed industry trending towards minimal info collected on sign up. Double fields for verifying password replaced by single fields with show/hide, same for verifying email address. 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. Social media sign up common place. Using a post sign up progressive approach for collecting user info.

Highlighting areas to be modified on existing join form experience. Modifications based on the competitive analysis, and include reducing focus on SEO text, enhancing the UI to lighten the visual complexity and cognitive load of the sections, and simplifying the opt-ins.

UI pattern: Contextual display with floating labels for field titles, hint text on field activation, field validation.

UI pattern: Progressive disclosure with prepopulating fields based on previous field entry streamlines the initial view and reduces user input.

Phase 1 iteration includes all previously required fields but introduces an updated UI that reduces the cognitive load, provides in-field floating labels, prepopulating fields, combined opt-ins, and new content layout.

Phase 2 iteration tests the multi-step flow. This approach hopes to prove that the cognitive load is further reduced by grouping related fields into steps, during which the user is engaged in a conversation to communicate why providing information is of value. 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" widget that communicates with users that their profile (and therefor their ability to book and load a plane) is not complete, offering a way to easily add their info.

Flight Readiness indicator communicates with users the value of completing their profile, and provides a means to do so. It also allows for a shortened form by proving we can meet cross-product business requirement for gathering user info post sign up.
Flight Readiness indicator widget as surfaced during the checkout path. This progressive contextual approach prompts the user to include the info just added in the checkout contact information form to their mileage plan profile in order to make future bookings easier.

Usability testing
  1. An a/b test was conducted on the layout of the form content with very surprising results. The test version had the value proposition on the left and the form on the right. This was in contrast to the control, which mimicked the existing form with the content flipped. The control outperformed the test by 20%. The content was flipped back to remove the variable and a follow up test run. The new form showed statistical significance and was moved into production.
  2. Next up, Geurilla testing at the airport. Using an Invision prototype, we sat with users waiting at their gates. Each session started with questions, followed by observation as users went through the prototype. Learnings validated that people understood the value of providing their info, they were okay with the amount of info asked during all steps, and that having multiple steps added no friction. Based on this, we reduced the multi-step to just one follow up page.
  3. Finally, a study was conducted. Learnings provided more granular feedback on the UI and a deeper understanding of perceptions of the loyalty program around the voice and language being used.

Movie of an Axure prototype showing the user flow of the Phase 3 iteration based on learnings from the usability studies. Includes error states and porting of user entered data from one page to the next for a realistic testing experience. This iteration shows a shortened one step join experience that includes a follow up page with optional profile fields.

Screenshots of the phase 3 iteration pages. First shows the shortened one step form. Second shows the optional follow up page with additional profile fields.

Before and after comparing existing join form experience against the shortened form landing page.