Better UX for showing pricing section in mobile

[plxity]

Describe the improvement you are suggesting in detail

Currently, when we switch from monthly to yearly or vice versa in mobile, the user doesn't get to know what exactly changes because there is no movement or update on the screen. I'm attaching a video for reference.

I feel we should scroll the user to the pricing section (where the amount is changed) if they switch between the monthly/yearly tabs.

Screen.Recording.2024-02-01.at.12.24.08.AM.mov

Additional Information & Alternatives (optional)

No response

Do you want to work on this improvement?

Yes

Please check the boxes that apply to this improvement suggestion.

• I have searched the existing issues and improvement suggestions to avoid duplication.
• I have provided a clear description of the improvement being suggested.
• I have explained the rationale behind this improvement.
• I have included any relevant technical details or design suggestions.
• I understand that this is a suggestion and that there is no guarantee of implementation.

[dguyen]

@goutham-documenso thoughts on the flow for this?

[goutham-documenso]

@dguyen Scrolling to the pricing card upon selection is a good solution, I'd also make the Switch sticky to the top. That way if the user scrolls to the Early adopter plan area, they'd still be able to see the switch and see the price difference instantly.

[plxity]

@goutham-documenso We can stack cards as the user scrolls. This could be a good solution as well.

[ElTimuro]

Please keep in that that at least 1 more (if not more) pricing Tiers will be added soon while implementing

[dguyen]

@goutham-documenso the switch sticky sounds good, can you please provide a design?

[goutham-documenso]

@dguyen I'll share the design shortly.

[goutham-documenso]

Here's the design
https://www.figma.com/file/2UpmlfgunLLbbyMImsTB3e/Pricing-page---mobile?type=design&node-id=0%3A922&mode=design&t=pP79PtdZBF7QfLuZ-1

@dguyen

[dguyen]

@plxity are you good with implementing the above design for mobile?

[JuanSebastianM]

Hey there!

I know @plxity already mentioned in the issue description that he'd like to work on this but since it's been 1 month since the last comment, I'd like to know if I can work on it.

[dguyen]

@JuanSebastianM, sure! I've reassigned it to you