How to convert pricing plans to mobile without sacrificing user experience

How complex desktop design converts neatly to mobile

Is there a price that you should pay for taking a desktop-first approach to your products? The truth is, that it can be quite difficult to apply a quality desktop experience to mobile.

This was something we faced when adapting our premium marketing tools pricing plans from desktop to mobile. In this article, I will share the five steps we took to meet this challenge, how we were able to implement a fantastic experience for our users and what I learned from the experience.

Background & Motivation

Until recently, Wix’s marketing pricing plans existed on desktop only; so as part of improving our offering on mobile, we wanted to give our users the ability to upgrade their marketing tools from wherever they are — not just on their desktop interfaces.

The Challenge

Pricing plans are extremely important for a company’s bottom line — but also a potential point of friction for both the company and its clients. That’s why it’s so essential to create a smooth and enjoyable experience for users. To do this, the design should be simple, straightforward and convenient.

Initially, when I started to think about converting the desktop experience to mobile, I already knew what the main challenge would be: limited real estate. On desktop, the horizontal view allows us to display multiple plans on the screen right next to each other, which makes it easy for users to read and compare. However, because the mobile view is vertical, the real estate on the screen is much smaller. In order to meet the challenge, we needed to use creative design patterns and behaviors that did not exist on desktop.

The desktop version of Wix’s marketing plans. The horizontal space allows us to display multiple plans on one screen.

Getting Started: Our Workflow in 5 Steps

Step 1/5: 🔎 Research & Exploration

As opposed to the “normal” workflow, which usually starts with identifying project goals, I decided to begin the process with research. I started to investigate how other products display their pricing plans on mobile, and to explore different looks and behaviors.

I noticed that “expand-collapse” behavior is common. Although it allows users to see more elements above the fold, it hides the plan’s features and key information. In addition, this behavior hurts the orientation of the page. When I tried to expand and collapse plan cards on a small screen, the whole page “jumped” and I spent most of the time scrolling back and forth trying to understand the different plans.

After conducting the initial research, it became more obvious to me what I wanted to achieve and I started to write it down.

Step 2/5: 🎯 Defined Goals

Setting the goals is usually the first step of my workflow; but in this case, while I was exploring plans in different products, I really felt like a user. It helped me to refine the 3 main principles I wanted to achieve:

1. Preserve the comparison experience between the plans. Create a convenient experience of consuming complex information. Allow users to scan and analyze the plan’s features to take action.
2. Show all plans’ features. Be transparent. The information of each plan is crucial for the user to make a decision. They need to know what they’re buying. Hiding the information, as I saw in several products during the research, can harm user trust and leave them frustrated. Moreover, it misses the opportunity to supply all the information and make it convenient for the user to make the right decision.
3. The “Upgrade” action should always be accessible and visible. This is the main call to action. The user should be able to click “upgrade” whenever they want. They shouldn’t need to search for it.

Step 3/5: 📝 Simplifying Content — Showing Only the Most Important Information

The next step in the process was to define the most essential information for the user. I asked myself, “What are the most necessary elements from the desktop version that the user needs to accomplish the task of selecting a plan?”

I came up with the following list, started mapping the needed components, and mocking up the main screen:

• The name of the user’s current plan
• Additional offered plans
• The features in each plan
• Pricing
• A CTA button that allows users to upgrade
• Different steps that the user must take to purchase a plan

Additionally, in order to display all of the information, we needed to rewrite the content and make it much shorter. Some of the content on the desktop was hidden in tooltips. Since hovering on a specific action was not possible on mobile, we took the most valuable information and decided to keep everything exposed.

Step 4/5:📱Using Mobile Patterns for a Better Experience

At this point, I started designing the page. To take advantage of the limited space, I used common mobile behaviors and gestures. Here are some of them:

• Sticky behavior on the easy-to-reach area: Since “Upgrade” is the most important action, I wanted to give it the right placement, where it can always be exposed and accessible. Taking inspiration from Samantha Ingram’s article, The Thumb Zone: Designing For Mobile Users, I applied the color modal technique for better usability. As shown in the image below, the green area is the easiest for the user to reach with their thumb, while the red is the hardest. Knowing this, I put the “Upgrade” button at the bottom of the screen and made it sticky, so it was always easy to reach.

Thumb-zone mapping for left- and right-handed users. The “combined” zone shows the best possible placement areas for most users. Image from the article — “The Thumb Zone: Designing For Mobile Users” by Samantha Ingram.

• Using wide touch area: The main task on the page is comparing plans. I wanted to expose the plans we offer at the top of the screen so it would be clear that this is the page’s main focus. I decided to show it as four thumbnails in a grid of four cells, so the user can easily access the plan. I made sure to make the “tap” area large enough, so when the user taps on something, it won’t be misinterpreted.

Exploring the touch area with different grids. You can see that the options on the right are too close together and on a mobile screen it can be hard to tap.

• Shrinking header: When scrolling, it was very important and valuable to preserve the ability to switch between plans without scrolling all the way back to the top of the page. Therefore I decided to make the header sticky on scroll, so when the user scrolls down, the header collapses, but still includes all the plans. This sticky header uses the least amount of screen real estate and still allows for readable text and tappable target sizes. It frees-up more room to showcase the different features, so the user can easily understand all the benefits of a particular plan while still being able to navigate between plans.

The design phases the user sees when they scroll down. Notice that the header collapses and is replaced by a smaller, sticky header.

• Swiping vertically: This is a common behavior on mobile and it can enhance the user experience. This intuitive action gives users a proper orientation on mobile devices and apps. In this case, I decided to present each feature list in the same grid, while allowing users to swipe vertically on the list itself to navigate between the plans. This allows the user to easily scan, and quickly compare different features.

Putting each feature list in the same grid, allows users to easily scan and compare different plans.

Step 5/5: 🏗 Prototyping

Users expect superior ease and functionality on mobile, so prototyping is an essential step in the process. We worked closely with the fabulous prototypers, Shahar Mor and Maayan Polak; along with our amazing animator, Gur Margalit, to create a prototype in advance. With the prototype they created, we were able to test and finetune the behavior.

Conclusion

We can confidently say that the mobile version accomplished the goals that were defined at the beginning of the process. We provided users with another channel to upgrade their set of marketing tools in a way that’s convenient. From a business perspective, we managed to increase overall exposure to our marketing tools offering, while at the same time increasing the number of purchases. We saw that 40% of users that arrived on the ‘Pricing Plans’ screen complete the flow of upgrading their site. Most importantly, we saw the total number of upgrades increase across the board.

I want to share credit with some of my colleagues since I couldn’t have done this without their help:

• UX design team lead — Roy Ninio
• UX writer — Amber Sella
• Development work by Erez Paperny and Guy Sudri
• Product Manager — Katrin Zotchev

Thanks for reading!

Article edited by Max Moser & Jenni Nadler

Is there a topic you want to see covered by the Wix UX team? Let us know by filling out this form.