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:
The challenge is, how do we show that pricing plan on the mobile page? Here is how it looks:
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:
This is their mobile plan. You will see plans are stacked side by site, thus minimizing cognitive load:
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: