Can’t think of a well designed UX for Pay Now button
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I have a “Pay now” button and I can’t think of a well designed workflow nor the page this button should be placed.

I don’t know how to phrase what I’m looking for, but here we go:

  1. I hypothesize it is really important to place the customer payment button in a very simple place. (bonus points if you think of better copy then “Pay now!”)

  2. I hypothesize that with some wireframes, it’s possible to identify a very simple and consistent customer payment workflow from home page to signing a loan.

  3. I hypothesize for a good UX to be identified, its really important to play with the current website

In case you’re interested in the UX of sending a payment, I believe these screenshots will help you imagine the process.

Update

The Screenshots link above actually should go to Stripe, not dwolla as previously thought. I realized Dwolla doesn't do credit card processing. https://stripe.com/docs/checkout

Here’s a screenshot of one idea I had, but this doesn't appear to be the most intuitive place for it to belong.

Here's a screenshot of another idea.

Hi, I know this question is rather strange and unconventional. Perhaps you can add a comment that will spearhead me into asking the question in a better way?
akshatpradhan over 5 years ago
Have you provided the actual website here? Just curious. Thanks! I'll have my answer ready soon.
gabrielnahmias over 5 years ago
awarded to alixaxel

Crowdsource coding tasks.

2 Solutions


How about this?

I think the above UI should appear in the homepage. I'm also under the strong impression that the lender doesn't have the final say at this point. Basically, he's just making an offer for the borrower to accept or reject (and potentially negotiate conditions afterwards), so it doesn't make sense to use such a definitive ("Pay Now!") verb for the action, and you shouldn't be accepting/showing the credit card form details at this point.

The way you have setted it up now, the interaction is totally geared towards the lender, but you still use "Lender" / "Borrower" (as opposed to "You" / "Borrower") in the headings below. Thinking about this gave me an idea: you can keep the heading titles as they are, and change the button text from "Offer this Loan" to "Offer this [Payment] Plan". That way, a borrower could also use your website to initiate a loan with someone they know (a friend or a family member for instance). The Lender / Borrower form below would then turn to:

This interface should not be visible in the initial stage (to avoid cluttering the homepage).

You have several options to show it when the user clicks "Offer Loan Plan":

  • make it visible with jQuery.slideDown()
  • open it in a modal window
  • post to another controller/action

I think this is a cool way to make the process agnostic and work both ways. Once either party sends an offer, you display an interface much like the "promissory loan page" that you already have. It's in this page that you should display a list of possibly existing negotiations revisions along with the status of the loan:

  • Accepted if both parties agree to the plan but haven't linked payment methods yet
  • Ongoing
  • Pending if either party is yet to sign
  • Rejected if either party rejected the plan

Depending on the status, you show different stuff (you could name this page simply "Loan Plan [ID]").

For accepted status (not yet ongoing), you show a button for each payment method the lender can use:

  • Add / Link / Connect Dwolla
  • Add / Link / Connect Credit Card
  • Add / Link / Connect Coinbase (BitCoin)

For ongoing status, you show how the repayments are going in a table with appropriate contextual classes.

For pending status, you show a message (depending who is viewing it) and renegotiation options:

  • We are still waiting for the other party to sign this deal.
  • You can accept this deal by signing it, renegotiate it or reject it.

Same thing for rejected status:

  • You rejected this deal.
  • The other party rejected this deal. Would you like to renegotiate the conditions?

Don't use "Pay Now!" though. Reading it, I always imagine Jesse (from Breaking Bad) saying it followed by a charismatic curse word of his. =P "Connect [Payment Method]" seems quite nice IMO, and it gives you the chance to support several payment options if you wish.

Also, since Dwolla seems out of the picture now (at least partially), I'm not sure what other mechanism you will use to check the balance of the borrower and automate the repayments to the lender. But it's one more reason why the agnostic "Loan Plan" page should allow both parties to link payment methods.

Another benefit of the agnostic call to action: if a borrower visits your website (as it now), he has nothing to do (best case scenario: he will send an email to the lender letting him know about the website, but I assume this process could be intimidating or boring for him/her). This way, he can "invite" the lender to your website by filling a small form - and assuming you would send a friendly, non-intrusive email I think this would actually increase the probability of initiating a loan.
alixaxel over 5 years ago
Interesting.
gabrielnahmias over 5 years ago
@alixaxel and @gabrielnahmias I haven't forgotten about you guys. I had various functions to attend yesterday and today and then I'm heading to Dallas tomorrow. I also need some time to thoughtfully parse your wireframes and feel out the workflow.
akshatpradhan over 5 years ago
Nice solution, @alixaxel. I like the general workflow you're proposing and agree with you when you say a separate page a form with loans details (borrower/lender info) makes the loan processing a bit cumbersome.
kc00l over 5 years ago

I have a small suggestion that allows for easier readability. Also, disabling the button after they click it is a good idea (modern). Here she blows:

Redesign

You can download and play around with the PSD here.

The other guy's solution might be well formatted but it looks straight out of a book. Anyway, I hope you like the initial offering I have for you here and included is a link to a repo I made just for this specific occasion. Mine was here first and don't forget it please! Haha, thanks.

And here you are, sir: https://github.com/gabrielnahmias/1-2-3-Go-Redesign

I had some time to look at your PSD. I’m tempted to think you used the phrase "Make transaction” as an all encompassing phrase to 1) provide a hint that the next step is to pay a one time fee to Lending round, and 2) provide a hint that clicking this button will notify the other party to review/sign the loan. While I think I see what you’re trying to do, my instinct tells me this phrase will actually introduce confusion. I believe this more after seeing the breakdown from @alixaxel about the possible workflows this can go. I could be wrong, but I currently can’t see the copy “Make Transaction” as the most intuitive solution to fitting the “Pay lending round fee” workflow into the current workflow of Creating/reviewing/signing a loan.
akshatpradhan over 5 years ago
I’m still going to tip you for the effort and explanation. I might create a branch that adds your copy and ask a potential user if the copy “Make Transaction” makes sense, but truth be told, when I first saw “Make Transaction”, I felt very confused by what it meant. I hope me not awarding you the bounty doesn't deter you from answering more bounties though!
akshatpradhan over 5 years ago
Also, I'm not entirely sure why you suggested disabling the button after clicking it. I should have asked that earlier, but I think I felt just so lost trying to understand "Make Transaction" that I didn't look into the disable button suggestion. I believe that's a UI anti pattern. http://www.uxbooth.com/articles/interaction-design/who-killed-the-inactive-button-state/
akshatpradhan over 5 years ago
View Timeline