Venmo UX case study

User experience research and redesign proposal for the mobile app Venmo created for my Experience Design for the Web class project.

PROJECT BRIEF

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

APPLICATION

Venmo for iOS (based on Version 7.1)

ROLE

UX Researcher & Designer

TIMELINE

Spring Quarter 2018, 10 Weeks

CHALLENGE

While the Venmo 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 making 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. From there, 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.

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.
Why did you use Venmo?
Tell me about the last time you used Venmo. (describe step by step)
Have you ever made a mistake on Venmo, how did it happen?
What features do you like and most use? Why?
What features do you not use? Why?
Do you have multiple bank accounts/cards connected to your Venmo?
How much time do you spend on the homepage?

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 of the app and determine the areas of the app I want to focus on redesigning. 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.

PAIN POINTS
  • Landing Page — Social feed isn’t relevant to most users while more key functions aren’t prioritized.
  • Sending Payment — Users cannot view balance or change payment methods while on the transaction page and have to cancel the entire transaction to do so.
  • Paying vs. Requesting — Due to button placement and combined transaction processes, users have either made an error or have had to triple check to make sure they have selected the correct action.
  • User Identification — Users often feel uncertain if they found the correct user when making a transaction; Sometimes due to lack of profile picture.
OTHER INSIGHTS
  • The current hierarchy of the navigation bar doesn’t reflect user ranking of usefulness.
  • There are not enough error prevention messages before making a payment.
FOCUSED AREAS & PROPOSED SOLUTIONS
Landing Page
  • Prioritize main function: New pay/request button placement
  • Incorporate personal profile features
  • Move social feed
Pay vs. Request
  • Both Pay and Request have their own individual button on the landing page.
  • Create separate and unique transaction pages for Pay and Request.
  • Pay and Request are clearly labeled throughout the process of their individual pages
  • Both pages feature only the necessary functions to further distinguish the two pages from one another.
    (ex. Pay requires payment method while Request does not)
Pay Transaction Page
  • Integrating a drop down menu of all the different payment methods into the payment page
  • Displays Venmo balance and all available bank/cards
Navigation Menu
  • Reorganize hierarchy of navigation menu to prioritize the most used features
  • Consolidate original incomplete and notifications page content

PROTOTYPE & TESTING

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 & NAVIGATION

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

All Versions - Social feed is relocated to its own page linked in the navigation bar

LANDING PAGE & NAVIGATION

Iteration #1

Converted original sketches to high-fidelity mockups (aside from icons) 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
  • Clicking 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 & NAVIGATION

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 & NAVIGATION

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 & NAVIGATION

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 PAGES

Wireframing & User Flow

Since the original Pay/Request process is combined until the last step where the user clicks to Pay or Request, I have found many users have accidentally clicked 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 PAGES

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 visible but disabled and other payment methods are available to select

PAY & REQUEST TRANSACTION PAGEs

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

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. It will be interesting to see what changes and new features they continue to roll out!