How I transformed American Family Insurance's bill payment experience across Android, iOS, and responsive web platforms, delivering a seamless user journey while maintaining strict adherence to official AmFam brand guidelines.

American Family Insurance handles over 250,000 online premium payments monthly.

Role: Led UX on a remote scrum team (based across the U.S.) for American Family Insurance's billing and payments product group in Madison, WI.

Conducted UX research, and produced prototypes, and figma designs for customer-facing account management on mobile and responsive web apps.

• Product Manager 
• Product Owner
• UX Designer
• Android Developer
• iOS Developer
• Web Developers (2)
• Analytics Specialist

Problem: American Family's online bill pay flow experienced an unusually high number of abandoned payments, which resulted in a surge in customer support calls and increased late payments.

Challenge: Due to AmFam’s liability, customer-facing UX designers were prohibited from interviewing customers.

UX Research: To gather viable insights, I analyzed billing-related customer calls and interviewed call center reps and employees who were American Family customers. My findings revealed confusion within the payment flow, driving customers to call for assistance.

Check out this prototype I used for testing.

Unnecessarily complicated: After conducting further UX inventory of the bill payment flow on all three platforms (Android, iOS, and Web), I discovered duplicate UI, which required customers to learn multiple design patterns to accomplish the same task.

UX/UI Goals to increase bill payment conversions.

One form only, Create a single form to streamline the process, giving customers one central place to complete all tasks.

Edit the flow, streamline payment to reduce confusion, increase online completion rates, and reduce the need for customer support calls.

Explore E-commerce patterns, Transform the insurance payment process by leveraging e-commerce patterns, making it feel less like a traditional bill.

Solution: We resolved the issue of customer confusion by integrating e-commerce design patterns. UX research confirmed this, as customers quickly grasped the edit cart-style prototype, proving the solution's effectiveness in simplifying the payment flow and increasing understanding.

Paying felt more like shopping than paying a bill.

Review payment (iOS)

Result: By strategically reimagining insurance premium collection through proven e-commerce design principles:

★ 27% faster payment completion time - applied streamlined checkout methodology to a traditionally complex financial transaction

★ Significant increase in successful payment transactions - leveraged intuitive progress indicators and friction-reducing interface patterns familiar to online shoppers

★ Dramatic reduction in payment abandonment rates - by making the payment process feel more familiar and less like paying an insurance bill

★ A measurable decrease in billing support inquiries—The improved flow removed pain points, reducing the number of customers feeling like they needed to call in to pay

★ Accelerated payment processing cycles - The cumulative effect of less abandonment and fewer calls to customer support meant revenue was collected earlier in the month