Insurance Bill Schedule and Payment - Mobile First Responsive Design

I worked with one of the largest insurance companies in America to design the experience of Bill Schedule and Auto Pay sections for the Individual Market web application.

My Role

Lead Experience Designer (Strategy, design)

I was expected to design a very simple and easy to use experience which should be consistent with other digital products. I was also expected to design these features to comply with WCAG 2.1 standards.

I worked with a business analyst and a product owner to understand project requirements. I focused on the Mobile First Design approach to make these transactions very simple and easy for the customers so that they can schedule a payment with minimal effort on a mobile device.

Bill Schedule

There are four different bill schedule options offered. Following are few screens from final iteration.
View Bill Schedule presentation flow.

Auto Pay

Auto Pay was not offered for all schedules due to complex business requirements. I have to translate it in a way that bill pay transactions should appear transparent, easy to understand with minimal instructional copy. Taxonomy was a big challenge for me. The company's taxonomy was defined at a very high level. I decided to go with a tradeoff where usability wins over consistency.
View Auto Pay presentation flow.


I prepared three sets of templates with three viewports based on layout variations for this web application. I present them to developers and allocate my time to support implementation design. I also offered my help to implement WCAG 2.1 standards in the development and wherever required.
View more templates.

Align with the "One Guardian"

I've aligned my design with the "One Guardian" initiative to maintain consistency across all Guardian products and services. Following is an example of a native iOS payment app design by another team.
View more iOS app screens onApp Store.