Designing a resilient autopayment system
My Role
Lead product designer
Citi had launched Autopay on mobile, but most customers were still setting it up on the web. In the app, people were paying manually month after month instead of enrolling. That meant more missed payments, more support calls, and weaker mobile conversion
Statement
How can we increase the adoption of autopayment among our app users, thereby significantly improving the download rate of the Citi mobile app in the app store?
Key Components
Designed reusable components like calendar cards and toggle redesign
Met with UI engineering to check feasibility, performance, and how new elements would fit into the shared component library
Documented states and edge cases so other payment flows in the future could reuse the same components for future releases
Date Selection
Autopay was treated as an afterthought – it sat outside the standard flow of checking balances and paying bills
Visibility was low – once people finished their main task, there was no strong prompt to enroll
Timing was off – people might visit the app on a random day, not when they were emotionally ready to commit to a recurring rule
Toggle Implementation
We surfaced an Autopay toggle directly under the payment details, so opting into a recurring rule is part of the natural confirmation step instead of a separate, easily forgotten process.
Key Insights
Increased on-time bill payments by 18% within the first 90 days of rollout.
About 30 percent of users who had been doing Autopay on the web moved to mobile over six months
Reduced friction of Autopay led to an 60% faster transaction setup.
Reflection
Behavior data is essential when what people say and what they do do not line up
Monitoring post-launch data became part of the design work, not an afterthought
Taking ownership of the collaboration in developing new components has established a clear path for future transaction features