USAA In-App Bill Pay
The Property and Casualty (PNC) Team here at USAA needed an updated insurance bill payment experience for the USAA app in iOS and Android. The existing experience previously just linked out to the old web experience. The new experience needed to fulfill all of the insurance bill pay requirements, while also being in alignment with USAA Bank's bill payment experience.
The Challenge
The Bank team at USAA had recently finished creating their own bill payment experience for the app, but since PNC had additional criteria and different rules around payment, we couldn't simply leverage their designs. Instead, we tried to keep it consistent where we could so there would be familiarity across products. Unlike Bank, whose bill pay allowed you to pay external bills, the PNC team needed the user to be able to view and select individual insurance policies on the account. This required a unique functionality.
My Role
As the lead designer on the project it was my job collaborate with our business stakeholders to gather requirements, and then to lay out the experience using the USAA Reveille design system for iOS and Android, referencing USAA Bank's experience so that the two flows would be consistent. Several iterations of the experience were built as we discovered different limitations across platforms and the design system, and then additional coordination with the Bank's business and design team also lead to more design adjustments and tweaks.
iOS Hub and Spoke Form Experience
A special challenge for this project was that there were different forms available in the iOS systems vs the Android systems, so the two experiences are unique from each other while fulfilling the same criterias.
In iOS, a hub-and-spoke form was used, which had different menus sliding out and then returning to the main selection screen.
Android Dropdown Form Experience
Unlike the iOS kit, the Android experience did not include any kind of hub-and-spoke functionality. Initially I explored those designs, but after consulting with the Reveille design team, a different approach needed to be taken for both the PNC and Bank experiences. Instead, a dropdown execution was designed, as that was the easiest implementation that the kit allowed for at the time.
Information Architecture & Accessibility Markup
USAA has a higher than average percentage of older and visually impaired users, which requires USAA to have the highest standards when it comes to accessibility, with designers and accessibility specialists working together to create the best experience. Because of the different components used for the iOS and Android experiences, the two IAs are unique, as are the accessibility markups, although content is identical.
