What is venmo?
Venmo allows you to pay and request money from your friends. At its core, Venmo provides a social way to pay your friends when you owe them money and don’t want to deal with cash.
The goal was to pay $100 to Lillian Yang. I solely focused on the payment process and the related interfaces, but nothing else. As this is an obvious and short process, I deep-dived into each design component on the screen rather than generally skimming the entire flow.
How can I pay?
The left is the current Venmo app, and the right is my design suggestion.
‘Where should I look at first?’ This was the first question that came up in my mind when I looked at the main screen – oops, not a good start. Probably, a long-time user would already know where to look at, but to a novice user like me, it was too distractive. Apparently, there are too many components on the screen – a profile picture, a navigation bar, a menu bar, a promotional banner, a list of payment history of my friends, 2 unlabeled circular buttons(…Wait, what are those buttons for?), and finally, the big blue payment button.
Yes, if we just take a look at the big round-cornered button, it clearly shows the perceived affordance of clickability. The filling of Venmo’s primary blue color presents that this button is abled and important. Not only that, the text label serves as an obvious signifier of ‘payment’. A-ha!
Then why did it take some time for me to find this CTA button? The culprit is its location – the bottom-right of the screen. According to Nielsen-Norman Group, people start scanning a mobile page from the top-left and end on the bottom-left(People normally don’t even look at the bottom-right), which is called ‘F-Pattern’. In regards to this fact, no wonder why I wasn’t able to find this payment button as quickly as possible. (Remember how I ordered the screen components in the 2nd paragraph?) In this case, poor visual hierarchy (content structured in order of priority) is making poor Discoverability for the payment button.
Another mistake is that there is another button on the banner that is also round-cornered and blue. Is this ‘Explore now’ button as important as the payment button? Probably no. It only distracts the user’s line of sight.
Simplicity is not always the best
Last but not least, did you know that there are 2 more ways to pay other than clicking the blue button? Well, I didn’t until I clicked the 2 circular buttons next to the payment button and figure out they mean ‘Pay by scanning the QR code’ and ‘Pay with Crypto’. Fair affordance, but poor signifiers. I’d rather use text signifiers to clearly discribe what those buttons are.
Who to pay?
Getting to the point, this search field is a bad design. It lacks both affordance and signifiers. It lacks affordance because it doesn’t look like a touch field. The background of the search field isn’t distinguishable from the screen’s background, which required me time to find out that it’s actually a touchable field. Plus, the placeholder text doesn’t clearly show what action is available here. I would put a verb ‘search’ to indicate that a searching action is possible here. In addition, adding a search icon would be a great signifier here.
The friend list starts with ‘Top People’, whom I interacted with the most. The title field has a grey background, clearly showing that no action is possible on this label. Once I click a profile, it immediately takes me to the next payment screen. Showing no feedback of whom I selected a second ago can be convenient as it shortens the time and effort of clicking the next button, but only as long as the user selected the right profile. Sadly, humans make mistakes. Even I accidentally clicked the top profile when what I wanted to select was me (Lillian Yang). Sending money to the wrong person can be a huge nuisance. I would put an interlock constraint here to make sure the user selected the right profile and then proceed to payment.
How much to pay?
Once the user enters this page, the numeric keyboard shows up automatically as a good affordance and a signifier that shows one can insert numbers. However, the input field still doesn’t clearly show that it’s a ‘field’, and the text placeholder still lacks a verb of needed action.
Most importantly, this screen has simplicity, but lacks ‘understandability.’ For a first-time user like me, we need a clear conceptual model which maps the receiver of the money and the amount of money paying. On this screen, neither the receiver’s name in the blue text nor the location of the text reminds the user that they’re the receiver.
Finally, it’s time to pay. Unfortunately, this Pay button doesn’t have an interlock constraint. An interlock forces operations to take place in proper sequence. When any of the required fields are empty, the pay button should be greyed, showing it’s enabled. This way, the user can know that it’s not the right time to pay, something is missing.
Did I… pay?
Finally, it’s time to pay! When the user taps the pay button, it changes to green, showing some feedback that the payment is happening. It’s not bad feedback, but… what is the progress bar doing up there? Why do we need two separate feedbacks at a distance? Could we just merge them into one? Plus, why would we leave the previous screen there when we can’t even make any changes anymore? Why not take the user to a different loading screen to visibly present that a process is happening?
Not yet, the worst is coming. After the payment, Venmo doesn’t show us any feedback such as a (toast) popup. Then how do I know the payment was successful? The only way is looking at the top history that looks identical to other friends’ payment history. At least, it has a good mapping! The newest transaction is at the top!
Norman, D. A. (2013). The design of everyday things. New York: Basic Books.
Pernice, K., 2017. F-Shaped Pattern of Reading on the Web: Misunderstood, But Still Relevant (Even on Mobile). [online] Nielsen Norman Group. Available at: <https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/> [Accessed 9 September 2021].