Quote Multi-Journey

Branded Landing Page

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

Responsive Mobile Views

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.

The Quote

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 we placed the coverages on the left like a shopping cart, and kept the price and CTA in-view while scrolling.

The making of…

We started this project as an interactive prototype created in Adobe XD. We elicited feedback from peers and users to iterate on the UX before development. After feeling confident with the prototype, I moved onto the project architecture. Working with a Full-Stack Developer, we began building the Journey. I focused on the front-end and created a theme system for the components. This allowed the functionality of the journey to be easily customized while abstracting standardized functions. We like to test user flows, so I also created an easy way to have a base flow that can be extended into test flows.

After getting the base set up, I moved to focus on the styling and user interaction animations. I was responsible for all the animations and design within the Elephant journey, and contributed to much of the base TypeScript architecture and cross-brand functionality being completed by the team.