In my web app I allow users to create payment plans for their subscribers. I currently only support one option: a monthly charge. I am working on adding multiple options, including one-time payments.

My question is how would you present this to the user? Here is my current idea. Users can 'Add a Plan', and choose 1-, 3, 6-, 12-month, or one-time payments from the drop down. The issue with this is that I want to prevent duplicate interval selections, and I'm having a hard time doing that with jQuery.

So, do you think there is a better way? I was considering changing the drop-downs to number fields, which would make duplicate detection easier, but then how does the user indicate a one-time payment option? A check box next to the interval field?

Any ideas on how I can make this clear and easy for the user? Thanks!

2 Answers 2


You could visualize it more and make it look familiar to the user, like the pricing plans your normally see.

enter image description here

In this mockup I visualized my idea where the option looks like the pricing plans you normally see. The user can select the pricing plan they want and they can alter the prices. In my idea there is also a formula behind it that automatically changes the pricing to likely inputs when the user changes one price. For example: in default state just the monthly plan is checked. When changing the price for the first time, all other prices will change also. This might help your users that don't have a clear idea of what they want to ask for a price. Making further changes to other prices won't affect other prices so it's all customizable.

That's my idea of perhaps making it more clear and easier.

  • 1
    I like it. It's visual, let's them play around with options without worrying about 'messing up', and would be pretty easy to implement. Thanks for the idea.
    – jmadlena
    Commented Mar 19, 2014 at 22:48

Few rules here:

  • present a limited number of plans to make sure they are comparable. Having 6-7 plans, users will get puzzled and eventually the conversin rate will decrease. 2 plans don't give the feeling of having a control over the options to choose, usually. 3-4 is best solution here.

  • to get what is the reason for choosing one plan over another user needs to have all the plans presented in a way that will let him/her compare oprions - so, side by side, including prices, cumulated price for a comparative period and features. Here's a great example: http://uxporn.uxpin.com/pricing-2/pricing-table-olark-ui-design-pattern/

  • however, you should keep it simple - if you present a dozen of oprions to compare it may be ok, but less is better, more - always worse.

  • one workaround the above is to present the same features side by side in various plans, showing presence or absence of a feature. They should be placed in a way that shows the extra features grouped together, so that the list of available features looks like it's longer in case of more valuable plans. This way you can pack more features for comparison, but again, don't go wild.

  • always present best option plan. No matter how you choose it, best profit to price ratio, most often chosen or anything else. Of course this option should be most valuable for you as a service seller as well. Don't choose the most pricey one here, and don't present multiple bests, so that plans don't compete with each other and use r does not need to choose between best value and best choice for example.

  • Thanks for the tips. That's great advice for anyone presenting plans to potential subscribers, however I am presenting a UI to my users to create some pretty basic plans (e.g. $15/month, $40/3 months, $100/one-time payment, etc.). I need more help on the presentation rather than the content of the plans, but you have great tips on how I present my own plans to my users. Thanks!
    – jmadlena
    Commented Mar 19, 2014 at 22:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.