Danielle Dillon

REI Co-op Mastercard

 
REI Logo
 

REI Co-op Mastercard

Increasing successful card applications with a card conversion to a different bank, complete with a new digital experience.

View live site ➪

Responsibilities

User Flows, Wireframing, Prototyping, User Testing, Web Design

Team

Product Design Manager
Content Designer
Product Manager
Back End Developer
Front End Developers
QA Engineer

With collaborators and stakeholders from the Capital One Team, design agency Shore for illustration, REI’s brand and creative team, REI’s Mastercard Program Team, REI Membership Program Team

 
 
 

Background

The REI Co-op Mastercard is only available to REI Co-op Members. It’s a way for members to engage more deeply with the co-op, by earning even more rewards not only on REI Co-op purchases, but also on everyday purchases outside of the co-op.

After much research and evaluation of REI’s current credit card offering, the team decided to relaunch the card with a new bank, new benefits, and a new digital experience.

The current card offerings were found to be not incredibly compelling or competitive to users. Additionally, the digital experience to apply was not clear about the membership requirements, and created friction in an important decision moment.

We entered the design process for this new platform with a few goals in mind:

  1. Strengthen the connection between the card and membership, establishing it as an exciting member benefit

  2. Reduce friction in the application flow to increase card applications

Tactically, this looked like:

  1. Creating the promotional pages within the REI membership ecosystem on the site, rather than on its own microsite as it was

  2. Creating a pre-application membership verification flow that helped users get to the happy path

User Flows: Pre-Application Membership Verification

In order to submit an application, the user must:

  1. Be an REI Co-op Member

  2. Have an REI.com account with their membership linked

  3. Be signed in to that account

Given existing friction between memberships and accounts, which are separate records that must be linked by the user, we must help the user get to the happy path. We know that we have the potential for many combinations of factors to present in a user arriving on this application:

  1. Signed in / Not signed in

  2. If not signed in: Has an account / Does not have an account

  3. Member / Not a Member

  4. Membership linked to an account / Membership not linked

So, in collaboration with my product design manager, I created flows to represent the path of every combination. Each combination has different jobs to be done in order to successfully apply:

  1. Not signed in? Sign in or create an account.

  2. No membership? Join the co-op or link an existing membership.

  3. Error? Troubleshoot or contact support.

 
 
 

Zoomed out view of the user flows

 
 

Site Promotional Pages

In addition to the application page, we decided to build out 3 additional pages as part of the card experience:

  1. An overview landing page featuring key benefits and links to additional pages

  2. A benefit details page including all the longer-form details about each benefit

  3. An FAQ page with detailed answers about benefits and tactical support

 
 

Iteration and Refinement

The benefit hierarchy was determined by the program team based on research and business strategy. Through reviews with leadership and iterative testing with users, I refined the structure and content of each page to promote these benefits and provide pathways for users to answer their questions.

Previous iterations promoted co-op membership more prominently to non-members, since those users needed to be sold not just on the card, but on the membership they’d need to purchase in order to apply. But those users conflated co-op membership with being a cardmember. They read co-op benefits as additional card benefits, or saw the membership as an add-on to the card, rather than the other way around. Given this insight, in combination with data revealing that miniscule numbers of memberships and card applications are formed on the same day, we determined that membership acquisition was not a primary goal of this page, and reduced the section’s prominence.

Final Designs at Launch

The main landing page included personalized content to surface a membership CTA to users who were not signed in or were signed in without a membership.

 
 

Benefit detail page and FAQ page were kept straight-forward and informational. The user had already received the overview from the landing page and was opting in to more details.

 
 
 
 

Post-Launch Learnings and Enhancements

After launch, I ran another series of user tests to supplement the fresh data flowing in our dashboards. Clicks through to the verification page, and successful applications were above our targets, and we were thrilled! But we did uncover some learnings to inform future enhancements:

  1. Users weren’t clear on what form rewards took. Gifts? Points you had to reach a threshold to redeem? Cash back?

  2. Users weren’t sure they’d spend enough at REI to make the card worth it.

  3. As expected, clicks on links geared toward non-members (creating an account) were incredibly low (<1%).

In response to these learnings, we determined 2 follow-up initiatives:

  1. Create an interactive rewards calculator to:

    • show how rewards take shape as they’re earned – a dollar-value equivalent to any other payment method

    • show how quickly rewards can add up, not just from co-op purchases, but from everyday purchases

    • tell the story of how rewards are redeemed – as payment on co-op purchases

  2. Further minimize the add-membership section on the main landing page, to reduce any confusion about co-op membership and card membership, and focus on existing members.

Both of these initiatives are currently in development.

 
 

© Danielle Bushrow 2023