VENMO 
UX CASE STUDY

Improved utility of the landing page/navigation and reduced user error by streamlining transaction process.

PROJECT BRIEF

Examine an app or website and develop a proposal that identifies usability issues using user research and provide solutions backed by design thinking.

ROLE

Researcher & Designer
Conducted qualitative and quantitative research, defined pain points, ideated solutions, and created wireframes and mock ups using an iterative process.

APPLICATION

Venmo for iOS (based on Version 7.1)

TIMELINE

DH150: Experience Design for the Web
Spring 2018, 10 Weeks

CHALLENGE

Venmo is a digital wallet that lets you make and share payments with friends. While the app is convenient and has great functionality, the usability of the app can be improved to prioritize the most used features and prevent user error in transactions.

As a Venmo user since the beginning of college, I found myself pointing out aspects of that app that frustrate me and I wondered if more users had relatable issues. I conducted user research to identify the app's pain points and proposed a redesign of the app.

PROCESS

DISCOVER

To investigate the problem space, I conducted basic business research and multiple forms of user research. I started with user interviews to get a sense of their overall experience with Venmo and what problems they faced. From there, I used the data to formulate questions on a survey and sent it to a bigger pool of users to find if there are commonalities in user needs and the challenges users faced. I also examined competitor payment apps using cognitive walkthroughs and research.

BUSINESS RESEARCH

I consulted their website to understand Venmo's business goals and the features provided to match these goals.

  • Make quick transactions with friends and family
  • Connect and share transactions with people around the world
  • Quickly transfer money to your bank
  • Conveniently make purchases when shopping mobile web and in apps
USER INTERVIEWS

I conducted 7 individual interviews to gain insight on why they use Venmo, to describe their experience, and to get feedback on what they enjoy and the challenges they face.

A few questions I asked —
Tell me about the last time you had to pay someone.
Tell me about the last time you used Venmo. (step by step)
Have you ever made a mistake on Venmo, how?
What features do you like and most use? Why?
What features do you not use? Why?
How much time do you spend on the homepage?
Do you have multiple payment methods connected to your Venmo account?

USER SURVERYS

I reformulated survey questions to validate the user needs and concerns voiced in the user interviews with a larger pool of users. Survey included multiple choice questions, a likert scale question, a rank order question, and free response questions.

Responses: 44 Users
Age Range: 17-28

COGNITIVE WALKTHROUGHS

I conducted cognitive walkthroughs with different payment apps by giving users a set of tasks and have them explain their journey as they complete it. I then asked follow up questions for the user to describe their experience and compare the apps.
The apps I tested include Venmo, Circle Pay, Cash App, and Google Pay.

DEFINE & IDEATE

I synthesized my research which allowed me to define the pain points and determine the areas of the app I want to focus on redesigning.

LANDING PAGE
  • Social feed is not relevant to most users
  • 30% of survey takers do not spend any time on the social feed and move straight to other features
  • The most important functions to users are not easy to view or access
  • Users rather see their own transactions than their friends
PAY VS. REQUEST
  • Pay and Request functions are combined on one transaction page
  • 45% of survey takers have accidentally paid another user instead of sending a request or sent a request to another user instead of paying them
  • Buttons are easily misread since they are the same color and are positioned right next to each other
PAY TRANSACTION PAGE
  • Users cannot view current balance
  • Users cannot switch debit/credit card payment methods
  • Users must cancel entire transaction to view or switch.
  • Switching payment methods required at least 4 steps
NAVIGATION MENU
  • The navigation hierarchy does not reflect the functions that users use most
  • 0% of survey takers use the Scan Code feature when they search for a user
  • Survey takers rank the top 5 functions as Home, Transfer to Bank, Search People, Notifications, and Incomplete
  • The least used functions on the navigation according to survey takers are Scan Code and Invite Friends

PROTOTYPE & TESTING

I then drafted solutions to these issues that would modify the information architecture and user flow for certain tasks. I refrained from altering the style guide and from adding entirely new features to focus on improving the existing functionality of the app. I sketched paper wireframes of the redesign and later converted them into high-fidelity mockups based on the current Venmo style guide and UI design. I practiced an iterative process of prototyping, testing, analyzing, and refining my designs.

Landing Page & Nagivation

Wireframing

Developed three different options for the landing page and navigation.

Version 1 - Header bar containing a Home button and separate Pay and Request buttons on either side. A profile section with photo, username information, and current balance. Navigation featured as icon buttons below for one-tap access.

Version 2 - A profile section with photo, username information, and current balance. Section for separate Pay and Request buttons. Navigation featured as icon buttons below for one-tap access.

Version 3 - Opens to calculator form to initiate transactions immediately with Pay and Request buttons to continue process. Side navigation menu is similar to current interface.

Landing Page & Nagivation

Iteration #1

Converted original sketches to low-fidelity wireframes and gathered feedback on the functionality and the overall UI design from a focus group (DH150 class).

Feedback

  • A majority of the focus group favored Version 2
  • Enjoyed seeing profile info and Venmo balance immediately
  • Transferring balance should still have its own button/page as a key feature rather than being consolidated
  • Tapping on the user’s profile photo to navigate to profile page is intuitive; Do not need a separate Profile button in navigation bar

Landing Page & Nagivation

Iteration #2

In creating the 2nd iteration, I reevaluated my initial research and took the feedback from the focus group into consideration.

Reevaluation - Venmo emphasizes the social aspect of the app and by isolating it in a separate page, I would be disregarding their business goal. On the other hand, my user survey results suggest users want to see their own transactions on the landing page initially rather than friends or strangers.

Modifications - My compromise is to combine Version 2's page with Version 3's side navigation menu. This allows for space to place the social feed on the landing page below the profile section. The social feed has the user's transactions tab displayed initially with the option to switch to friends or global. The sticky header and scrolling function allows for full page view. I also made changes to items in the navigation menu based on the user feedback.

Landing Page & Nagivation

Iteration #3

Taking another look at the UI design, I felt the 2 button block for Pay and Request looked too similar to the header bar element as the blue color block was too strong/bold to be placed in the middle of the screen and should be reserved for header and footer elements.

Modifications - I utilized the empty space to the right and left of the profile photo to create new Pay and Request buttons. The stand alone buttons placed on opposite sides of the screen also aids in error prevention. I colored the buttons a distinct but less bold color and labeled the buttons with icons that represent send money and receive money.

Landing Page & Nagivation

Navigation Menu

Navigation Menu is structured similar to the Venmo iOS Version 7.1 design with a profile header and a list of page tabs below. I prioritized the order of the tabs based on my user survey.

Notifications - I consolidated the Notifications and Incomplete tab into one tab labeled Notifications. In user interviews, users often grouped these features together as being related.

  • Requests tab contains payment requests from other users and friend requests
  • Incomplete tab contains requests from you


Banks & Cards -
I added this tab so users can access their bank and card information easily without needing to dig into the Settings tab. (Edit Note: I'd now change the title to Payment Methods rather than Bank & Cards)

Pay & Request Transaction Page

Wireframing & User Flow

Since the original Pay/Request process is combined until the last step where the user taps to Pay or Request, I have found many users have accidentally tapped the wrong action. Users would then have to cancel the accidental request they sent or contact the user they mistakenly sent money to send it back. Sometimes users don't receive the money back if they sent it to a stranger.

Created separate user flows for Pay and Request to help guide the user to complete their intended action. I developed wireframes by mapping out a user sending money to a friend from start to finish with my proposed solutions in mind.

Pay & Request Transaction Page

Pay Transaction Page

Upon entering the Pay transaction page, users found they could not view their current Venmo balance or change their payment method if they have multiple banks/cards connected to Venmo. They would have to cancel the whole transaction to access these components.

Modifications - Integrated a drop down menu of all the different payment methods and displays current Venmo balance

  • When a user's Venmo balance is enough to cover payment, other payment methods are disabled but visible
  • When a user's Venmo balance is NOT enough to cover payment, the Venmo balance option is disabled and other payment methods are available to select

Pay & Request Transaction Page

Request Transaction Page

Request has its own unique transaction page and process. It features only the necessary functions to send a request which is the user's name, amount $, and the note description. Aside from having one function it is clearly labeled in the header.

Reflection

Through this project, I learned a lot about gathering research and synthesizing the data in order to make informed design decisions. Framing questions to be more open ended rather than guided towards my biased opinion was more difficult than expected. I also learned a lot about mobile app design and how visual elements affect functionality. My earlier sketches and mockups lacked design consistency in terms of layout and copywriting when compared to the rest of the app. As I realized this, I made changes to the newer iterations. However, I was unable to test my newer iterations with users due to time constraints. Overall, I believe I made modifications that didn’t drastically change the UI and maintained the branding but prioritized and implemented features users valued the most.

Future Suggestions
  • Implement split payment between Venmo balance and other payment methods
  • Insert more error prevention regarding finding users and confirming the payment

VALIDATION - NEW vENMO UPDATES:

The Venmo app has updated a great deal since I finished this project back in June. As of September 2018, the app now allows users to switch their payment method within the transaction page, which was one of my biggest issues with the app for years and one of my proposed solutions in this proposal. This was an incredibly rewarding experience because it validated my approach to define and tackle problems. It will be interesting to see what changes and new features they continue to roll out!

My Version of Design - Jun 2018

Based on 7.1 Style Guide

Venmo App Version 7.21 Update - Sep 2018

7.2 Version Style Guide and Payment Update