Here’s how I made changes to my Trippeo subscription page to eliminate unnecessary clicking.
The user decides whether they want to be billed monthly or annually. The annual pricing is 17% cheaper. When a user decides on a plan, the “Next” button appears. This was set up so that a plan would have to be selected before the user can proceed.
However, this is confusing and tedious. When a user selects the Team option, and click on the annual/monthly toggle to see the different pricing, their selection disappears. They then have to click Team again. On the technical side, this happens because there are actually 8 plan options, 4 each in monthly and annual billing. But as a user, I just see the four team size options. I would think that the toggle is changing the pricing, not showing me 4 completely different plans than what I selected from before.
To make this less confusing, I kept the user’s selection even when they toggle between annual and monthly billing.
When a user selects a plan, I update a hidden input value with the selected plan id. I also store the size of the selected plan in a variable (Individual, Team, Studio, or Company). I called this variable selectedTeamSize.
When the user clicks on the toggle, I check to if selectedTeamSize has a value. If so, I first remove the current highlighted plan. I then look in the plan table that is now showing (either annual or monthly) and find the plan with the same team size. I highlight that plan and update my hidden input value with the new plan id.
In the example above, the user first chose the Studio option in the monthly plan chart. When the user clicks the toggle to switch to annual billing, the Studio option for the annual plan chart is automatically selected.
This makes the selection process smoother and eliminates confusion.