Serving over 14 million policies, I removed the confusion for thousands of American Family Insurance customers who log in to pay their bill(s) each day.
Assignment: Rethink the American Family’s main billing dashboard to make it easier for customers to understand and pay their bill(s).
Challenge: Four Agile Teams, each with its Product Owner, managed/designed each dash section independently.
Responsibilities
Lead Product Designer
Role
UX Product Strategy and Decision Making, UX Script Writing, UX Research, Wire-framing & Prototyping, Information Architecture, Figma UI, UX Copywriting, and Stakeholder Management
Product Manager
Product Owner
Lead Product Designer
iOS Developer
Android Developer
Software Developer
QC Tester
Business Analyst
Scrum Master
Team
Responsive Web
Android
iOS
Platforms
The analytics confirmed that customers log in to their insurance website primarily to pay their bill(s).
As UX lead for billing & payments, I knew that if I eliminated the confusion typically associated with insurance, I could reduce call center volume while increasing (or at least speeding up) the already 20,000+ self-service insurance payments processed daily.
Target:
Existing customers insured by American Family Insurance.
UX Research: The average customer at American Family Insurance had 2.7 insurance policies.
When I joined the American Family Insurance retention team, two billing-related dashboards were in this current state.
I didn’t design this UI; I was brought in to fix it.
Dashboard No. 1: Overview - Main Landing Page
Upon logging in, customers could view their bills as cards, and the dashboard required a lot of scrolling.
Dashboard No. 2: Billing & Payments
It was clear as a bell. To reduce confusion, both dashboards must be consolidated into one simplified user experience.
When folks clicked Billing & Payments, they were presented with a table view of the same financial data from the previous dash.
I first identified the low-hanging fruit.
Eliminate redundant UI elements (Less is more)
Keep essentials above the fold (Web & mobile)
Fewer clicks/taps (No more than one to two)
Improve context (Teach users how things are)
Modernize the experience (Reorganize)
Tell a story (You have X bills totalling X amount)
Then, I took an inventory of the data required for a killer user experience
How many bills a customer has
Important status alerts (color coded)
How much customers owe, and when
How much time do customers have to pay
And the total amount customers owe
Which Policies are covered by which bill
Key information about customer policies
Relevant calls to action
Which billing accounts are on auto-pay
As a student of Marie Kondo, I recommended merging policy and billing information into one organized view to feature as much essential content as possible (above the fold).
In the current state, the main landing page (dashboard) used a stacked layout, requiring customers to scroll unnecessarily, separating bills from their respective policies, and causing confusion.
For example, if a customer had a bill for their car in the top Billing section, they’d also have the policy for that same car in the My Insured Items section below. It made no sense.
In this wireframe, I showed the Product team the UX benefit of merging the billing and policy sections (managed by two agile teams) into one. This would help relocate essential information above the fold.
I like to sketch, then wireframe, tighten it up, and prototype (not always in that order).
“Bryan is an exceptional talent with a unique combination of creativity, technical skill, and a positive attitude that makes him an invaluable asset to any Product team.”
— David Anfield | Senior Product Manager
The final design gives little cues to help customers feel confident about what they owe and how their bills are organized.
The solution reinforced that a single bill could contain multiple policies, and customers could also have more than one bill.
It spelled out which policies were covered by which bill, provided a color-coded status and time remaining to pay, and included essential calls to action.
