Deferred Payment Plan

Payment & Checkout

Role

Product Designer
User Researcher

Timeline

July - April 2021

Platform

Macys.com

Tools

Adobe XD, Miro, UserTesting
View live site

Overview

A digital experience that would allow customers to make purchases of Furniture, Mattresses & Jewelry and pay in smaller amounts over a time period, thereby increasing their purchasing power and growing the company's top line.

RESULTS

With the Credit Card Financing Plan(CCFP), Revenue Per Visitor saw a growth of 3.4%. Average Order Value also increased by 2%. CCFP made 12.4% of total orders and lifted Macy’s card orders by 1.4%. The expected annual revenue growth due to the introduction of CCFP was $16.3M.

Challenge

To understand the customer's experience and pain points of using a credit financing plan on Macy’s Credit Card while purchasing mattresses, furniture & jewelry, and propose a solution to improve their overall experience.

What I Did?

  • Led the design for both desktop and mobile web version of the Deferred Payment Plan
  • Discovered the pain points of the users and bridged the critical gaps in functionality
  • Drove product leadership alignment on designs across domains
  • Research team collaboration to define and execute all research activities
  • Design consistency to Macy’s style guide

Currently Live

Goal

KPIs

Research

Medallia Reports

  • “Difficulties in reaching customer support to avail credit financing plan.”
  • "Accessing the credit financing plan is so confusing. You have to always get on a call with Macy’s Customer Care Service."
  • “I get things are crazy because of covid, but there has to be a way customers can avail credit financing.”

Competitive Analysis

The goal of this competitive analysis was:
  • To identify how our competitors are using the messaging to lead the users to available Finance options
  • To understand how most competitors are showing finance at up-funnel & also at all levels
  • To understand how the messaging related to finance could be aligned with Klarna

Insights

Recommendations

  • Most retailers display dollar value at PDP & even at all levels
  • West Elm & Wayfair explain Financing with easy price breakdowns & details with a modal
  • Terms & Conditions are either hidden under modals or are provided in a link at different levels
  • West Elm makes their Terms & Conditions easier to read & understand
  • Home Depot & Best Buy use Citibank as a suggested payment option like Macy's
  • Most retailers allow applying for finance across the funnel except Best Buy & Home Depot
  • Showing the value of financing at PDP level can increase customers' confidence to apply for Macy's financing or Credit Card
  • Introduce a simple Learn more modal with easy price breakdowns & details to make it easier for customers
  • Display finance messaging throughout PDP, Bag & Checkout to enhance customers' experience
  • We can even simplify the readability of Macy’s Terms & Conditions to make it easier to read

Problem Statement

Customers can find the credit financing plan details on the Product page, but cannot select a payment plan at Checkout. They had to rely solely on customer care to avail Macy's credit financing plan on qualified items.

Solution

Wireframes

Design explorations for Mobile Web Experience

Based on the research findings, I started working on the designs, which included various versions of Modal & tab designs for suggested payment at Checkout.

Product Above threshold ($1,999) - Multiple SEATS)

Product below threshold ($499) – Single SEAT

Usability Test

1st Round User Testing

After working on the first phase of designs, we paired up with the UX Research team to conduct a usability test to evaluate the new Deferred Payment Plan designs.

Study Goal

  • How users perceive the tab design experience
  • How users interact with ‘Pay Now’ & ‘Pay Later'  
  • How they navigate to ‘Pay Now’, if a financing plan is selected at ‘Pay Later’

Applying Consumer & Stakeholder Feedback

Gathering all research insights & reviewing internally with company stakeholders, we created an experience that was more aligned with consumer needs as well as Macy's current checkout experience.

Checkout

MOdal

2nd Round User Testing

We conducted a 2nd round of moderated user research via usertesting.com to understand its usability among 42 users.

Study Goal

  • Understand general impressions of the checkout process with financing options
  • Determine if users understand Pay Over Time and their navigation with the financing options
  • Identify any pain points or confusion with the copy describing financing options

Task Findings

Regulatory & Compliance Review 

The user research provided some solid findings to make further iterations. After having several brainstorming sessions with my team, and conducting Rapid Testings, we had discussions with our Citi partners, who advised us with major copy changes.

This was one of the biggest challenges we faced since the legal copy was redundant and might be overwhelming for users. I worked with the Product & Copy team to make some design decisions to simplify the verbiage and improve our designs for a better user experience for both above and below-threshold scenarios.

Applying Consumer & Legal Feedback

Product Details Page

  • Substituted the term ‘Special Financing’ with ‘12-month financing’ based on customer research
  • Made ‘Learn More’ CTA consistent with Klarna
  • Removed valid dates suggested by Citi; this is found on modal
  • Removed the amount of purchase because this verbiage appears immediately below the price

Modal

  • Rephrased & rearranged the suggested payments to make it easier to understand
  • Removed ‘valid thru’ verbiage
  • Divided the last paragraph into two small paragraphs for clarity
  • Removed ‘Apply’ CTA (based on feedback received from Citi partners) from the modal

Checkout

  • Removed tab design to avoid confusion among users with respect to “No Special Financing” pre-selected under ‘Pay Over Time’ & to avoid Edge cases, especially under mixed bag scenario
  • Included ‘Terms and Conditions’ within Checkout page based on research findings
  • Removed ‘no interest’ from subhead, & show it on its own line
  • Print button added as requested, outside scroll box
  • Added FAQs link for additional queries

Edge Cases and Additional Scenarios

Edge Cases

Additional Scenarios

At Macy’s, when an item is below a threshold, we display a message on the product details page for the purpose of up-selling a product. Hence, added the versions under a threshold, which included:

  • Suggestion to add a minimum amount to the purchase in order to qualify for financing
  • Valid through dates
  • Info about adding items that only qualify for financing
  • For available SEATS (Special Event Account Type), we show the highest no. of months

Final Designs

After several rounds of discussions with Citi partners, this was the final solution for the deferred payment plan that we went with for both MEW (Mobile Experience Web) and Desktop. There were no major UI changes, however, I made a few copy changes in Checkout:

MEW Designs

Product Above Threshold ($499)
- Single SEAT
Product Above Threshold ($1,999)
- Multiple SEATs
Product Below Threshold ($499)
- Multiple SEATs
Product Below Threshold ($499)
- Single SEAT

Desktop Designs

Product Above Threshold ($1,999) - Multiple SEATs
Product Above Threshold ($499) - Single SEAT

Design Hand off

Once our designs matured enough, I used XD’s Inspect to hand off the designs to the dev team. I also collaborated with the dev team to help them understand the interaction & reasons behind design decisions for both MEW and Desktop.

One of the challenges I faced while collaborating with the Dev team was that they wanted to continue with the designs currently in production where the payment methods are stacked up and the details are revealed after selecting a payment method.

I had to convince them that the new deferred payment plan experience would make this complicated for the users and they might feel lost or not understand all the details based on their selection. Hence, in order to have a seamless user experience, we need to divide each payment option into different sections.

Learnings