EDU Modal

Retail Team, May 2019 – Present

Role

I worked with a user researcher, a team of engineers, and a product manager from beginning to end—helping to conduct initial research and defining problems, crafting prototypes for additional research, scoping down the work, executing on design, working on improvements, and working the engineers on polishing the final product.

EDU Modal showing 3 terms

What is it?

The educational modal is one of the first touchpoints someone comes across on a merchant site

EDU modals on various merchant sites

We always knew that our educational modal is one of the first places in which people discover and learn about Affirm. It’s something that begged to be researched and redesigned, and when we finally got the time and opportunity to tackle it, we did.

Through research, we found that the 2 ways people discover Affirm are through our ALAs, and googling Affirm.

Initial questions

What information do people want to see when they click on the ALA?

Before we made changes, we wondered:

  • When people make a considered purchase and see “As low as…” messaging, what information about Affirm do they want or need to see next?
  • How can we help potential Affirm customers better understand what we offer, and make an informed decision if we’re for them?
  • And, of course, how can Affirm increase our application rate?

Initial research

Everyone wanted to see the numbers

So, we talked to 6 folks planning a considered purchase for their home ($500+) that had never used Affirm before and showed them the ALA pricing, a common instance of our EDU modal, and the first screen of our application.

We found that new-to-Affirm participants needed information about our product that isn’t yet prominent or clear enough in the EDU modal: Interest, terms, and total cost.

Our current EDU modal doesn’t break down what people want to see most: the numbers. All participants wanted to see numbers (interest, total cost, terms) when they saw the ALA, but most felt unsatisfied with the amount of information they got from the EDU modal. Most also felt that value props like “quick and easy” didn’t resonate.

Testing

We focused on showing how we calculate terms and interest

I started with concepts around what we saw users ask for—focusing on showing more of the math around terms, interest, and total amounts.

It was also important for us to include some brand value as well, since we found that not a lot of people know who/what Affirm is, and are usually Googling us in another tab.

Below are some wireframes around my ideas.

Wireframe exploration around EDU modal concepts

After walking through and discussing the concepts and ideas behind wireframes, we decided to iterate further on the first 2 of the concepts. These presented strongest and we were most interested to see what would come out of testing these.

Components

Rethinking the math

Term card exploration

The 3 terms is what defines Affirm—it's what we're known for. As soon as people see the term selection screen, they know that it's Affirm. Since we discovered through our research that people really wanted to see the math, I thought, why not show them terms or sample terms up front? 

With that thought, I decided to rethink our current term card design, and try to make the math more clear. The main components I wanted to focus on were the monthly payment amount and hard dollar amount for interest. Through previous research, we learned that these two numbers are the numbers are the ones people care most about.

Components

Less focus on value props—simpler is always better

Value prop placement

We also learned, through our initial research, that the value props didn't really resonate with people. Some said they felt gimmicky, and others said that "quick and easy" is something everyone says nowadays. With that information, I set out to put the focus more on the terms and numbers and try to play with the value props in a way that would still make them visible, but secondary.

Results

Simpler is better

We decided to do another round of user testing before we decided on a final design. Throughout the testing, we received positive feedback on the redesign. People really resonated with seeing the terms upfront. They loved that they could use the added input as a calculator to see sample terms they would get when going through with the purchase.

Users also had better understanding of the value props. Because they were placed in relation to their prospective areas, people were more likely to prequalify. "Checking your eligibility won’t affect your credit score." was most important to users, and placing it at the top so that it was the first thing they read, converted users. With a few additional small visual tweaks, this version will be shipped and become Affirm's new EDU modal.

Reach out to me if you'd like to learn more.

Updated June 2019