Citi Balance Transfer Module Case Study

Redesign the balance
transfer module

Fusion Best Buy

My role | 2012

  • UX design
  • Prototypes

The Balance Transfer redesign was part of the larger Fusion project. Fusion was a complete front-end overall for a white label credit card servicing platform. Our solution is a responsive single page web application with a modular design system. The new system would be fast and functional and provide users with a linear experience no mater which device they are using. Our accessibility team helped ensure that each component and module and the app itself was accessible. Modular components and modules maintain design consistency and provide the user with recognizable UI patterns throughout the app. On this project I worked on:

  • Creating Prototypes
  • Wireframes

THE PROBLEM

Customers have difficulty completing online balance transfers resulting in too many costly help center calls.


USER RESEARCH

We surveyed people about their credit card use to create a credit card customer journey map.

The journey is made up of a series of subprocesses:

  • Marketing
  • Pre-activation
  • Customer service website
  • Customer service call center
  • Payments
  • Collections
  • Quality / Operations
  • Retention

The Fusion project would touch each subprocess (except for the call center) and in each area the Fusion-based product would make meaningful improvements.


THE OPPORTUNITY (for Balance Transfers)

The Fusion modular design system provided us with modular components that we could reuse to keep the design of each component of the application consistent. For the Balance Transfer Module I re-used buttons and navigation components, but I also designed new components to complete the design.

The challenge of redesigning the balance transfer module was was to make the experience as usable as possible while still conforming to the requirements of the existing back-end system that would support the feature. The new module would need:

  • An add payee step that would trigger validation on the backend
  • A remove payee option
  • Terms and conditions
  • A risk call
  • Change offer flow
  • Confirmation

Exploration and Iteration

Flow Whiteboard Sketches

I sketched out the initial flow on a whiteboard.


Balance Transfer Module Whiteboard Sketches

I sketched out the initial design for the balance transfer module based on the required flow and using existing modular components where they made sense.


Marked up Balance Transfer Wireframes

We taped up wireframes on the board alongside the flow and marked them up to explore the edge cases. Some of the edge cases we discovered:

  • How do you edit a previously entered transfer?
  • Do we show link without promotional tie to it?
  • Do only promotional offers go to Promo Balance Page?

White boarding helped us develop consensus about our direction. It also helped us define questions we had for the client with respect to their business and technology capabilities.

More Marked up Balance Transfer Wireframes

Technical discovery

Flow Whiteboard Sketches

In a waterfall process technical discover should be done before design begins, but in our agile process we would ideate, then use those questions and thoughts to gather more information from the back-end system.

While white boarding we decided that a big goal was to reduce the number of required fields, the client agreed that some of the existing fields were unnecessary but it was not easy to figure out which fields were needed for technical reasons. Some of our questions:

  • All of the fields are required and generate error messages on submission. Does the system actually need all of them to validate a creditor name?
  • Account type is required. Is it actually needed to validate the creditor or can it be removed?
  • Does the database have address information for all major creditors? If so, if the system validates an account at a major creditor in the database can we supply the address information as a radio button and hide/suppress the address fields?

User Flow

Balance Transfer Main Flow

We optimized the happy path (above) by building three main screens: entering creditor information, verify (and add more) and submit.

Balance Transfer Change Offer Flow

The change offer flow (above) allows users to change their offer without losing their progress.


Sample Wireframes

Balance Transfer Wireframe

Adding a “Before you Begin” screen (shown above) was added to remind users to be sure they had the documents they needed before they got started.

Balance Transfer Wireframe 2

We added an autocomplete search box (above) to help users populate creditor fields with the information acceptable to the back-end system on the first try.

I created 36 pages of detailed wireframes to design and document the appearance and behavior of the balance transfer module. I also maintained and updated the entire 1,200 page specification document [PDF] that includes the balance transfer module.


Prototypes

Accordion Prototype (Home Depot)

In addition to working on the balance transfer module, I collaborated closely with our developers and other designers to refine the design of an accordion component by building a prototype.

I started with Axure but as the complexity of the component grew, it was easier to manually edited the JavaScript that Axure had created.

Diamond preferred prototype

I created also created a prototype of a landing page for the Diamond Preferred card (above) to demonstrate sticky headers.


Hi-fidelity designs

Final Designs (Sears)

Adam Zeiner took my wireframes and created the final mockups shown above.


OUTCOME

Results and what I learned:

  1. Our team delivered a responsive white label solution customized for multiple retail partners.
  2. The acquisition portion of the Fusion project resulted in a 30% increase in application completions.
  3. The improvements to the servicing component lead to increased card usage as well.
  4. I learned how to adapt to changing requirements.
  5. I learned attention to detail and developed my problem solving and analytical skills.

Wireframes:

White Label Experience Specification: Wireframes [PDF]
Best Buy Appendix: Wireframes [PDF]
Sears Appendix: Wireframes [PDF]
Brooks Brothers Appendix: Wireframes [PDF]

Prototypes:

Accordion Prototype: HTML / JavaScript
Diamond Preferred Prototype: Axure

Live Web app: Best Buy Credit Card Sign on.


#ui #interaction #web_app #accessibility