AmFam processes more than 250,000 payments per month. Using E-Commerce design patterns, I increased premium payment efficiency by 40% and reduced abandoned payments and call center volume.

Retention: Billing & Payments Team (Customer facing)

Team/Role

Platforms

Product Manager
Product Owner
UX Designer (me)
Android Developer
iOS Developer
Two Web Developers

Figma/Figjam
BrowserStack
Salesforce
Miro
Jira
GA4

Tools

Responsive Web
Android
iOS

The Problem: American Family’s pay-a-bill flow was not converting, resulting in late premium payments and unusually high phone calls for bill payment customer support.

BEFORE: (multiple-complicated forms)

The overly complex review payment screen forced customers to complete a second form.

UX Research: As part of the retention team, I interviewed call center reps and listened to billing-related customer calls. I discovered that people found the existing flow complicated and opted to call in.

The bill payment flow was complicating an already disliked task. Customers are cost-sensitive and don’t look forward to paying their insurance bills. After a comprehensive Audit, I found duplicate UI, which caused additional and unnecessary cognitive load.

BEFORE: (duplicate UI caused confusion)

The previous flow allowed customers to edit their payments using two different design patterns.

Increase conversions using these primary UX/UI Goals

One form only

Consolidate both forms on both pages into a single set of clear payment options.

Simplify the flow

Reduce cognitive load to increase the likelyhood of customers completing their payment so they don’ call in.

Ecom design patterns

Make the payment process feel less like you are paying an insurance bill.

The Solution:

Incorporated e-commerce design patterns, familiar to most users. During UX research, customers quickly understood our e-commerce (edit cart-style) prototype.

Step 1) The new flow adheres to brand guidelines and has only one form. Customers select which bills to pay, their payment method, and their payment date. I added a dynamic dollar amount (within the button) that shows customers their real-time payment total.

Step 2) The new “Pre-receipt-style” review payment screen offers an e-commerce-inspired Edit Payment button. Similar to a standard edit cart button. Removing duplicate forms and offering customers a single button to quickly go back and change payment selections (if needed). Check out the early prototype used in UX research.

⭐️⭐️⭐️⭐️⭐️

Result: Consolidating both forms into one, removing duplicate UI, and this little Edit Payment CTA was all it took. (thank you, e-commerce)

The new user experience increased successful payments, reduced abandoned payments, lowered billing-related support calls, and, as a side effect, captured premium payments earlier in the month.