Design mobile SaaS pricing pages

Business Benefits

Increase the number of purchased plans by making product features more accessible.


If you have 3 or fewer plans, create a stack format for your pricing plans by placing the plans one under the other so that users can scroll through them easily.

Make only the name of the plan and the price of the plan visible.

Add a drop down menu below each plan called View Details that reveals the plan’s complete features.

If you have more than 3 plans, create a carousel slider listing the plans and add features within each plan.

Eliminate the View Details section and structure your features to showcase additions to the previously viewed plan. Create fixed cells within your plan to maintain consistency across all features.

Increase the font weight of the pricing headlines to improve readability while keeping your content compact.

Keep the same font size to match a medium screen size and bold headlines such as the price and plan name.

Add a full-sized table to compare prices if you have 3 or fewer pricing plans, adjust the font size, and preserve white spaces in the format.

If you have more than 3 pricing plans, add the pricing plan in a single tab at the top of the page.

Add a box shadow to separate row and column headings from plan feature information.

Change the border opacity in your form to highlight the feature’s name and keep the design simple.

Reduce the contrast of the line separating the first and second column and increase the pixel size by 2 points.

Change each plan’s display to allow users to select plans based on the features they select.

Suggest the types of plans that contain their desired features and compare each of the plans one to another. This limits the amount of information on the page.

Last edited by @hesh_fekry 2023-11-14T15:55:23Z