Allstate - Payment Page
The Allstate Corporation protects people from life's uncertainties with more than 113 million proprietary policies. Allstate offers a broad array of protection products through multiple brands and diverse distribution channels, including auto, home, life and other insurance offered through its Allstate, Esurance, Encompass, SquareTrade and Answer Financial brands.
Business requirement: Redesign the UX and visual experience to increase sales for bundling policies (home + auto) payment page.
Parties involved: Visual designer, creative design director, UX architect, front-end developers, content writer, product owner, project manager.
Timeline: 8 weeks
Design process: The UX architect and I would collaborate very closely on how to clearly display cost savings when you pay your auto + home in full using your bank account. In addition, we also wanted to clearly display when the policy effective date was going to start for each policy type. One of the challenges was how we can better display payment method for home policy after a user adds a payment method to their auto policy. We solved it by having the user’s payment method automatically show up for the second policy and then they can add another payment method within the dropdown if they choose to.
I ensured that the font hierarchy was larger for the total plan cost for each of the selectable panels and used green to make the cost amount stand out more. All other costs are important but total plan cost was the most important information to call out. I also used Allstate’s component library to stay on brand. Every week I would make design iterations and present to the creative design director before presenting to the larger group/parties involved. During the implementation process I also worked with the developers when they had a question regarding a style component that was not necessarily already coded in their system.
The Allstate Corporation protects people from life's uncertainties with more than 113 million proprietary policies. Allstate offers a broad array of protection products through multiple brands and diverse distribution channels, including auto, home, life and other insurance offered through its Allstate, Esurance, Encompass, SquareTrade and Answer Financial brands.
Business requirement: Redesign the UX and visual experience to increase sales for bundling policies (home + auto) payment page.
Parties involved: Visual designer, creative design director, UX architect, front-end developers, content writer, product owner, project manager.
Timeline: 8 weeks
Design process: The UX architect and I would collaborate very closely on how to clearly display cost savings when you pay your auto + home in full using your bank account. In addition, we also wanted to clearly display when the policy effective date was going to start for each policy type. One of the challenges was how we can better display payment method for home policy after a user adds a payment method to their auto policy. We solved it by having the user’s payment method automatically show up for the second policy and then they can add another payment method within the dropdown if they choose to.
I ensured that the font hierarchy was larger for the total plan cost for each of the selectable panels and used green to make the cost amount stand out more. All other costs are important but total plan cost was the most important information to call out. I also used Allstate’s component library to stay on brand. Every week I would make design iterations and present to the creative design director before presenting to the larger group/parties involved. During the implementation process I also worked with the developers when they had a question regarding a style component that was not necessarily already coded in their system.
