I designed Esurance's new checkout page and developed a modular system for displaying customized layouts based on the user's rate status.
After users get insurance quotes and decide to purchase online, Esurance runs reports on the backend to verify their information. Based on the results of these reports, it's possible that the price on the payment page has either increased or decreased from the original rate quoted.
• Led design workshop and standup meetings with stakeholders and product managers to explore how to best support business objectives and user needs with new design.
• Simplified information architecture of the page by grouping related items into a payment details modal. This chunking of information not only resulted in a cleaner layout of the page but reduced user's cognitive load.
• Investigated numerous visual design treatments of a highly dynamic "price bar" where both price information and offers are displayed. This process involved performing hallway desirability tests of mockups to refine designs over the course of 18 review sessions.
• Prototyped interaction of price controls, including lowering down payment, switching payment schedule from monthly to pay in full, and reverting to previous payment schedule (see video below). Using InDesign, I linked 20 pages in an interactive PDF. This document was extremely helpful for quickly communicating functionality requirements to various teams, including development, QA, legal and marketing.
• Wrote detailed UI specification document for developers to implement exact look and feel across desktop and tablet devices.
• Led design workshop with stakeholders and product managers to explore how best to support business objectives and user needs with new design.
Original Checkout Page
Redesigned Checkout Page
Price Bar Matrix
Interactive PDF Prototype
