Background
At American Family Insurance, one of the most important functions of the website is converting shoppers into new paying customers. In this respect AFI is playing catch-up; despite being one of the older institutions in their industry, their Online Shopping experience was not highly rated and did not convert the numbers the business was hoping for. In 2021, when I joined, the company had just had a disappointing showing in J.D.Power & Associates’ annual ranking of insurance companies, ranking highly in customer satisfaction but landing in the bottom 20% of the ranking for online shopping experience.
My Role & Team
I was brought onto the team as a Senior UX Designer, responsible for collaborating with two other designers on the macro experience while owning a specific product or products within the overall flow. In other words, although the holistic UX was one of selecting relevant types of coverage for the customer and selling them at a discount as a bundle, I held primary responsibility for covering those pages dedicated to incorporating automotive insurance.
Design Goals
- Simplify the overall workflow for the Digital Shopping Experience
- Improve Customer Satisfaction scores
- Increase the conversion rate for all types of coverage
Research & Development
Working with an excellent research team, we performed qualitative research using a common language battery which determined that much of the significant exit rate our shopping experience exhibited could be attributed to two main factors:
A “Bait and Switch” Problem
Research identified an extremely unfavorable view of some parts of the experience wherein customers with extra needs, like SR-22 High Risk insurance, might not find out they cannot complete their purchase online until having spent several minutes and some amount of effort entering information. Although the website would forward their information to a local agent to reach out, the shunt from online to in-person was perceived by many as a Bait & Switch, which is obviously undesirable because, in the words of one respondent: “Who wants to buy insurance from someone who starts the relationship off with scam tactics?”
The situations where a given answer would prevent a user from completing the buy process were moved up in the flow, wasting less time for users who would end up not qualifying online. For anything that couldn’t be moved for legal or regulatory reasons, we worked with a Content Designer to provide explicative text where redundant or frustrating events take place in order to soften the task failure for those edge users.
Information Redundancy
The other primary concern was frustration that comes from conflicts in the attempt to create a holistic experience while preserving the needs of individual products. Frequently information needed for multiple products in a bundle would overlap to some degree. Collecting this information more than once, or even showing a page with that information pre-filled in a form control, produced far more frustration than anyone on the team expected, leading to a dreaded but much-needed scope change to account for new hybrid form models which would collect everything only once and hide any subsequent mention of it.
Navigation and Workflow
The team already had a strong Design System, so I was able to begin assembling the new workflow from existing pieces almost immediately. Hand drawn wireframes were produced in collaboration sessions, but they were relatively short-lived and used to obtain permission to build higher definition versions of the product. The workflow for the overall experience underwent numerous revisions as we worked to build an architecture that respects both the individual products as well as the need for a unified experience for every customer.
Design Iteration
Everything at AFI worked on an agile framework, allowing us to dedicate design sprints to each segment of our individual products while meeting regularly to compare notes and align on the macro design of the process. Working in Figma with the Design System properly componentized allowed us to rapidly iterate with high-fidelity mockups, taking new research or direction from product groups and turning around a fully user-tested solution in an average of two weeks (one sprint).
The Handoff
Due to the size of the AFI organization, development was shared among multiple teams that would work on one feature or page at a time, using Figma’s native functionality to pass specifications to the developers. Each release was predated by a round of UAT, during which the consistency of the design with the live version was ensured. All pieces of the project were assessed for compliance with WCAG guidelines in both its design prototype and finished development form.
Toward the end of my time with AFI, we began incorporating Design Tokens into our practice as well, helping to ease the friction of updates to the Design System.
The Results
The 2023 J.D. Power & associates report showed tremendous improvement versus the 2021, ranking American Family’s online insurance shopping at the top of the industry just two years later. User numbers bear that out as well, with the year’s net new customers (a key KPI) nearly 25% above expectations.