top of page

Mobile Pricing Design

With the success of the Desktop pricing page, we decide to ride the momentum and continue redesigning for mobile.

Pricing_mobile_iso_tiny@2x.png
SM Logo_Full_Green_TINY@4x.png

Goals

Redesign our mobile pricing pages, to better showcase our offerings while increasing our conversion rates.

Results

+15%  conversion increase

The series of mobile improvements on pricing page had a significant impact on our conversions.

Mobile pricing pages

Like our desktop pricing page, the mobile pricing page had not been touched in 3 years. The ratio of user traffic from the mobile pricing page compared to traffic from the desktop page was very low. Once we received positive results from the desktop pricing page experiments, we simplified the mobile pricing page by applying the same rules to see if this would also affect our mobile conversion.   


We optimized the mobile pricing page by taking a card approach and applying our new style. The features were reduced on each card, only showing the top 5 features. Users could further discover the plan features by selecting the “See details” to get to an in-depth look at the features,  which was similar to our pricing grid on desktop.

What we learned

By making the mobile pricing page clearer and allowing users to find out more details about the plans on mobile, we were able to convert users to purchase a paid plan.

1 Mobile_flat white_TINY@2x.png
Mobile pricing grid -old.png

Mobile pricing summary page - old

1 Mobile_flat white_TINY@2x.png

Mobile pricing summary - new

Mobile pricing summary and details page

Pricing details - annotation_2x-tiny.png

Conclusion

We are constantly looking to improve and update the pages as we build new features and make the mobile experience as robust as our desktop experience. Since the release of the Personal pricing pages, we've also added team packages to our pricing page, which has proven the scalability of this design.

bottom of page