Pricing Pages in Web Design: Getting Users to Sign Up

What is are the first thing a visitor will look at before signing up for a paid service? The pricing of course. Can they afford it? Are the features available worth the money spent? Is it a good investment? The design of a pricing page and the way it is displayed can have a lot of influencing factors on whether those interested visitors sign up or not.

Pricing Pages in Web Design: Getting Users to Sign Up


Pricing pages can sell a service, or scare people away. Obviously, the first is preferred. It can influence what service is sold, and help potential new customers navigate to what they need. Let's look at a showcase of today of pricing pages in web design, and then look into why they're successful.

Pricing Pages in Web Design

Shopify

Shopify has a well-designed and bright pricing page that uses a lot of great techniques that likely turn into high conversion rates. A few positive notes to mention about this page:

Shopify

  • Featured and "Most Popular" plan is highlighted visually, and uses the term "Most Popular" for social influence.
  • "Try Shopify Free for 30 Days" offers a risk-free incentive to get users started today whether they pay or not. Getting a visitor to try something is usually a sure-fire way to get them to eventually sign up for a paid subscription.
  • Note the progression of color changes as the plans get bigger, from green to blue. Visually, green is more lightweight and carefree. Then, as it moves to the plans that require more dedication and a bigger budget. We see blue, which can mean stability, trust, and value.
  • Very clean and visually appealing features list. Note how the features are organized vertically to create a nice and easy-to-read pattern of "checks" as the plans increase in value.

Wufoo

Wufoo's pricing page matches their overall brand and style with quirky typography and a colorful design. Below are a few notes on this pricing page that likely help it out:

Wufoo

  • A quick and short list of primary features making decision making simple.
  • On this page, the plans are listed from most expensive to free. As the visitor decides which plan to go with, going with cheaper version was more likely to be their decision as they had to go across the page to "choose it." Wufoo's pricing structure likely benefits most from visitors signing up with a free or cheap plan, and upgrading as necessary.
  • Easy call-to-action button: "Sign Up!" directly below each listed price.

Freckle

Freckle really emphasizes the little risk involved, which can be a great influencing factor to get more visitors to sign up, and then turn into paying customers later.

Freckle

  • Throughout the whole site and on the pricing page again, Freckle emphasizes how the app can earn you more money. This puts the idea of paying for the app as not an expense, but an investment.
  • When signing up, no matter which plan is chosen, the visitor is not buying it. They are picking the 30-day trial that's right for them. Again, this reduces the initial risk when paying for something.
  • The last and most expensive option is hidden. For those that need this plan, clicking on it separately from the other plans can make the visitor's choice feel more involved and "special" from the rest of the plans.
  • The freelancer plan is likely their most common, and it's the cheapest, so it is highlighted.
  • To the right, a quick list of features is included, and those features that are unlimited are bulleted first, making each plan seem more valuable.

CobbleStone

CobbleStone is a service that offers website solutions for churches and such organizations. Their pricing page offers a few key features that help them sell the packages.

Cobblestone

  • The plan names have significant value. Note that "Core" is the featured plan, and the term represents something that is basic and complete. There is one plan, "Starter" that is smaller, but its name implies it is under featured and only be to used when starting out. All of the other package's names make them seem like upgraded versions of the core, and more valuable.
  • Each plan lists the type of organizations that would benefit most from each plan, making it seem more individualized, and helping the visitor choose a plan that's right for them.
  • "Unlimited members" and "Own Brand" are included in all packages, but are specifically listed in the feature comparison area to make each seem like a good deal.
  • The banner above tells visitors if they sign up today, or relatively soon, that they get a special money-saving benefit. This provides a sense of urgency, and may increase conversion rates.

PollDaddy

PollDaddy has a very clean approach to a pricing page. No fancy tables or excess graphics, and mainly text. This can definitely help in its effectiveness.

Polldaddy

  • Clean, simple page design. This keeps the information for the reviewer straight and to the point.
  • Featured plan is highlighted. The middle plan offers a different color for the header text, and is strategically placed in the middle.
  • The vertical space increases for each plan. By laying out all the features and using this simple list-style design approach, all plans do not look equal. The largest plan takes up the most space, making it seem more valuable.

Backboard

Backboard's design does something different than every other pricing page. It separates the four plans into two primary groups: the ones that offer a 14-day free trial and the two other plans that do not.

Backboard

  • Highlighting the "starter" plans with a 14-day free trial ensures that individuals and smaller businesses don't need to make a commitment. This likely invites more sign ups, which in return end up turning into paying clients.
  • The last service, "proofing," is not the same type of service as the other three, so it is separated. This helps organize the table, but also helps the user understand that this can be an add-on service, not just a service in itself. It likely influences Backboard to sell more of this service.
  • A unique and separated table design. This table design is not like others, and sets a new standard for table organization. The unique design helps each area stand out more.

SipGate

SipGate offers a stylish solution to the standard pricing page. Below are a few highlights, and things they're doing right:

Sipgate

  • Stylish design deems them more valuable. Would you purchase a plan from an ugly page? Having a nice (and in this case, overly nice) design makes any product, application, or service seem more valuable and reputable.
  • The 30-day Trial is featured up top. Again, no risk for anyone who would like to try out any plan for themselves or their business.
  • Free plan is featured. If SipGate can get users to try it, they'll buy it.

ConceptShare

ConceptShare's pricing and plans page is also very simple, with no side content or otherwise that can be distracting. It features just the logo, basic navigation on top, and the pricing info directly below.

ConceptShare

  • There is a unique design to the 30-day trial offer, giving it some personality and more attention. The headline also offers strong words, "Register Now," and gives the user their own choice of registering or taking the 30-day options. Usability studies show that using these two methods provides better conversion rates.
  • Users also have the option of choosing monthly or yearly rates. Again, their choice means they're more likely to sign up if they feel they have more control over their purchase.
  • The trial period is offered as a "separate plan". Everyone likes something free. Placing the trial in the same format as the other plans mimics a free version of the application.

Fluxiom

Fluxiom has a nice, dark, and sleek design, matching their branding style and business personality. Their pricing page is simple and gets right to the point with a stylish and minimally designed table.

Fluxiom

  • Ordered from largest to smallest plan, but with the smallest plan featured. As the user spans across the page, they review all the options, and come to the result of the solo plan, which is likely what most users start out with anyway.
  • The 30-day trial offer breaks the design pattern. This gives it more attention, and reassures the visitor.
  • There is also another call to the trial account below the table. This time, though, they re-word it to a free account. Different users may be more inclined to click on different wording options, depending on how secure they feel with dedicating their finances to a new application.

Ballpark

The design of Ballpark's pricing page is gorgeous. There are several design details, from the headline, right down to each button, separator, and border.

Ballpark

  • This detailed design is something to remember. It adds value to the entire application, and creates an inviting tone that many visitors will want to come back to if they are debating between similar applications. Overall, blue is an inviting color as well.
  • A nice use of icons and other elements keep the comparison tables organized. This makes each easier to read, and the separation of each plan helps users consider each one carefully.
  • Call to action buttons that stand out. "Choose Plan" is the brightest element on the page, giving it the best hierarchical point.

Zendesk

Zendesk has a really catchy sign up page design, and also features a few elements that definitely help the site obtain more sign ups. Below are a few highlights.

Zendesk

  • The pricing page has a sign up form right on it, as opposed to leading separately to a sign up form like so many other pricing pages. Of course, the goal of any application or service is to get people signing up, whether it's just to try it out or as a paid subscription.
  • "No Credit Card Required" lowers the risk for wary first-time members. Sign up and try it, it can't hurt anything. This brings somewhat interested customers to the next level.
  • Prices are slashed on the more premium plans. While the slashed prices are the real price when paid monthly, they slash it down to the real monthly value if the customer were to pick annual payments.

Litmus

The Litmus pricing page design offers a clean table with a nice use of icons, even spacing, and some great sleek design features. It also mimics the design style of the rest of the site in the header, unifying the pricing page with the brand.

Litmus

  • There is a nice separation between the pricing table and a quick pitch to get users to sign up. This separation makes each stand out more, and since the no-risk message is to the left, it has higher hierarchy.
  • Unlimited features for all plans are still included. This is a selling point for the service in general, even though it's not necessarily needed in the plan comparison table.
  • Testimonials and other selling points on the pricing page. There are other features on the pricing page besides the actual plan overview, just in case a user is still undecided.

Mailchimp

Mailchimp's pricing page is different from most in that it is in vertical orientation. This creates a different type of organization that is likely more beneficial for the type of content that Mailchimp wanted to include on this page.

Mailchimp

  • Plans are separated into three main categories, depended on how the user wants or needs to use the service: monthly, pay as you go, and high volume. This can help customize each solution per user's needs, and help the user feel like they're in more control over their decision to pay for the service.
  • Because there are so many plans, they are broken down into the three sections, and then into the comparison of two features, subscribers and send limit. With an easy layout of features, the user can decided more easily the plan that's just right for them.
  • The free plan is featured first. Mailchimp offers a free plan, gets users hooked, and then upgrades them to paid plans when necessary. What's great about the service is you never have to feel like you overpay, because you can pay for only what you need at the time.

Squarespace

Squarespace's pricing page design is very sleek, giving the app a quality feel that's worth paying for. The page is very organized and makes it easy for users to choose the right plan. Below are a few highlights:

Squarespace

  • There is first emphasis on the subscription length. If they can get users to sign up for a longer term, that user will save more. This will also ensure longer term contracts that will earn Squarespace a better income as well.
  • Unlimited icons are in green, while the other icons are black. Highlighting unlimited features in any way makes any service seem more valuable.
  • A separation of core features and additional features. In the table below, the core features are highlighted — the features every plan has. This separates the quantity of core features in each plan, and then the additional features.
  • Their middle option, which is the featured option, includes a "Most Popular" badge. This creates social influence — if more people are really picking this plan, it must be the best deal.

Typekit

Typekit creates a clean and to-the-point pricing page with a simple list of features, prices, and plan names. However, there's a lot more to it than first meets the eye.

Typekit

  • The featured plan is "everything you need". This is likely their most popular plan, and the plan they aim to sell to their target audience. Unlimited choices, sites, etc. also help this plan sell.
  • The featured plan also breaks down the cost: "That's just $4 per month!" This can help those who choose this plan see that it's a small investment for what they'll get out of it.
  • The header and tagline are effective selling points. "Find the plan that's right for you" can be reassuring, giving users their own choice and helping them spend their hard earned money on a plan that will be worth it. "All accounts are free for 30 days. No risk!" lowers the risk to none, getting more users to sign up at least to try it out.

Big Cartel

The Big Cartel pricing page is designed beautifully, as it should be since the service is aimed at designers and other creative people. This pricing page is a bit interactive, allowing a wide range of content to be useful in a small organized table.

Bigcartel

  • Each plan's name seems valuable. Even their free plan is named "Gold."
  • A nicely designed page with different colors for different plans. This helps separate each plan into its own entity, and adheres to the overall design well. The design is effective with this style because the site is geared towards creative people.
  • There are hover effects on each listed feature. This helps the user easily find information on each feature, and allows Big Cartel to create selling points.

VSP.NET

VSP.NET has a nice interactive pricing page that lets the user choose what they need, and then view the price simply as a result, based on the daily and monthly cost.

VPSnet

  • Giving the user full customizable control means they don't overpay. This can help win over many customers compared to similar services, and help them feel like they’re getting a personalized approach automatically.
  • They also have the option of choosing by software type. Again, their choice helps put them in more control, and creates a customizable feel.
  • Nice graphics in both sections keep the reputation of the service to a high standard. People will pay for quality, and feel better about doing so.

Woothemes

The Woothemes pricing page offers a few different sections. First, the standard pricing page, which is the first thing visitors will see. Then, down below, we have a pricing section for club plans, one for regular members and the other for developers. Down further is an F.A.Q. section.

Woothemes

  • The three sections featured allow all the content and plans to be broken down into different types. This makes it easier for members to decide what they'll need, dependent on how they want to use the site.
  • Separated visually from the other plans, the theme club is featured in the top table as well. Upon clicking the "Find out more" button, the page slides down to the separate section on the theme clubs.
  • The current call to action button for the main plans is to go view the themes. This allows users to browse themes first. Then when they go to buy them, they can choose a plan to purchase that theme or more if they are interested after looking through them.

Harvest

Harvest features three plans in a simple table and with a clear call to action button. To the right are more selling points that are featured in all plans. The simplicity of the page makes it easy for users to get started.

Harvest

  • Unlimited features for all plans are still noted. All features listed are unlimited, creating a sense of no limitations and making Harvest a smart investment.
  • Call to action button to the right lowers the risk. It guarantees that no credit card is required, and also that they don't need to decide on a plan now - they can choose it later after trying Harvest out.
  • There is also a very limited free version below, aimed at getting users to try Harvest. The limitations of the free plan mean users are likely to upgrade if they feel they’re getting a good use out of the application.

Ronin

Ronin has a unique strategy to designing the pricing table. This creates visual appeal and likely has a positive effect on the conversion rates for each plan type.

Ronin

  • The featured plan is the largest in the table. We see this in a lot of pricing tables, but this table does something unique: it sizes the rest of the plans based on hierarchy accordingly. The Team plan gains the most attention, while the other two paid plans sit next to it a bit smaller, and the free plan is the smallest. This visual trick makes the larger plans seem more valuable.
  • Plans are named based on user type. This can help the user decide which plan is for them. The free plan is for anyone just starting out, but the solo plan seems more suitable and more of a 'complete' version for any freelancer or solo entrepreneur. Then, the other two plans featured are for teams or larger agencies.
  • Unlimited features and 30-day trials lower the risk. There's no risk in trying it out, and Ronin can get more sign ups, which leads to more paying clients.

Conclusion

Pricing pages can vary in design, but many of the trends we see in the execution can be beneficial to use in order to obtain more sales. Some of these trends include the use of featured packages, feature lists, no-risk reassurance, and design techniques to make certain packages or plans look more valuable and reputable.

There are plenty of other examples of pricing pages out there - which are your favorites? Why do you think they work, or could they be improved?