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:

Leave a comment

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):

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

Leave a comment

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.

1 comment

Guiding Through a Complex Purchase

Buying a large banner print online can be overwhelming: what if you screw up the order? Signsite.com has developed a clever solution. When you first visit a product page (for example http://www.signsite.com/hanging-banners) what would normally look like …

Signsite.com_Product_Page

… transforms to this–

Signsite.com_Overlay1

And when you click Next the next tip appears:

Signsite.com_Overlay2

Click Next one more time:

Signsite.com_Overlay3

Click Next one last time:

Signsite.com_Overlay4

What I love about this tactic is that it accomplishes 2 goals:

1: Teaches the shopper how to fill in the required info.

2: Ensures shopper sees the customer service number so they can call if they still have questions.

Leave a comment

Starting the Process

The most important step in driving conversion rates is to get the shopper to take an action that clearly demonstrates interest. It doesn’t have to be a big action, the smallest of actions will do.

Something magical happens once an action is taken. When a visitor first lands on the site their personal investment is 0, and with 0 investment you have no relationship with the visitor. This is terrible for the business. However, the moment the visitor takes a concrete action things start to change. It might not be big enough to make a purchase but it’s infinitely more valuable than 0. To see an example of this strategy I’m sharing a screenshot from ontimeairfilters.com homepage. Ontimeairfilters.com is a website that sells a simple product– filters.  Here is their homepage–

Ontimeairfilters.com_HP

You’ll notice that the first thing they do is ask shoppers where they live (“Do You Like In A …”).  I tried both options and the results page is identical, which makes me think this question doesn’t really have a business purpose. But I bet it meets a big psychological purpose because the moment the shopper makes a selection (home or condo/apt) they are unconsciously starting the process of engagement.

And don’t assume such a tactic can only work for a site that sells filters. It can work for any site. Here is another example (notice the dropdown question)—

Gardensalive.com

And here is an example from freedomvoice.com.

Leave a comment