Venmo Android Redesign

Problems

Venmo, a product many people use to send one of the most essential personal possessions: money. Sending something of this caliber of value is no joke, and one mistake can put a real big dent in your financials. Unfortunately, many people make such mistakes — but they can’t blame the company. These mistakes are surely due to user errors (pressing the wrong button, typing the wrong amount, etc); however, I think these user errors are driven by poorly designed user interfaces. In addition to user mistakes, it simply takes too many taps to complete a single transaction. It seems as though Venmo’s mobile app focuses too much on intertwining money transactions and social media, that it falls short on the usability of the app.

Current Venmo UI

Current Venmo initial screen
Current Venmo transaction screen

Initial Home Page Redesign

When a user opens the app, she is brought to a page where she sees her friends’ transactions with their friends. Venmo introduced this interesting concept of taking money transactions and putting it in the context of social media. Very cool idea, but a typical user doesn’t open Venmo to “browse” at what kind of transactions their friends are making. When a user opens Venmo, they’re most likely opening it to begin a transaction (sending or requesting money). Thus, the primary usability priority of the home page is to allow the user to begin a transaction; displaying a feed of transactions is a secondary priority.

initial Balsamiq wireframe (Home Screen)

I first created a new default “transactions” tab to accomplish this. In addition, I removed the “public” tab because realistically, no one cares about what kind of transactions strangers are making. The “transactions” tab sits in between the “me” and “friends” tabs so the user can easily switch into either tab through one left/right swipe.

The next significant change is that there are a few “favorites” that a user can choose from whom they make transactions with often. For example, two people who live together may pay each other more frequently than their friends. This is a quick way for a user to quickly open the app and select the recipient without typing in their name or username.

initial Balsamiq wireframe (Transaction Confirmation)

I then addressed the common user error of paying/requesting money unintentionally. Venmo currently merely shows a very subtle confirmation text that replaces the “pay” or “request” text on the button. To display a clearer confirmation message, I decided to show a modal pop-up dialog when the user pressed the pay/request button. The idea was to grab the user’s full attention using a modal text box that overlays (almost) the entire screen.

After creating the initial mock-ups, I presented it to a few colleagues and received feedback on the redesign. They seemed to enjoy the transaction screen as the initial screen, but expressed concern about the confirmation mechanism. Although the modal pop-up grabs the user’s attention, it could become very annoying and disruptive of the user experience. In addition, most people mistakenly choose “pay” when they meant to “request” because the buttons are so close together. Thus, the close buttons still make it very easy to accidentally tap on the wrong one.


Final Home Page Redesign

After iterating on the design, I filled in the details of the redesign and created a high fidelity mock up. As you can see, the transaction form follows the same general design of the current implementation. The user can now complete all details of a transaction right from the initial screen.

Transactions tab in the home screen

You can see that the “request” and “pay” buttons are much different now. I wanted to completely rethink the user interaction when confirming a payment or request. Instead of a single tap, an important transaction should be made with a more deliberate action. The user will hold either “request” or “pay,” and the respective side of the large button will enlarge and eventually cover the other text. In particular, if the user holds “Pay,” the right half of the big blue button will enlarge into the left half. This makes it seem like the selected option almost engulfs the other option, making it very clear to the user which one they are not selecting. The selected side will completely engulf the other side after 3 seconds, then in which we show a different confirmation button. This one, the user can simply tap to confirm their transaction.

Here is an example of a user paying $25.00 to a favorite contact:

User began holding “Pay”
User sees that “Pay” overcasts “Request”
User can now tap to confirm the transaction

Similarly, here is the interaction for the user requesting $25.00 from a favorite contact:

User began holding “Request”
User sees “Request” overcasting “Pay”
User can now tap to confirm the request

Conclusion

I hope that Venmo moves towards this direction of thinking: usability > company brand (social media * money). Please let me know what you think of this redesign!

Like what you read? Give Rick Miyagi a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.