Wayfair/Citibank Credit Card Integration

Educate users about Wayfair’s two new branded credit cards and enable them to submit applications online—under very tight timelines

Overview

Wayfair partnered with Citibank to launch a new credit card program in September 2020, inclusive of a new application, landing page, acquisition hooks, and purchase flows—all needing to be designed by my team. Moreover, each experience and design artifact needed to pass a formal legal review by Citibank.

With all of the designs and content we were producing, we risked:

  • Losing track of which versions had been approved and which hadn’t

  • Falling behind in completing all of the required deliverables before our hard launch deadline

Problem

Tl;dr: documentation, documentation, documentation.

In addition to coaching my direct report (a content strategist) in developing user-centric copy within the bounds of compliance, I created, maintained, and broadly shared robust documentation of all of our messaging and deliverables that unlocked:

  • Transparency into experiences and messaging that were legally approved and ready to build

  • The ability to scale user-centric copy cohesively and efficiently across the funnel

  • Visibility into the full XD team’s process, review timelines, and delivery timelines, so our teams could build quickly and confidently

Solution

After launch, the credit card application completion rate was 78%, far exceeding the goal of 70%. The credit card program also yielded over 800,000 new cardholders in the first year after launch.

Project details

Role

I was the XD Lead for the team and project.

I was responsible and accountable for all in-product deliverables, including the credit card application, acquisition hooks, card management surfaces, and landing pages.

I was also responsible for all design reviews internally and externally, including a thorough accessibility review with Citibank’s compliance team.

Timeframe

January - September 2020

Wayfair project team

  • Content Strategists

  • UX Researchers

  • Product Designers

  • Product Managers

  • General Managers

  • Engineers

  • Graphic Designers

  • Copywriters

  • Analysts

  • QA

  • ...and over 20 other partner teams at Wayfair

Citibank integration team

  • Product Managers

  • Engineers

  • Marketing Leads

  • General Managers

  • Partner Managers

  • Legal

Focus areas

Cross-company collaboration

As the XD lead for the integration, I worked closely with integration team at Citibank to align with legal and compliance teams, secure approvals for user flows, and confirm accessibility of end to end experience.

Scalability

I developed a SSoT (single source of truth) for all onsite messaging, which included 450+ text strings across 26 touchpoints on a single platform alone, which a) unlocked content creation at scale and b) reduced copy inconsistencies (and thus legal risk).

Project management

I created XD-specific Gantt chart for integration to ensure we built in time for internal and external design reviews, iteration, and user testing.

User-centric content

I coached my direct report, a content strategist, in creating user-centric copy, iterating based on feedback from internal stakeholders and Citibank’s legal team, and presenting her work effectively.

Process at a glance

Because we had hard deadlines for UAT, legal compliance reviews, reviews for accessibility compliance, and the credit card launch, I first created and managed a Gantt Chart and workback plan specific to the XD team to ensure that:

  1. We would meet our hardest-of-hard deadline to ship by midnight on September 10.

  2. We left sufficient time for QA and UAT.

  3. We left sufficient time for internal design reviews and iterations, as well as reviews from Citibank’s legal team.

XD team timeline

Because the initiative had so many internal and external stakeholders, it was important to anchor on a body of user-centric experience principles. This helped us avoid shipping an incoherent experience that was crafted by committee. It also helped us avoid defaulting to copy that was legally compliant or business-focused, but not in the service of the user.

I led the Loyalty and Financing team—a cross-functional team structured with an STO (single-threaded owner) model—in aligning and defining content and experience principles for the initiative.

These principles would later comprise part of our overall team mission, purpose, operating model, and experience principles—our operating system, in a sense.

Content and experience principles

I then created a Single Source of Truth (SSoT) using Google Sheets that contained all approved messaging for the experience, inclusive of 26 touchpoints and nearly 500 individual strings of copy. I also coached one of my direct reports, a content strategist, in updating the SSoT as her messaging was approved by Citibank’s legal team.

Each sheet contained:

  • All approved messaging for each touchpoint

  • Descriptions of the content type to ensure that our engineering team used the right design system components when building (e.g. “Headline,” “Subcopy”)

  • Design mocks with sample copy in context

  • Screen-reader copy

It wasn’t fancy, but it worked.

Single source of truth for copy

One of the launch requirements was to document the accessibility and ADA compliance of each core credit card flow across all four platforms (desktop, mobile, iOS, Android).

While Wayfair’s design system is consistently vetted for compliance (WCAG AA being the baseline), the bank required a substantial amount of documentation to this effect.

I quarterbacked the audit and documentation process across engineering, QA, and XD by a) identifying gaps, b) looping in engineering and additional design resources, and c) requesting additional QA and engineering support - empowering a cross functional tiger team through role definition and structural alignment.

I also developed a template for our documentation for Citi that explained Wayfair's approach and philosophy towards a11y, as well as spaces for our engineering and XD teams to contribute their analysis of each touchpoint and platform's accessibility.

Accessibility compliance review

The end to end flow

  • Because users would submit a single application to be considered for two credit cards, we provided a mobile-optimized UI for side-by-side comparison of both cards

    • The known tradeoff here: we didn’t provide a way for high intent users to only apply for the credit card they wanted

    • Because Citi’s data showed that high intent users typically qualified for both credit cards anyway (and could thus choose what they wanted regardless) we aligned on accepting this constraint in the user flow

  • We picked our battles: we knew any effort to refine and simplify legally approved language would be a challenge, so focused our efforts on simplifying language higher in the funnel for users who needed information before making a decision to apply

    • An example: we were able to simplify proposed language from Citibank about what constitutes one’s Total Annual Net Income on the initial page of the credit card application

  • Throughout, we provided clarity and transparency about the impact of application or prequalification on one’s credit score, because we’d learned from user interviews that users are often concerned or confused about whether financial applications will introduce a hard credit check

  • All error messages or blocking states - system errors, declines, account issues - included multiple paths of resolution, whether navigating back to Wayfair.com or reaching out to support

Notable design decisions

What I’d do differently

Updating copy based on feedback and legal requirements involved a lot of toil for engineering. Int the future, I’d advocate for a CMS and more robust content governance practices to both manage our copy in a repository and avoid burdening already-strapped engineering resources to change messaging.

Fortunately, after this project, my teams across Loyalty & Financing began the process of migrating content into Contentful (CMS).

For future projects in regulated industries like finance, I now know to work with compliance reviewers earlier in the content and XD ideation process to reduce churn and back-and-forth communications about onsite messaging.