top of page
MetLife Payment Center
The Business Problem:
Data analysis revealed customers enrolled in automatic payments have a significantly higher probability of remaining customers for 5+years than those who pay their premiums manually. Additionally customers could not make a payment online or through Customer Support which resulted in lapsed and cancelled policies that could have remained in force if past due customers had an ability to easily make a payment.
​
The User Needs:
After analyzing Call Center data, the number one query customers had when calling was how do they make a payment online. This also revealed itself to be an issue when we assessed the website analytics and site feedback data. On the site, users could see they had a payment due, but no means to make that payment except to mail in a check.
​
The Solution:
A responsive, card-based design that allows customers to view and pay bills, schedule and edit automatic payments, search payment history and maintain payment accounts.
​
My Role:
UX and Creative Lead. We worked in design sprints passing assets to Dev as completed. We conducted usability testing at the end of our sprints and made improvements in scheduled future releases.
Competitive Research, Data Analysis, Requirements Gathering, User Stories, User Research, Wireframes, Prototypes,
Interaction Design, Usability Testing, QA Testing, Management of Creative and Copywriting team.
Key Functionality
Card Flips
The main cards on this page flip to reveal further details and push the cards beneath them down. This allows the customer to view more information without leaving the page.
​
The first card on this screen shows the flipped state which is also indicated with a fold on the top right of the card.
Add Payment Account
A drawer was created for customers to add, edit and delete payment accounts without leaving the Payment page.
​
Make a Payment Review Page
The page shows the user the details of the payment they are about to make before they submit it - allowing them to go back and fix any errors.
​
Make a Payment Confirmation
The page provides the user with all the details of the payment they just submitted, along with a reference number for their records.
​
In cases where the user is making a one-time payment, a strong call to action to enroll in automatic payments appears in the right rail, as well as in the "what do you want to do next" links at the bottom of the page.
Documentation
A lot of documentation was prepared to illustrate the dynamic "faces" of the cards and transactions that take place on a card flip.
​
Responsive Design
Each page and card was designed in tablet and phone views to ensure the best responsive experience across platforms.
​
Next Project >
bottom of page