Improved utility of the landing page/navigation and reduced user error by streamlining transaction process.
Examine an app or website and develop a proposal that identifies usability issues using user research and provide solutions backed by design thinking.
Researcher & Designer
Conducted qualitative and quantitative research, defined pain points, ideated solutions, and created wireframes and mock ups using an iterative process.
Venmo for iOS (based on Version 7.1)
DH150: Experience Design for the Web
Spring 2018, 10 Weeks
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.
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.
I consulted their website to understand Venmo's business goals and the features provided to match these goals.
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?
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
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.
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.
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.
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.
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).
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.
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.
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.
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)
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.
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
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.
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.
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!
Based on 7.1 Style Guide
7.2 Version Style Guide and Payment Update