Prototype & Design

Digital Payment Engine

Brief

Design a Digital Payments Interface that AIG can present to various levels of sale teams to utilize across the entire AIG digital ecosystem. The DPI should allow the user to add/manage credit card(s) and/or bank account as well as, set up recurring payments. The interface should be product neutral: a white label solution.

Design Process

competitive analysis

Our team started with the research of best practices of existing payment platforms. We analyzed specific elements, features, transitions, and interactions that we thought would work on our project. The goal was to create an experience that is simple, is easy to use, and has a clean interface.

Our team conducted an onsite (Charlotte, NC) white-boarding session with the dev team and stakeholders to establish sprint deliverables. We had two days to create lo-fidelity wireframes to present to stakeholders. These wireframes illustrated multiple user journeys, interactions, and transitions.

user flows

adding credit card info or bank account

make a payment

enrolling in auto-pay flow research
During the competitive research, our team realized that the ability to set up recurring payments (a requirement that wasn't on the original brief) was important for a better user experience. We took the initiative of conducting some research into the space of recurring payments, or what we call Auto-Pay.

We analyzed different recurring payment/auto-pay enrollment flows belonging to various banking institutions: Chase, Citi, American Express, and Bank Of America. We chose Citi because it was best aligned with the AIG business model/user needs.

citi enrolling in autopay

Iterations

dashboard

1st iteration

  • The user needs a view where they have an overview of their payments and payment options.
  • The main CTA is the alert that a payment is due. That will lead the user to the payment process.
  • The tools was initially a business requirement as a section where future implementations could reside.

2nd iteration

  • Here we started to implement AIG design guidelines and played around with alternate layouts for the dashboard.

final iteration

  • We made a UX decision that since this was a payments engine, and therefore should be payment focused. The user should be provided an overview of all payments to each respective policy, with quick access to payment details. 
  • The CTAs are clear and actionable.

make a payment

1st iteration

  • The user needs a view where they have an overview of their payments and payment options
  • The main CTA is the alert that a payment is due. That will lead the user to the payment process.
  • The tools was initially a business requirement as a section where future implementations could reside.

2nd iteration

  • Here we start to implement AIG design guidelines and making the visual design more aligned with existing products.
  • Initially we had Payment Date before Payment Method, but user testing showed that most users didn’t recall the Payment Date after selecting the Payment Method.
  • Actionable and important elements would be in AIG Blue.

final iteration

  • We wanted to simplify the page more by minimizing the other titles to give the Payment Amount more focus.
  • Changed the payment amount color to green=color of money.
  • The field titles scale to the middle.
  • Widened the fields to 680 px to accommodate for longer field entry data.
  • Added a close icon so the user can exit the flow at any point.

SELECT BANK ACCOUNT

1st iteration

  • The user is clear on task at hand. The use of color and iconography increases emphasis.

2nd iteration

  • Payment amount in blue for clarity.
  • Removed other pieces of information to enable user to concentrate on immediate task.
  • Made icons larger for increase in clarity.

final iteration

  • Adopted the card visual style from the Dashboard page to make the visual design language more cohesive.
  • Offering Checking and Savings as options saves the user a click
  • Made the payment due date a more important element in the flow.

ADD CHECKING ACCOUNT

1st iteration

  • Use of radial buttons for Checking or Savings account.
  • Use of red circular indicator so the user knows where to find the routing number/account number on their check.
  • Bank logo populates in the field when the correct routing number is entered.
  • Confirmation check marks outside of form field to let user know that the information they entered is correct.

2nd iteration

  • Moved away from radial selector buttons for a more contemporary button design.
  • Titles scale to the middle of top of form field.
  • Bank logo is placed on left side of form field so user can know which bank is being used right away.
  • Instead of using “X”, green checkmarks communicate selection as well as, confirmation.

final iteration

  • We wanted to simplify the page more by minimizing the other titles to give the Payment Amount more focus.
  • Changed the payment amount color to green=color of money.
  • The field titles scale to the middle.
  • Widened the fields to 680 px to accommodate for longer field entry data.
  • Added a close icon so the user can exit the flow at any point.

ADD credit card

1st iteration

  • Name is already pre-filled.
  • Street Address utilizes Google Address Autocomplete API.
  • Four different card security code examples are given, because they appear on different locations depending on which company the user has.
  • Button is in inactive state until all fields are filled with valid data.

2nd iteration

  • Use of AIG Blue to show selected state/field
  • Changed the term “Expiry” to “Expiration”, because users didn’t understand the term right away during user testing.

final iteration

  • Simplified flow in the same manner as the Add Checking Account flow.
  • Simplified the security code example. Moved the example into the field for visual relationship and showing only the necessary information for the user to digest easily to complete the task.

ENROLL IN AUTOPAY

1st iteration

  • Radial selection tool
  • The user comes to this page selecting “Other Amount” in the Payment Amount dropdown menu.

2nd iteration

  • Movement towards implementing brand guidelines.
  • All CTA buttons are green.

final iteration

  • Instead of taking the user to another page, the user can enter the amount directly into the field when they select “Other Amount”. It makes it easier for the user to complete the task.

user testing

Tool

UserZoom

participants

6 Females | 3 Males

findings

  • Participants remarked that they liked the Pay Now bar on the Dashboard
  • Most participants missed changing the date due to the order of the fields
  • All participants missed changing the date the payment date for both flows.
  • A participant remarked that he would like to confirm the payment amount.

conclusion

Back to the top

More Experiences

yellowheart app

The world's first blockchain ticketing wallet

relationshipscience

See how you connect to important decision makers

RELSCI RADAR

SAS Contact Intelligence Tool

AUDIYO!

The audio social media app

Contact Me
View Resume