VENMO

Experience Design

Visual Design

 Adobe CC, Sketch, Flinto

Yahoo Design Challenge

Venmo is a mobile payment service that allows users to transfer money between one another using mobile apps. This project reimagines the Venmo iOS experience in a new perspective, from improving usability through reorganizing their user flow and enhancing user privacy in Venmo’s social feed.

USER STUDIES

To understand how user interacts with the Venmo app, I interviewed Venmo’s largest user base – millennials in their 20s who uses Venmo on a regular basis for small amount of transactions. These users mainly lives in metropolitan areas, and uses Venmo between their friends for splitting meals, drinks, taxis, and paying rents. User personas were created based on the interview to gain insight on how users feel about Venmo.

83% of users don’t use the social feed feature.

71% of users are concerned with the privacy setting.

65% of users want to quickly pay/request money when they open the app.

52% of users say there are many features in the menu that they never use.

41% of users thinks the visual design is old and not intuitive.

“Paying someone using Venmo is kind of hard when you are drunk. There are so many taps!”

“I hate the social feed because I don’t care about my friend’s paying activities.”

“There are tons of things in the hamburger menu that I never use or know what it is.”

DESIGN GOALS

Based on the insights from users, I came up with goals to redesign Venmo to improve its usability and look and feel.

  • Reorganize information architecture
  • Redesign the Pay/Request user flow
  • Create new UI design that is exciting and aesthetically pleasing
  • Downsize the social feed feature
  • Disable privacy settings

INFORMATION ARCHITECTURE

The user study reflects that more than half of the user rarely uses all of Venmo’s features in the menu system. Moreover, there are a few redundancies in the user profile page and the personal history transaction page. To define a new menu system and decide what features are most important to the user, I conducted a card sorting exercise with 6 users to understand their priorities.

From the result of the card sorting exercise, it’s clear that the current menu system is obsolete since users rarely uses most of the features listed in the menu. Instead, I adopted a new system similar to Snapchat which uses swiping gestures to access different screens. The new system prioritizes Pay/Request feature and makes it the first thing the user see when opening the app. The swiping gesture minimizes elements on each screen, and makes the micro-interactions enjoyable and pleasing.

PAY/REQUEST USER FLOW

Based on the user study, the Pay/Request flow can be simplified and more accessible for users. Many users are frustrated with the privacy settings because the button to set privacy is hidden right on top of the pay button. I conducted another card sorting exercise with users to see what they prioritize.

The result shows that users emphasize the amount and payee much more than the memo (social feed). Using this result, the new Pay/Request user flow asks users to fill in transaction details according to the priorities listed above.

ACCESSIBILITY

One accessibility issue with the current app is that there isn’t enough visual cues to differentiate between Pay and Request. To enhance visibility, I designed two colors for the Pay and Request buttons, and increased the text size to highlight their differences.

SKETCH

After building out the information architecture and user flow, I started sketched out what the new UI would look like on paper. I experimented with a few different layouts.

Home Screen

The home screen brings user straight to the pay/request feature where the user can immediately enter the amount of the transaction, instead of Venmo’s payee-first tradition.

Transaction Detail 01: Payee

After the user pressed the Pay/Request button, they will be taken to the transaction detail screen where they can enter payee details. There is an optional QR Code scanning function to make it easy to find payees.

Transaction Detail 02: Memo

After the user selected the payee, they can fill in the memo field. The privacy setting is removed, and all transactions are now only visible between the user and the payee. When the user fill out all the details, they can press “Pay/Request” on the top right corner of the screen to complete the transaction.

History

The history screen shows the user’s past transaction history in two tabs: pay and request. By scrolling down, the user will be able to view their entire transaction history, or search for a particular transaction by using the search function on the top right.

Balance

The balance screen where the user can view their balance, change profile, manage bank and cards, and adjust settings. On the top left, there is a QR Code where it displays the user’s unique QR code for other users to scan.

VISUAL IDENTITY

Based on the Venmo color palette, I added vibrance and saturation to the new colors, giving it a fresh look. Besides the default blue, I also introduced a green gradient and a pink gradient. The three gradients: green, blue, and pink. The blue is mostly used for background, whereas the green and pink are used to differentiate between Pay and Request.

I also created new icons that goes along with the new gradient.

The new Venmo logo with fresh gradient background color.

The original Venmo logo with darker gradient.

Color Palette
Icon Set

PROTOTYPE

App Screens

Home

Profile

Balance

History: Paid

History: Requested

Request Select User

Request Memo

Pay Select User

Pay Memo

Invision Prototype

Click here for full screen view.