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:

  1. Landing Page

  2. Send Money - Enter Details

  3. Send Money - Details Complete

  4. Send Money - Review

  5. 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:

  1. Request Received - Pending

  2. 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