Design Exercise
Zelle
Zelle is a service that allows users to send and receive money between bank accounts in the United States. It's available through many banking apps, including Chase, U.S. Bank, Bank of America, etc. I’ve used Zelle quite a bit over the years and one of my favorite parts of the app and what sets it apart from others is the ability to send/receive money instantly without any additional fees.
For the quick design exercise, I focused on the mobile experience, making it more useful, personalizable, and easy to understand what you’re seeing and/or where you’re going next.
Some of the updates include:
A little “Calvin-ized” splash page - just a quick iteration on what the splash page could be.
Added two new sections to Zelle’s base Landing Page design
Pending Requests - gives the user the ability to instantly see requests requiring them to take action upon first jumping into Zelle.
Quick Send - gives the user the ability to see up to three “favorites” they they wouldl add themselves, or three “most common” contacts/recipients that they could instantly enter the Send Money flow to send them money quicky.
Added helper text to Zelle’s base design links Activity, Recipients, Preferences, to help customers understand what lies beyond each of those links.
Created a version of the Send Money flow as well as more useful versions of the Transaction Details screens
Pending Request details to include a transaction timeline
Paid Request to include a transaction timeline so the customer can see when they received the request and its relevant details along with when the paid the request and that transaction’s relevant details.
My version of the landing page along with Zelle’s base design for the landing page and my redesigns.
New Splash Page
Zelle’s base Landing page
My Landing Page redesign
My redesign of the Send Money flow starting with the Landing Page:
Landing Page
Send Money - Enter Details
Send Money - Details Complete
Send Money - Review
Send Money - Success Confirmation
1. Landing Page
2. Send Money - Enter Details
3. Send Money - Details Complete
4. Send Money - Review
5. Send Money - Success Confirmation
My redesign of two types of Transaction Details:
Request Received - Pending
Request Received - Paid
The prototype you can access by clicking the button below (labeled “View Figma Prototype”) is not a proper flow. It only shows tapping on the Pending Request on the Landing Page, the Pending Request’s details screen, and then what a details screen looks like for a paid request.
1. Request Received - Pending
2. Request Received - Paid