Mobile
Bill Pay Redesign
Project Summary
Bill Pay is one of the top features on the Alkami Online Banking Platform by usage and add-on revenue. The previous mobile Bill Pay experience was designed in 2015 and lacked a lot of the features end-users had come to expect from the desktop experience. From a design perspective, I was tasked with updating the mobile experience to utilize Alkami’s latest design system to improve the overall experience for end-users and enable engineering to create a more scalable code base for future releases.
The Previous Design
The Challenge
Although still widely used, Bill Pay has become a dying product in the digital banking space that has stagnated to one in five active end-users routinely using it. Some of the ongoing challenges include:
Demographics
Bill Pay usage is dominated by Seniors (age: 76+), Baby Boomers (age: 57-75), and Gen Xers (age: 40-56) with over 67% of these end-users accessing via desktop rather than on a mobile device. Millennials and Gen Z users have little to no product knowledge of Bill Pay and typically pay their bills on the biller’s website.
Vendors
Additional constraints exist by the vendors that provide the back-end infrastructure needed to support Bill Pay for our clients. Alkami’s clients (banks and credit unions) typically choose a provider that best aligns with their infrastructure and customer needs. Many of the legacy vendors available on the market have not updated their systems to align with updated solutions like real-time payments that end-users have come to expect when using P2P platforms like Venmo and Zelle.
Design
The vendor customizations, verbose language, and complex drill-in user interface made the previous mobile experience difficult for new users to understand how to accomplish simple tasks like scheduling a payment or managing a list of payees.
The Solution
Adopt Alkami’s design system and language into Mobile Bill Pay to create parity with existing mobile money movement products to open a future path for a consistent user experience.
Early Discovery
Utilized the design team's existing money movement personas to educate myself on the end-users wants, frustrations, and drivers. These personas were created by our research team when interviewing end-users of our money movement products.
Wireframes
Various iterations of the wireframes created while refining with product owners and design team.
The Research
Once the wireframes had been approved by product and design teams, I conducted usability testing via usertesting.com to identify any usability concerns with the patterns used in the new design.
Final Design
Make a Payment
With a high-emphasis “Make a payment” card on the Bill Pay Dashboard, end-users can now select a payee and quickly schedule a payment.
Add and Manage Payees
The secondary card allows end-users to both add and manage payees. On the add and manage payees screen, end-users can select existing payees and manage their details. New payees are added by tapping the floating action button and selecting if the payee is a business or a person. Once added, a notification appears with an action to make a payment.
Activity
Viewing activity for scheduled and past payments is now surfaced on the Bill Pay Dashboard. End-users are able to tap into the scheduled payments view with immediate actions to modify or cancel the payment. Filter and download functionality has also been added so end-users can easily find past payments.
