I want to show customers landing on a product page 2 pricing options: annual and quarterly.

If customers choose to pay annually they will receive 15% off the price. Quarterly is more expensive as customers are not bound by a 12 month contract.

I've come across scenarios where a price is displayed as monthly but billed annually, but none where it is billed quarterly Examples: https://thedrum.slack.com/pricing

Quarterly payment option, displayed monthly

This is obviously part marketing ploy/ part stating the payment options.

Naturally I would say test various options to find out what is clearest for customers- however traffic is too low to achieve any statistical significance. Or that customers are familiar with prices displayed monthly, while the charge that is taken is annual (or other).

I am keen to hear how other people have OR would approach displaying a quarterly payment option.

2 Answers 2


Beware of falling into dark UX patterns. One of the classic dark patterns is to make price comparison difficult by showing different prices at different units of measurement to make one seem artificially better than the other.

When creating this price comparison screen, there are a few important things to keep in mind:

  • Show users the same unit of time measurement for each option.
  • Clearly state how the user will be billed.
  • Spell out the advantages or disadvantages of one option over the other.

This particular situation is well-suited to a 2-card price comparison, showing the total annual price for each option as the dollar amount, the billing period (billed annually or quarterly), and a short statement about why a user might choose one or the other.

Here's a very rough mockup of how this might look.

  • I appreciate the response. Dark UX is exactly the thing i am trying to avoid. I like the example above and the description/ benefit beneath the options. I also agree showing the same variable by way of comparison is good (i.e. annually) although in this example the user still has to calculate what they'll pay monthly and what they'll be charged at checkout. Would you consider adding the quarterly amount in there somewhere. e.g. $115/ year - $28 billed quarterly. Also (apologies i missed this out) but if they are not tied in annually does it even make sense to reference the price annually? Aug 18, 2017 at 13:17
  • 1
    I like this idea but I'd show the price per month as common denominator (not to say that lower price seems better) and MAYBE the annual price Sep 16, 2017 at 16:22

I would place a switch on top of that table to make the user aware of the different pricing options.

Since most users will assume its monthly/annual when only two options are available i would include said switch so they know exactly whats up.

You can include the discount in the same area, see the examples below.

enter image description here

enter image description here

  • Interesting- so you would show price in lowest common denominator below the product in order to illustrate difference in price. So for me that's quarterly. But the switch at the top determines the payment frequency? In your example the user would not see the full annual fee until checkout, is that right? Aug 18, 2017 at 13:28

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.