Quote Multi-Journey

This project came at a very fun time in Elephant's history. We had just spun up the sister brand Apparent Insurance, and we wanted to easily keep the two quote experiences updated, but still allow for customization.

This project allowed our team to really flex. I set up the component architecture, created the base design system, and built a navigation with an in-page form progression tracker.

Once the base was created, I focused on design details of the Elephant flow; The other CSS guy nailed the design for Apparent and gave me valuable design critiques for the shared base styling; And the javascript devs did a great job adding product functionality and setting up the angular CICD build processes.

You can view the site live at quotes.elephant.com

The entire journey is fully responsive and WCAG compliant, allowing for anyone to easily get a quote online. The responsive aspect was expected from management, but I spearheaded the inclusion of accessibility considerations. In the process, we transformed Elephant's web presence and improved SEO and web accessibility.

After getting through the accessible form, the user is presented with their quote. We wanted to make it feel a like checking out at an e-commerce storefront, so I placed the coverages on the left like a shopping cart, and kept the price and CTA in-view while scrolling.

Currently, I'm working on new quote quote page design in Figma to add new branding elements and introduce the new weighted quote options and coverage selection dropdowns.

This new layout brings even more focus to the price, and highlights the packages, while still showing that paying in full will provide a discount. The coverage header is placed within a sloping tab-like element to draw the user down the page, allowing clear access to customize their coverage.