April 3, 2023

April 3, 2023

Progressive Commercial Quoting Design

Progressive Commercial Quoting Design

Progressive Commercial Quoting Design

As part of Progressive’s effort to improve its commercial insurance quoting application, I led a redesign focused on simplifying the business type selection process—a critical stage where many users were dropping off. The previous experience required users to navigate a complex entry flow without clear guidance, often leading to confusion and abandonment.


To address this, I restructured the information architecture and introduced a filterable list of business categories, giving users clearer pathways to find and select their business type. This approach not only streamlined navigation but also aligned with Progressive’s broader goal of improving conversion by reducing friction in the quoting journey.

As part of Progressive’s effort to improve its commercial insurance quoting application, I led a redesign focused on simplifying the business type selection process—a critical stage where many users were dropping off. The previous experience required users to navigate a complex entry flow without clear guidance, often leading to confusion and abandonment.


To address this, I restructured the information architecture and introduced a filterable list of business categories, giving users clearer pathways to find and select their business type. This approach not only streamlined navigation but also aligned with Progressive’s broader goal of improving conversion by reducing friction in the quoting journey.

As part of Progressive’s effort to improve its commercial insurance quoting application, I led a redesign focused on simplifying the business type selection process—a critical stage where many users were dropping off. The previous experience required users to navigate a complex entry flow without clear guidance, often leading to confusion and abandonment.


To address this, I restructured the information architecture and introduced a filterable list of business categories, giving users clearer pathways to find and select their business type. This approach not only streamlined navigation but also aligned with Progressive’s broader goal of improving conversion by reducing friction in the quoting journey.

Woman
Woman
Woman

Year

2020

Client

Progressive

Category

Product Design

Product Duration

6months
Research
Research
Research

To better understand why users were dropping off during the commercial quote process, I conducted usability testing with small business owners on the existing application. These sessions revealed key pain points, including difficulty locating the correct business type, confusion around terminology, and frustration with the lack of guidance in the selection flow.


In addition, I carried out in-depth interviews with small business owners to explore their broader needs and preferences when searching for commercial insurance. Many emphasized the importance of speed, clarity, and confidence in choosing the right coverage, noting that a confusing or overwhelming interface created hesitation and often led them to abandon the process.


These insights provided a strong foundation for the redesign, highlighting the need for a simplified, filterable business category system that would better support user decision-making and reduce drop-off at this critical stage of the quoting journey.

Ideation
Ideation
Ideation

With research insights in hand, I moved into the ideation phase, beginning with sketches and exploratory layouts that tested different UI patterns for presenting business categories and guiding users through the quoting flow. These early explorations helped me quickly visualize options for simplifying navigation, improving content hierarchy, and making the selection process feel more approachable.


Beyond structural improvements, I incorporated principles of behavioral design and gamification to reduce drop-off and encourage completion. This included introducing progressive disclosure to avoid overwhelming users, clear feedback loops that rewarded progress, and subtle motivational cues designed to instill confidence at each step. By framing the quoting process as a guided journey rather than a static form, the design aimed to keep users engaged and motivated to convert.


Collaboration with product managers and stakeholders throughout this phase ensured that the solutions balanced business goals with user psychology, setting the stage for higher conversion rates and a smoother quoting experience.

UI Design
UI Design
UI Design

In the UI design phase, I established a scalable design system and UI kit to ensure consistency across the commercial quoting experience. This included reusable components, typography, color styles, and interaction patterns tailored to Progressive’s brand and digital standards. By systematizing the design, the quoting flow became easier to maintain and scale for future iterations.


I also designed animations and micro-interactions to guide users through the process in a more intuitive and engaging way. These interactions were prototyped in JavaScript, allowing me to simulate transitions, progressive disclosure, and feedback states that encouraged users to stay engaged while moving through the quote.


To validate the designs in a real-world context, I built functional prototypes using CSS and HTML. These prototypes gave stakeholders and developers a clear sense of the intended experience and reduced ambiguity during handoff. This hands-on approach also ensured smoother collaboration with engineering, as I could demonstrate not just how the UI should look, but how it should behave.

Desktop
Desktop
Desktop
Impact
Impact
Impact

The redesigned quoting experience delivered a measurable improvement, with a clear increase in conversion rates at the business type selection stage, validating the effectiveness of the new information architecture and interaction design.


This success was achieved through close collaboration with product managers and engineering partners, ensuring that design decisions aligned with business goals and could be implemented seamlessly. The process also strengthened cross-functional alignment, allowing the team to move quickly from concept to launch.


Additionally, I expanded my own skillset by upskilling in web coding, applying JavaScript, CSS, and HTML to build functional prototypes that bridged the gap between design and development. This hands-on approach improved communication with engineers and elevated the fidelity of design deliverables, contributing directly to the project’s success.

  • More Works More Works