So we have a quite unique product page. We sell datasets as maps on our website. Obviously we already have a primary CTA button that says 'Buy for $...'.
But we'd like to add some other options for visitors who don't just want to buy a dataset. For example: they might want to connect their own data to the set on the product page, but might not know that's possible with our service.

So we want to have the following options for our visitors:

  1. Buy dataset
  2. Connect your own data
  3. Buy a dashboard
  4. Try a free sample

(I won't go into detail for all of the options, but this is something we think will help sales and we want to try it out)

As for my question:
The first three actions all end in a purchase. And the second and third option are more expensive than the first one. Which makes all three of the actions about as important.

So how can I have four actions(buttons) on the same product page of which three are about as important, without having three buttons that look like the same primary button?

I hope my question is clear and someone can help me with some good ideas!

This is a page a lot of visitors enter the website. They haven't seen any other page and most won't see any after this. So it's very important that we show our visitors what they can do with our products and tools right here. My boss knows our visitors and knows what most are looking for. That's how we came up with the three new options.

enter image description here

We're thinking about removing the collapsibles from the left side as well to make space for the other options.

2 Answers 2


I would; a) extract price from button.. So would place price on left, and button on right with just "Purchase now" b) on each button, left to title place Icon, for 1 and 3, icon should be cart (or some other appropriate icon, depending on what user gets after he clicks button).. On 2 would place icon for connect, you can find some. And on four then icon calendar, or other icon that is appropriate for trial period

All in general important info is what user gets after he clicks the button. If 1, 2, 3 are all checkout, then they should be same background color.

If 4 is contact form or something else, you can differentiate with secondary background color. Altough also leaving same color is perfectly fine.

General design also seems very clear, so I dont think you have lot of problems regarding usability at the moment.

  • I agree with your first point. It's something I had already added to the new design. I wanted to do the same thing to the sample, only with a $0 instead of a $235. You don't think having three buttons with the same style will look cluttered or be confusing? Action 1 is just a checkout, action 2 and 3 will remove the left part and open their own settings on the right (or something like that) and action 4 will also open a few options. Not clear on that one yet
    – Caitlin
    Jul 4, 2018 at 13:16
  • Im not sure what do you mean by "clustered". Regarding background color and style of your button, it depends from the rest of the application and in which way things are communicated with design, will you change background color. You can communicate with size (smaller button for option buttons), different background color, or just place some other icon for CTAs that will toggle options. There are plenty of icons suitable.
    – xul
    Jul 5, 2018 at 20:58
  • I wrote cluttered and not clustered. So I think that's where it went wrong. But I will try some different sizes, colors and icons to change it up a bit
    – Caitlin
    Jul 6, 2018 at 7:47
  • 1
    Icons usually do good. You can always test with showing it to some people, or pasting it here when design is done. UX is not so sensitive in this sort of cases, it can make a difference if you have thousands of clicks so then small design change can bring up clicks or leads. When you reach lot of clicks, you can always invest in A/B testing and Optimizely i.e. Cheers, good luck
    – xul
    Jul 9, 2018 at 9:42
  • Thanks for the info. I created a few options that I'll show my colleagues and we already wanted to use this as an A/B test case
    – Caitlin
    Jul 9, 2018 at 14:51

Maybe you can only use one general CTA which redirects the users to something like a pricing page, there you have the chance to display all the options equally without confusing and/or distracting the user.

I am not sure if this is possible or makes sense in your particular case though.

Example of pricing page

  • We see that a lot of visitors come in on a product page and leave quite fast. We think this might be because we offer such a large range of options, but the people who are looking for those options don't know those exist and only see a map. So I don't think they will click on a CTA that doesn't say exactly what they're looking for.
    – Caitlin
    Jul 4, 2018 at 9:31
  • Could you provide a mockup of what you are currently displaying? It would be easier to understand why people are leaving. Its also important to know from where they come to that product page, maybe they have different expectations because of the site before the product page. Jul 4, 2018 at 9:34
  • I added a screenshot to my post
    – Caitlin
    Jul 4, 2018 at 9:44

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.