Auto Club Auto insurance Acquisition redesign
AAA is America’s first and leading auto insurance provider, having pioneered “legendary” service for drivers across the country. It now faces the challenge of maintaining its historic reputation by providing an innovative digital experience that rises above its top competitors.
I was part of an ambitious project that would rise to the challenge by enhancing AAA’s digital acquisitions form for current members and future customers.
AAA is a network of auto clubs from different states/regions. Within AAA, the Auto Club Enterprise(ACE) oversees the digital products for Southern California, Texas, Missouri, Hawaii, and the eastern portion of the U.S.
Project Overview
AAA has long prioritized in-person customer interactions over digital services. As competitors emerged in the market with an emphasis on its digital products, the company has at long last shifted gears towards an online platform for revenue generation.
However, the current online quote process is not competitive by industry standards. Our team at Clublabs was asked to come up with a new process that would enhance usability, increase conversion rates from other providers, and meet industry standards.
As a new department created for digital product strategy, Clublabs found that this high-visibility project would help establish the department’s presence as a crucial and fundamental part of AAA’s mission to provide “legendary” service. The project also highlighted the UX team’s capability and potential contributions with its focus on user experience and client satisfaction. It became our first significant opportunity to collaborate strategically with our product management team.
My Role & Responsibilities
At the start of the project in 2018, I took on the role of Sr. UX Designer overseeing the implementation of the initial concept (MVP) in the Texas market. Later, I increasingly took on responsibilities as UX Lead, overseeing the project’s expansion to California and other regional markets, as well as mentoring and coaching two designers new to the team.
As a Sr. UX designer:
Conducted usability tests for the proof of concept and MVP.
Created the detail flows for different regional markets.
Oversaw the development process to quality check the design implementation.
Created the lite design system.
Worked alongside 3 product managers, various product owners (business), the legal team, underwriters, content writers, and lead developers for detailed design.
Supported the relaxation of legacy, outdated business rules
As a UX lead:
Mentored/coached/oversaw designers to make sure the UX process is well-maintained, and designs are implemented and scaled correctly.
Led user research in the discovery phase
Supported the concept generation for the next generation of the quote form.
Conducted concept testing and user research of other insurance providers.
Contributed to the product road map generation.
Led the evolution of the design system.
Responsibility
Provide the product team with the redesign of the online quote and purchase flow that can scale to all markets.
Work with SMEs to eliminate legacy rules and incorporate their feedback and requirements.
Ensure the new design is user-friendly and mobile-friendly.
Incorporate the users’ needs, limit focus on insurance/business needs
Ensure scalability for other markets such as Southern California, Missouri, etc.
Ensure design accessibility
Collaborate during road map generation to make sure we’re not perpetually at “MVP” mode.
Validate the design and iterations
Utilize data to keep track of the project status and create backlogs for enhancements.
Work with developers and QA the implementation and sign-offs.
Work with developers to create the shared components
Manage and delegate workload to other UX designers.
Contribute to UX team resourcing.
Project Goals
Increase auto insurance online sales.
At the beginning of our project, the percentage of users who completed the online sales process for auto insurance hit 0.6%. Compared to our direct competitors, our purchase funnel was very, very low. The most significant reason for this was AAA’s strict rating rules that would lead to users facing the “Agent will call you” screen.
UX GOAL
Create a seamless flow that mimics the company’s reputation of “legendary customer service” by removing the outdated business rules that block the users from proceeding.
Increase the conversion rate, especially on mobile.
From the very first page to the quote presentation page, we found that conversion dropped 41%. Mobile conversion was especially lower than desktop (16% vs. 37%). According to our analytics, traffic from mobile and desktop users was the same and would continue to rise at a fast page.
UX GOAL
Create an interface with user interactions that is mobile-friendly.
Reduce the time to get a quote.
In its current form, the process would take approximately 10 minutes for a user to view their quotes. This is due to a variety of product and usability issues, including lack of error prevention, user comprehension issues, and a requirement to receive complex information from the user.
UX GOAL
Create an efficient flow and interaction to collect the bare minimum of information.
Optimize the system and service architecture.
The current system architecture and interface is complex, fragile, and vulnerable.
Addressing usability issues alone could take a year or longer.
Rapid test and learn is not feasible. The current volume and conversion rates are not sufficient to meet business goals.
UX GOAL
Create the components and flow design that can be modular, flexible, and scalable.
Design process overview
Since I joined in the middle of the project during phase 1, I supported the high-level strategy done by the head of UX(LS) by understanding and applying them in detailed designs, validating them through actual users with multiple usability testings, and adjusting and enhancing the solution approach as needed. As I took the main responsibility as a sole designer for the project, the strategy naturally evolved. After the success of phase 1, I then became a lead to take on more responsibilities such as working closely with the product management and development team to identify the scope of each phase, contributing to their roadmaps, and creating a UX backlog of features for the team to work on after the first launch(in phase 2).
Phase 1 - “Fast pass” for Texas(MVP of MVP😅) - DONE
Duration: April 2019 ~ April 2020
Discover
Studied research findings and conducted my own research to understand and validate the current strategy. Made sure our solutions approach was feasible and enhanced the current experience.
Competitor analysis
Heuristic evaluation of existing and new designs
SME interviews
Usability testing
Creation of personas
Define
Created artifacts to represent the user experience principles defined in the strategy.
User journey map
Develop
Developed detailed designs to cover the MVP of the MVP scenarios, taking the user through to the Quote page and then transferring them to the existing design
Detailed design for short term + long term
SME reviews
Stakeholder reviews
Design systems
Deliver
Oversaw the development of the designs, iterated the designed based on consistently changing business rules and scopes due to technical limitations and changing stakeholder expectations
Quality check
UX Backlog generation
Adobe Analytics conversion review
User’s live session observations
TQS4 feedback
SME feedback
Phase 2 - Quote and Bind for both Texas and Southern California (the full flow of MVP) - DONE
Duration: May 2020 ~ January 2022
Discover
Accommodated solutions for technical and business issues detected after the launch of the fast pass (MVP of MVP), as well as usability issues we saw in our new designs.
Adobe Analytics conversion review
User’s live session observations
TQS4 feedback
SME feedback
Define
Generated a backlog of optimization items and set up a weekly sync-up meeting with the Product Management team to review roadmap and priorities.
Weekly working session
Roadmap review and adjustment
Backlog grooming
Develop
Created additional designs including a new payment flow and bundling options.
Detailed short term and long term designs for the new payment flow
Design iterations for additional business requirements and usability enhancement on quote flow
Expansion of design system
Usability testing
Deliver
Oversaw the development of the designs, iterated the designed based on consistently changing business rules and scopes due to technical limitations and changing stakeholder expectations
Quality check
UX backlog generation
Usability testing
Phase 3 - Scale to other markets and types (Post MVP) - In progress
Duration: February 2022 ~ current
Discover
Supervise and advise on identification work for product/usability/technical issues while scaling designs to different regional markets and insurance types
Market research (value proposition and customer types)
Competitor analysis
Heuristic evaluation
TQS4 feedback
Observations
SME interviews
Define
Led synthesis of data into research artifacts, supervised and mentored junior UX designers during concept design to test for its usability, scalability, and feasibility
Personas
User journey map
User experience principles
Proof of concept (interactive prototype)
Initial style guide
Scoping
Develop
Supervised and mentored junior UX designers to develop detailed designs for the MVP, including negotiating with stakeholders on what was required on the roadmap for a better user experience.
Detailed designs for short term + long term
SME reviews
Stakeholder reviews
Evolvement of design system
Deliver
Provided the development team with the enhanced design system spec and supervised and mentored junior UX designers to follow the development process and quality check implementation.
Quality check
UX backlog generation
Adobe Analytics conversion review
User’s live session observation
TQS4 feedback
SME feedback
Discover + Define
When I joined the project, the head of UX (LS) had finished the initial UX strategy with a high-level solution approach. My main responsibility was to utilize her strategy as reference while building detailed designs for the development process. Although the ask was for me to detail out the interaction and replicate the structure for additional business requirements, I first needed context. I wanted to understand where we stood with the current design, what exactly we were trying to solve, and to verify that our solution would solve those issues.
In order to do this, I independently reviewed data sources to build empathy with both the business and user. While this might have initially seemed unnecessary, I strongly felt that I had to take ownership of the strategy so that I could foresee what other areas might be improved.
To me, strategy is a forever evolving development. As the UX design representative in a multi-disciplinary team, I knew I had to be the expert on the solution we were proposing and prepare for the project’s inevitable evolution.
I reviewed data sources like surveys and TQS4 user feedback, and I conducted competitor analysis to understand current product issues
Different design directions for different markets
Business rules that block visitors from proceeding
Variance between quoted and actual prices
Unclear pricing and discount calculations
I reviewed user feedback and conducted heuristic evaluation to validate what was leading to visitor abandonment
Time consuming
Confusing
Frustrating
Disappointing
I participated in various inception meetings and development strategy meetings to gain knowledge of how the existing system architecture was built, the complexity of the front-end and back-end systems, and the developers’ new approach with the UX team’s strategy.
This involvement would later provide a solid foundation for understanding what could be within scope for MVP vs. post MVP. While working closely with the development team, I saw their struggles with a vigorous back-end system, and provided user insights and support to scrap out legacy workflows so as to build new system architecture that would resolve many of the issues with the fractured system.
Validate the conceptBefore building out the detailed design, I wanted to check that the current solution approach could be well-adapted with general users. Initially, our head of UX (LS) pushed for a build-and-test approach, since it was impossible to build an interactive prototype without developers.
However, I thought we could still validate some of our core concept directions without putting in the resources to build a complex interactive prototype. These two core concepts were:
Hypothesis 1. Substance over flash -- Members value ease of use over eye-catching features.
Our designs should be easy to use by all generations of drivers, prioritizing user-driven reliability over trendy aesthetics.
Hypothesis 2. Bring a “human” touch to the digital platform.
The way we ask and explain information should be like an in-person interaction.
The initial prototype served to demonstrate the concept approach, and with plenty of secondary data to validate our hypotheses, we found that some quick usability testing was sufficient to confirm the two hypotheses above. The usability tests mainly confirmed that the designs were easy to use (#1) and understand (#2).
Our concept approach was well-received by general users, particularly the voice and tone of our concept design. The testing process also helped us identify features that the users enjoyed using, including pre-filled information or receiving contextual guidance. These features were further developed and incorporated into the final solution design.
Additional inputs in the journey mapWith the insight from usability testing and data reviewed, I provided additional input to the journey map that would help users make their decision to purchase AAA insurance. These ideas were shared with insurance retention projects, which shares many subflows with acquisition flow, such as coverage change and add drivers/vehicle flows.
Opportunity area 1.
Pre-fill information for existing members who have products with AAA
Opportunity area 2.
Provide more contextual examples that explain coverage options for first-time buyers, to explain what each coverage option means.
Opportunity area 3.
Ask for the policy effective date earlier on in the flow, instead of just before the discount flow.
Develop
After validating our design direction and finding additional areas of opportunity, I started to detail out the designs. This was a crucial process to make sure we would not lose the user experience principle and the spirit of our strategy, but to also deliver a feasible and tangible solution to the team and to our users. This process went through a perpetual cycle of feedback, redesign, and negotiation of features, which would eventually impact the scope of our deliverables.
Gather information, again.Re-evaluate our solution and its feasibility
I conducted review meetings with multiple SMEs and stakeholders to re-evaluation our current solution. This helped me understand what was in scope vs. what would have to be put in the backlog for the next phase.
Reviewed all the business as much as possible
By collaborating with our product managers, we identified the crucial questions that would impact the insurance premium. I understood why we were asking each question, so that we could provide enough context on why we were collecting the information from users and how it would be used.
Reviewed the legal and underwriting specific restrictions
The content in the design needed to be re-written to provide a warm, human-interaction tone. The content also required multiple review sessions with our legal team.
Apply our strategy to the detailed designs1. First and foremost, eliminate the complex business rules as much as possible
By collaborating with our product managers, we created a case on how our competitors were relaxing business rules and changing user expectations on the experience of getting a quote. We identified the existing questions currently required by our out-dated back-end system, including questions that were not suitable for the digital experience. This type of classification required management approval. After much convincing with our many, many stakeholders, we were able to eliminate questions such as annual mileage for each vehicle, driving history, DUI-related claims, and so on.
While we had asked over 80 questions with the existing design, we trimmed it down to 45 questions in the new design and continued work on enhancing and eliminating the number of questions needed.
Examples of complex and unnecessary questions we identified to eliminate:
“What is the vehicle ownership status?”
“Have you moved in the past 2 years? ”
“What is your estimated annual mileage?”
“When is the expiration date of current auto insurance policy(mm/dd/yyyy)?”
2. Hold users’ hands, in many ways.
Keeping in mind the chatbot technology we leverage during roadside assistance, I carried over the concept of virtual transition for getting help from an agent, both AI or a live agent. This concept became the virtual guided agent “Cindy”, and was expanded as not just an entry point to the virtual chat but also became the mascot of our AAA insurance agents. Cindy was eventually able to live in many areas.
Every page as an entry point to the virtual chat
I provided a section at the bottom of critical screens like the driver page, coverage page, and payment page for Cindy. The consistent exposure to Cindy provided a way for users to get familiar with where to find help if needed.
Guided bubbles located on the most critical pages
Contextual bubbles provided information that users might want to know, such as why we’re asking certain questions, how we’re going to use their information, and other answers to commonly asked questions.
3. Make everything as comprehensible as possible
One of the highlights of our initial strategy was to make the flow easy to go through. With all of the efforts placed on creating this flow, it was time to tighten up our actual user interface.
There were three key areas to enhance: The form, the language, and the mobile view.
The current UI dramatically failed in these three areas, leading to a tremendous drop in the conversion rate for mobile users. The main issue: it was just too much. Too much input, too many words in what could be a simple explanation, and too many unreliable components for a mobile device. The initial strategy also mentioned this, with multiple data points representing the cognitive overload for users. The high-level solution approach was to provide “conversational design.”
Conversational flow: Provide the right amount of inputs per page.
One of the strategy’s core concepts was the reduce the number of inputs in the current pages. Our current implementation (v. 1.0) followed the traditional long-form, which led to user exhaustion and prompting errors. Looking at this commonly disrupted experience, we agreed that we needed to have as few questions as possible per page.
But what was the right balance? To determine this, I combed through all questions we asked per page to figure out if there were any dependencies on inputs.
I was able to figure out this balance through the vertical viewport. If we presented the input fields to display beyond the viewport, forcing the user to scroll down to enter their inputs, this would add another unnecessary interaction that complicated the overall input interaction.
Additionally, I also determined the balance through the logical sequence of information presented and the information hierarchy. If I could group related inputs, the flow would make more sense to users and make it easier for them to provide information.
Make the copy conversational
After many rounds of review with the legal, underwriting, and business stakeholders, we found that the copy was filled with insurance jargon. I had to firmly assert with stakeholders that the goal of our new direction was not to follow our conventional communication methods. I emphasized the “legendary customer service” we were trying to mimic on our digital platform.
This effort would later on impact our marketing content team, who dealt with the marketing campaign and overall content strategy for our website. I worked closely with copywriters to create the voice and tonal guidelines that both teams could use, creating consistency in the digital channels.
Comprehensible layouts - Mobile first
As mobile devices were responsible for our lowest conversion rates, I focused on designing the UI for mobile devices. I specifically chose the smaller device, iPhone 8, as our base resolution. Evaluation of the current implementation found numerous usability and development issues, as the current design did not consider any touch target areas, micro-interaction, and responsiveness. Consequently, I decided to revisit the components and layout to make sure they were mobile friendly.
Create sharable components and define design systemAfter solidifying the detailed design, it was natural for us to start defining the components used across the flow. As mentioned, the acquisition design has multiple subflows that could be utilized as retention flows, such as managing coverages or adding drivers to existing policy. This was a great opportunity to centralize the component library and to create a consistent experience through multiple product lines.
I naturally led the generation of the design system, but being the only designer creating documentation, I had to solidify the content for the design system. I laid out the most essentation information for the designer and the developer: spec and general guidelines on when to use. Later, in phase 2, I incorporated ADA compliance guidelines for each component to ensure accessibility.
The design system goal
Reduce barriers and increase speed to completion; improve the brand experience across our applications
Improve quality and efficiency of designs for engineering and UX, by focusing on hard task such as optimizing current capabilities (business rules), task flow, content optimization, and adding new capabilities
Maintain standards and control across applications
The process
Created an initial design system
Reviewed with the acquisition development team
Created a small ad-hoc design system team: one UX (myself) and 3 developers from the acquisition development team
Created the component symbol library in Sketch for designers
Performed quality check on development
Published component library in Storybook
Shared component library to insurance retention team and enterprise team
Extended design system in web content management
Audited by ADA compliance guideline - most components were passing AA standard, but the coding had some missing functionalities such as screen reader and keyboard interaction
Shared component library to mobile app team
Audited the status of the design system, decided to own the design system and component development internally.
Became a lead on the design system project, mentoring one fellow designer to build the public design system documentation and overseeing the development process of the components
Currently incorporating the new visual designs proposed by mobile app team - auditing the styles with ADA guideline, identifying any deviation we need to make for web applications vs. mobile app
Deliver
After much review and iterations, the final designs were handed off to the development team. The process was very collaborative - I initiated the development team review to go over my designs so that there would be no surprise when it became available for inclusion in Jira tickets. Working with the product manager, I supported creating Jira tickets that specified behaviors and specific interactions that would require more attention.
1. Communicated with engineers early in the process
2. Oversaw the Jira tickets and closely observed implementation
3. Created UX backlog
The items in the UX backlog eventually became items to negotiate during planning for the next quarter and future roadmap. In Phase 2, I initiated product management sync up meetings to facilitate better communication between the project management team and the UX teams, so as to be on the same page for priorities and to ensure that UX backlog items would be added to their development roadmap.
Results
1. Conversion rate increased
The new designs exceeded the original KPIs by double.
Texas Quote conversionGoal: 29% Actual: 44%
Texas Bind offeredGoal: 75% Actual: 95%
Texas Bind startGoal: 21% Actual: 22%
Texas Bind(purchase) conversionGoal: 1% Actual: 5%
2. The strategy extended to other product lines
Our project’s strategy was adapted to many other projects involving insurance retention redesign, payment process, and user account management managing. This was possible due to the design’s conversational layout and flow that allowed it to be extremely modular.
3. UX team’s position within the organization shifted from the UI team to UX strategy team
After this project’s success and the improvement of the design system, we gained a reputation as a strategic team. This was a huge step forward for the team because we had previously been referred to as the “design team” or the “UI team”. Now, we are asked to participate in product planning meetings, providing feedback and suggestions to envision the future user experience. We still have a long way to go to evangelize the UX process as part of the workflow, but the position shift was a big win for the team!
My recent roles now…
This project is an ongoing project that took more than 3 years of my time at AAA. I was promoted to UX lead after its successful Phase 1 launch, and I’ve continued to implement a similar process of Discover, Define, Develop, and Deliver for phase 2 and 3. While I couldn’t delve into every detail of each phase here, I’d be happy to get into the nitty-gritty in person.
Nowadays on this project, I am still promoting the implementation of the UX backlog, as well as consistently facilitating sync up/roadmap and planning meetings with fellow Sr. Product Managers. I’m also doing more mentoring and coaching by reviewing the designs done by Sr. and Jr. designers under me. I lead them by providing guidance, support, and removing blockers so that they can properly run through UX research and the design process even with limited time.
I’m currently the UX lead for multiple product lines, creating more strategic UX vision proposals for my products and facilitating design workshops to create collaboration with different stakeholders throughout the company. With my work, I hope to further increase UX’s presence in our products and improve the customer’s experience -- in short, to provide “legendary service.”