Mobile
Wire Transfers
Project Summary
Dating back to the days of the telegraph, a wire transfer is one of oldest ways to send money. In the modern world, a wire transfer is a faster way to move money from one person to another than other transfer methods such as ACH, and P2P payments. Sending funds through a wire is one of the few options available to move money internationally.
Alkami’s digital banking platform had several options built into its desktop platform, but the mobile experience did not include any way for an end-user to send a wire transfer. I partnered with another designer from the UX team to design the first mobile release for wire transfers for our retail end-users.
The Challenge
New Design System
With our new design system in beta, Mobile Wires would be the first mobile product to utilize this new design system.
Engineering
The money movement engineering team would be the first development team to use our new vue.js components of the design system. This required working closely with our front-end engineering team to ensure the money movement team clearly understood the components' interactions and report any bugs found.
Scalability
Design a mobile-first product that could extend to desktop to allow development teams to use a single code base for both platforms.
The Solution
A mobile design solution for Retail Wires that could be scaled for future releases from both a product and design perspective.
Discovery
Sketching and early wireframes from two virtual working sessions with designers and product owners using Miro.
LoFi Designs
Iterations of LoFi designs for both domestic and international wire transfers. Several adjustments were made throughout the LoFi process because of the limited number of components available in the beta release of our design system.
The Research
Before moving into the HiFi design phase, usability testing was done to see if users could successfully navigate through the flow and send a wire. The unmoderated testing was done through usertesting.com with 5 users who had previously used a mobile money movement product.
Final Design
History
End-users can view wire transfer history and expand a single transaction to view additional information or send a new wire to the same recipient. Initiating a new wire transfer is triggered by tapping the floating action button at the bottom of the screen. When tapped, a menu expands to reveal actions like initiating a new wire transfer or sending a new wire transfer to a recent recipient.
New Wire Transfer
When the new wire transfer action is tapped in the menu, a bottom sheet is launched with the option to send a domestic or international wire. Once an option is selected, end-users can choose a recent recipient or begin inputting information for a new recipient. When the recipient information if collected, the end-user advances to the next screen to enter the amount and select a funding account for the wire. When an amount is filled, the user taps next and lands on a summary screen with an overview of the wire transfer before they tap the button to submit the wire. With the varying amount of information being entered in this experience, it was essential to utilize progressive disclosure to not overwhelm the end-user as they worked through each section. A step navigation was added at the bottom of the sheet for the end-user to go back to previous sections if they needed to make any changes.
Domestic Flow
International Flow