Overview
While working at Pivotal, we rebuilt a responsive-web auto insurance quoter for the American Automobile Association.
Problem
AAA's existing auto insurance quoting experience was outdated and offered a poor experience. It was not responsive and had poor performance.
Responsibilities
UXR, UX, UI, Prototyping, Mentoring, Design Systems
Team
We had a large team that at Pivotal's HQ in San Francisco. AAA was matching each discipline, and we were eager to help them learn the design methodologies we practised. On the product side, there was a AAA product owner, 1 Pivotal product manager and 2 AAA business analysts. Engineering was staffed at 4 from each company. I led the design team with 1 training Pivotal designer and 2 AAA designers.
Goal
We needed to release a fully functional re-design in 6 months.
Diving Deeper
We started by narrowing our focus to AAA's primary insurance customer; drivers with high income and high standards for customer service. After the working through the major touch points in the insurance quoting process, we set out to do a mix of exploratory research and prototype testing with the existing web app. We spent 4 weeks talking to 2-4 customers a day.
Learnings
We learned that AAA customers spend 5-15 min in total getting an insurance quote. Everyone wants to see discounts applied. And most people don’t understand their coverage. So it was obvious we needed to dig deeper into coverages.
Story Mapping to Prioritize Work
I sat with one of the AAA designers to map out all the design work we had ahead, and then started creating a plan to prioritize the bigger groups of work.
Iterating in Low Fidelity
We worked in Sketch and InVision, and tested with a small amount of users each week.
Increasing Fidelity
Over time we started to increase fidelity and bring in more of AAA's brand.
Responsive System
We also created a reusable UI system that behaved well across all types of content and resolutions. The current state of AAA's other digital products had a lot of inconsistencies. We were setting the standard for UI moving forward.
Designing for Complex States
We had to design scalable components that could adapt to a variety of inputs and states.
Collaborative Feedback
Sometimes stakeholders would join our weekly critique sessions. I'd often talk to our design decisions, and sometimes even iterate on them on the spot.
Solution
After iterating through all the possible scenarios for coverages changes, we came up with a hide and show system that had extendable components for user selections. Since coverages vary by U.S state, this system needed to be very adaptable. We also created a light and easy way to show quote changes through a price animation. We were able to ship a brand new product in a short time frame, and helped AAA designers learn some lean design methodologies.
