Don’t Stack Vertical, Bro

Companies typically show pricing plans to desktop users as a table. This helps with Cognitive Ease.

Wait, what’s Cognitive Ease? It’s the measure of how easy it is for our brains to process information.

Anyway, back to the post. This is how sites typically show pricing plans to desktop users:

Getresponse.com_Pricing_Plan.png

The challenge is, how do we show that pricing plan on the mobile page? Here is how it looks:

Getresponse.com_Mobile_Pricing_Plan.PNG

On my phone, I can only see the first 2 plans. I need to scroll down to see the 3rd plan, which means it’s impossible to compare the Max plan with the Beginner plan.

Todoist.com seems to have solved this.

This is their desktop pricing plan:

Todoist_Desktop_Plan.png

This is their mobile plan. You will see plans are stacked side by site, thus minimizing cognitive load:

Todoist_Mobile_Plan.PNG

They display plan attributes in rows so it’s easier for the mobile users to compare their 3 plans side by side.

Here is another approach from Amazon’s mobile site:

Customized Product Comparison Table

There is one really important aspect of improved conversions: when you let the user drive their own experience they convert at a higher rate.

Drip.com understands this. When you go to their comparison page instead of showing a table with 3 pre-selected competitors Drip allows users to select the competitors they want to compare Drip against, thus improving the relevancy of the comparison.

This is how the page looks when you first get to it (https://www.drip.com/comparison):

Drip_Default.png

And this is what I see after I add my 2 selections (Pardot and MailChimp):

Drip_Open.png

Difficult Choices Kill Conversion Rates

We think choices are good, but if you don’t clearly describe the differences between choices you are most definitely hurting conversion rates. Consider this: A shopper is looking to buy a wireless temperature sensor for their grill. They land on https://store.weber.com/accessories/category/igrill-products/1640 product page:

weber_product_page

The item sounds impressive and within their price range. But now the shopper notices a second option called iGrill® mini and it’s priced lower:

Weber_Mini.png

The shopper is viewing this page on their mobile phone (small screen) and they’re switching back and forth between the 2 options to understand why the mini is cheaper. They like the lower price but a voice in their head says, “what’s the catch here?”

And unless they clearly understand why the mini is cheaper they aren’t going to buy.

It turns out that the difference between the 2 models are the number of probes you get. But in the 10 minutes I was playing on these 2 product pages I simply couldn’t figure it out.

I’m not the sharpest knife in the drawer, but neither are many of your potential customers. You aren’t designing experiences for the smartest shoppers, you’re designing them for average, easily distracted shoppers.

Here is an idea: add a piece of code so that if a shopper first visits iGRILL® 2 page and then goes to iGrill® mini, on mini page we add new bolded content under product description that says:

The difference between iGRILL® 2 and iGrill® mini is that with iGrill® mini you get just 1 probe slot and with iGRILL® 2 you get 2 probe slots.

This would make my choice clear.