Pricing Pages in Web Design: Getting Users to Sign Up

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 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:


  • 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‘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:


  • 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 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.


  • 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 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.


  • 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 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.


  • 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‘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.


  • 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 offers a stylish solution to the standard pricing page. Below are a few highlights, and things they’re doing right:


  • 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‘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.


  • 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 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.


  • 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.


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.


  • 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 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.


  • 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.


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.


  • 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‘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.


  • 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‘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:


  • 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 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.


  • 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.


  • 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 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.


  • 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.


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.


  • 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 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.


  • 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 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.


  • 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.


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?

Kayla Knight is a web designer and frontend web developer. She specializes in responsive web design, progressive web technologies, and also knows her way around most CMS's and PHP. You can find out more and check out her portfolio at


  1. / Reply

    Great article and a great job at evaluating every single pricing chart.!

  2. / Reply

    Shopify was the most attractive one, from the reason that it is most shaped, if i were to chose, it would be buying from them, I just love their design.

  3. / Reply

    Thanks. Very interesting examples.

    • Rana mukherjee,
    • July 5, 2011
    / Reply

    Great article Kayla Knight

    • Mark,
    • July 5, 2011
    / Reply

    hey, great post – really informative! How about a post on web design jobs? I recently found a job in web design on this site: Web Design Jobs

  4. / Reply

    the most important thing in such design is that it should be well-balanced! these ones made in a proper manner

  5. / Reply

    Really click provoking pricing pages. Tweaking the looks of pages like this indeed has the impact on overall traffic and conversion rate.

    • Ryan,
    • July 6, 2011
    / Reply

    Thanks for gathering the information for us. I agree with what was said earlier about the pages being clickable. Just looking at the pages would make you want to sign up with their services.

    • Sergey,
    • July 7, 2011
    / Reply


    I’ve got an idea. How about to create a separated blog and gather there inspirational/best practice pages common for web startups / saas?

    Say, each saas include pages:
    – about us
    – pricing
    – faq
    – contact us
    – support
    – tour/features
    – partners
    – customer testimonials

    I will even pay to see the best practice for each kind of this pages gathered in one place

    additionally that would be great to review from time to time such kind of page parts like: signup form, login form, main page, landing page, or even twitter account and facebook pages setup

    No one on the Internet could do it better than you with your super great taste and experience

    Sorry for my english : )

    Hope you understand what I mean and hope you read comments here (because spam you do not delete : )

    1. / Reply

      Had a similar thought a while back – screenshot archive of home pages and landiing pages:

      I think folks “would pay for a subscription service that showed them how (and when!) their competitors designs have evolved (again, changes to layout, wording, buttons, calls-to-action, etc.).”

  6. / Reply

    when you see these all beautiful table source code most of them not created by html table tag

    • Nick,
    • August 9, 2011
    / Reply

    Good post. Very good designs of the price label. Please check this one:

  7. / Reply

    Man that say he will do that easily.Man can do enough which he will needed.

  8. / Reply

    This is a beautiful site you visit here easily.

  9. / Reply

    Oh this is a good site.

  10. / Reply

    You’re right when you say “Pricing pages can sell a service, or scare people away. Obviously, the first is preferred.”

    I recently ran a few A/B tests using Google Webmaster Tools – over a period of a month – and created 2 pricing/service landing pages – 1 with pricing tables (created in WordPress using a shortcode) and 1 “regular” sales copy page (also on WordPress).

    One thing this test showed me was that the page with pricing tables had a higher conversion rate (even with a high bounce rate of 70%) but lots of repeat visits which were on average 3 – 4 minutes. It was converting about 13% of the visitors and they were predominantly taking the mid-level option (featured as “most popular”).

    On the contrary, the “regular” page did have a lower bounce rate (about 40%) & more time was spent on the page but the conversion rate was about 4% and the majority of conversions led to a basic option plan sale.

    I believe that the page with the pricing tables outshone the “regular” page because of the pricing tables colour changes and main features list.

    The good news with this right now is that several of the major WordPress premium theme developers have started offering themes with pricing tables, so it’s never been easier to start converting more visits into sales.

  11. / Reply

    I would choose shopify, they are doing it so good

  12. / Reply

    I remember some of the best I have come across, such as Crazyegg, Basecamp and Zoho.

Leave a Reply

Your email address will not be published. Required fields are marked *


Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.