7 Elements of a Well Converting Subscription Page

When you dive in and really think about the ordering process for a subscription site or a multiple product site, there can be a series of hurdles and choices for the user. Generally, a huge part of well designed usability is making that decision for the user, “Don’t make me think”. But for subscription services this decision process is inevitable. The good news is that you can design a better subscription page that will almost make the decision for them – while still offering them choices.

In my opinion there are essentially 7 main elements of a subscription page design that will help the user and better guide them through the process – and hopefully get them to actually sign up… better conversions make happier site owners and bosses.

1. Separate packages
2. Make your offer stand out in the crowd
3. Clear, honest and attention-grabbing type
4. Benefits comparison
5. FAQ’s
6. The left-to-right/right-to-left debate
7. Trust

Separate Packages

The worst thing you can do to your user is confuse them. Now, all 7 elements have a focus around removing confusion, but a huge part of eliminating chaos on your subscription page is to clearly separate the packages. Color, borders, boxes, shadows, tabs, negative space… (I could go on for a while) will all help you to create a clear division between offerings. Division between packages is a pretty basic design principle, but it seems like I still bump into subscription pages that still haven’t figured out the user doesn’t want to stare at a magic eye poster to figure out what you are offering to them.

In addition to the “no brainers”, here’s a couple more small and simple, but very powerful ways:

• separate your packages is to create separate buttons for each package with different value
• clearly name your packages

Unlike a typical landing page where you only want to have one single call-to-action button, subscription pages with a single button can be very confusing to the user. They may not know which package they have chosen and that may just send them packing. Consider each package a small landing page, where your subscription page contains a bunch of little landing pages. The creation of separate buttons is a huge way to separate the packages and clearly tell the user which package they are choosing. Another plus is that a button per package also reduces clicks on your subscription page by removing radio buttons or check boxes… one click is always better then two or more.

I’ve seen some pretty weird package titles and naming schemes. But it doesn’t really matter what they are, the most important thing is that they exist. However, stay away from really strange, or insider package titles that the user has to study to figure out – remember, chances are, the person staring at your subscription page is new to your service and they may not understand your humor, lingo or insider terms yet. It is a good idea also to make your titles progress. A couple of progressive title examples are:

• Bronze, Silver, Gold, Platinum
• Small business, Agency, Enterprise
• Newbie, Expert, Grizzled Veteran
• Basic, Advanced, Pro, Premiere
• Single, Multiple, Suite
• Ensign, Lieutenant, Commander, Captain, Vice Admiral (aight, that one is just for giggles)

Make your offer stand out in the crowd

So be honest, there is really only one subscription package you want your users to pick, right? All the rest are really just extra choices to make your user feel happy; make them feel like they are in control. But there is that one package that is the sweet spot – enough features for just the right price. Too many features and it costs you more, to little features and nobody (other then the cheapo user) will ever sign up. This is where you get to make the decision for the user a whole lot easier, and it’s awfully simple – highlight the package you want them to pick.

Make the package stand out amongst the other packages, make it shine and be the star of the page. This may make the other packages feel bad that they don’t have stars on their bellies, but just let them know that they really aren’t as good. Although I don’t suggest slapping a bright green star on your favorite package’s belly, there are plenty of ways to make that one special package stand out.

Here are just a few ways to create a stand out:

• Make the actual size of the package bigger than the rest.
• Use a bolder background or border color.
• Use a box shadow, ribbon effect or other tricks to create a visual 3D effect.
• Use a bigger call-to-action button, button text or even button color.
• Label it something enticing like “Most Popular” or “Best Value”.
• Use a larger title or even bigger copy then the others.
• Make it blink (okay, don’t really do that).

Clear, honest and attention-grabbing type

We talked about reducing user confusion in the previous paragraphs and another great way to reduce this is to make sure your copy, titles and labels are clear, honest and attention-grabbing. Clear labels are important to any user experience and this is no different (maybe even more important) on a subscription page. Be direct, simple and clear with labels and copy. Don’t be too wordy with titles and benefits. Explain things very simply and effectively and use bullet lists or icons and graphics to quickly tell your user what features and benefits each package contains.

Just like landing pages, captivating headlines and button values will also make a huge difference. Really, on the subscription page you are trying to sale the user on the package that is right for them. Headlines are an awesome way to create separation between packages, demonstrate the differences and entice the user to pick the right package for them. Also, make sure your subscription page text is honest, this page is no place for outlandish claims, over the top promises or just blatant lying. By the time the user arrives on your subscription page, they already know a bit about your products/services and now is the time to prove to them what the real capabilities and differences are. And really, just be ethical, make sure your “Most Popular” package is really the most popular.

Benefits comparison

Since each package has a different set of benefits and features, you’ll wanna make sure that you show them and compare them between the packages. This will quickly allow your user to see the actual differences between them, help them make a better informed choice and also show them what they are missing by not choosing a better plan. The benefits and features list are an awful lot like going to Subway Sandwiches, psychology wise anyway. At Subway you may go in thinking that you just need to pick up a ham and cheese on wheat but after you stand in line in front of the glass and see all the bread, meat and veggie goodness you usually wind up paying for a footlong sweet chicken teriyaki on honey wheat with a handful of chocolate chips cookies. It’s hard not to stare at all those fixings and avoid them.

The other really powerful thing about a comparison list is visually showing them the number of differences between packages. People get caught up in what they get or didn’t get even if they do or don’t really need them and people also tend to buy more of something just to have it or say they have it. When the user sees that the next package up offers 4 more things for only another 5 bucks a month, they are more app to purchase that package because of its perceived “better” value. However, there is also a weird thing that happens if there is too many features listed or promoted with a package – people shy away from long lists of features especially when they are all the same between packages. The real key is to visually show off the features of each one, without pummeling the user with every little detail of what the package comes with.

Visually, grids and columns are probably the best way to quickly illustrate the differences between packages, this is why most of the subscription page examples I’ve added to the article use grids and columns. But it’s true, a grid is an good way to display data to be scanned easily by the user. Feature lists for packages are really just feature spreadsheets and there is nothing wrong with that, just keep the info simple and let the content stand out – don’t let the content drown in a gridded mess of lines and background colors.

There are lots of ways to show differences visually on the page, here are just a couple of ideas:

• Bold numbers: the user can quickly scan the numbers and see that higher numbers are better.
• Strikeouts: list the benefits that a package doesn’t have and then strike them out.
• Negative space: create the same effect as using strikeouts, but just leave blank space where features should be listed.
• Separate features into groups: this way the user can find the group of features they are more interested in.
• Highlight key features: Use text highlights, bold fonts, icons, arrows, underlines, italics to emphasis popular or key features in the list.
• Single column features list with “availability” grid: you can list one column of features next to your packages, then use a grid to show the user if that feature is present in a package, if it’s not, how much of that feature a package offers or if it’s unlimited. (see the AgileZen example below). To be honest, I’m not personally a big fan of this, but if done cleanly this can function very well.

FAQ’s

Subscription pages may be one the best places for FAQ’s on your site. This is where people will general have questions regarding your service and your subscriptions. FAQ’s are interesting, in most cases they truly aren’t the most “frequently asked questions” they are more points of information in question form that you believe your users will need to make an effective purchase – or simply just “what questions might my users have.” FAQ’s may seem mundane and a lot of people feel that FAQ’s are a waste of space because they feel nobody truly reads them. But, they are actually a great way to create reassurance and yes, maybe even answer a question or two. After all, one clear answer may just tip the user into signing up.

There is two design problems you’ll have when adding a FAQ’s section to your subscription page; where to add the FAQ section and how many FAQ’s do I need to have or not have. I suggest you solve the former first, it will make finding room on your page much easier. The quantity of Q/A’s you want will depend on the complexity of your service but hopefully you have boiled down your package features clearly enough. Stick with questions that pertain to the packages themselves and how the subscriptions work. At this point in the checkout process the user is more concerned with what the subscription comes with, how they can purchase and how they can change or even cancel their subscription once they’ve signed up. I would also suggest no more than 6 to 8 questions – if you have more than that, try to combine questions.

You don’t need a huge section devoted to FAQ’s, you still want to keep the focus on the packages themselves, but a really good place to add FAQ’s is below the packages themselves or if you have just a couple of questions you can sprinkle them in through out or just create a little section to the left or right of the benefits. Also, don’t be afraid to rename the section. Some users may zone out or skip past the section if you just simply title it FAQ’s. Think about using a title that pertains to the actual subscription page interest like “What you need to know before you buy” or “How it works.”

The left-to-right/right-to-left debate

So I’ve had this discussion with clients before and really haven’t come up with a solid conclusion or answer to the question of whether to progress your packages form left-to-right or right-to-left? Maybe even up or down? Generally my thought has always been to line up your packages left-to-right where the more expensive packages and the one you want to highlight is on the right hand side of the screen.

In my mind, you want your users to see the lower packages, see what they have and then show them how much better the larger packages are. After my user scans the page I want them to think “Well, the Super Package comes with 6 more features then the Regular Package and it’s only 10 bucks more… that’s a better deal.” I feel like the left-to-right layout spins more positive. Where I feel like the right-to-left layout spins negative because when the first thing they see is the premium package the user might think “whoa, that’s kind of pricey, that is a lot of money for just 6 more features than the Regular Package.”

But the real benefit argument I heard about with right-to-left layout is that you shouldn’t make you’re user view all the the packages in order to make the decision. The right-to-left layout is a more blatant way to make the decision for them and remove less eye movement on the page. These are all valid points but I’ve never seen any real statistics that qualify whether one is actually better than the other. To me, it is a lot like the above the fold argument where people all push to keep everything about the mystical “fold” of the page because somehow they’ve figured out that nobody scrolls down. But I don’t know anybody that doesn’t instantly scroll down to the bottom of the page as soon as the page loads just to size up what they are about to view.

The bottom line here is, there probably really isn’t a specific package layout. There is no right or wrong answer here. It’s mostly a combination of personal preference, design choice and package details. After all, DropBox goes up and down and I think they are doing just fine.

Trust

This is another very critical conversion item that we pull from a well converting land page design. Trust is a huge part of getting any user to sign up for anything these days. Trust is really a pretty easy thing to build with the user and users are for the most part very trusting as long as your site doesn’t resemble an old icky email spam site. To avoid the icky used car salesman design you’ll want to remove those user flags that make people feel like something gross is happening. There are a lot of design elements that make a site look scammy, but here is a quick list of things that make all of our stomachs turn when we see them:

• Asterisks next to bullet point: usually when you see an asterisk next to a bullet point you think “Okay, where’s the fine print?”
• Fine print: please, don’t add a bunch of fine print to the footer of your site, please please please. This just tells the user they are being ripped off even if they may not be. If you can’t tell the user what your packages offer in nice, regular font, then you may need to rethink what you’re doing.
• The liberal use of bright badges: I don’t mind the use of a “30 day Guarantee” or ” 30 Days Free” badges, but avoid slapping like 10 of them all over your page. This is the equivalent of USING ALL CAPS IN AN EMAIL BODY, IT TENDS TO BE LOUD AND ANNOYING AND NOBODY LIKES TO BE YELLED AT.
• Cheesy, over-the-top or unrelated graphics: if you are selling hosting subscriptions, avoid using some skanky girl in a tight tank top holding a server blade. Nothing says shady more then random, tacky and over-the-top graphics.

Basically, (other then looking like you’re trying to trick them) to build trust with the user you need to answer them a few questions that they all want to know:

1. Is my privacy protected? I’m not registering for spam right?
2. Is my purchase secure or not?
3. Do I know anybody else who uses and trusts the products?

Displaying a link to your privacy policy and terms visibly on the page is a great way to show the user that you care. Now, they may never read the policy or even click on the link, but just having it present on the page where the user knows you actually have one lets the user know you care somewhat about their privacy. But don’t go over board in telling them stuff like “You can trust us, we value your privacy”. To users that means you actually don’t, you are just saying that to get people to buy in.

Users need to know that their purchase is secure. Now, you can do this without plastering your subscription page with logos and padlocks. One padlock icon or one service logo will be okay if it’s accompanied by a short description of how it’s secure and what services you use. This is also another great use of a FAQ section. Use one of your FAQ’s as a security question that answers any security concerns the user may have.

Social proof is getting bigger and bigger these days and who better to trust then a friend, right? Social proof can be hard to get, it’s not as easy as slapping a padlock icon on the your site. You’ll need to find real users, get real quotes and use Twitter or Facebook plugins to show potential subscribers that show how other people actually use and enjoy your services. Along with regular user testimonials, a killer testimonial from another very trusted company who might use your service is even better. Really, the bottom line here is that the user will want to see who else trusts your service enough to use, but if you don’t have users yet try to avoid making them, people can see through that fairly quickly.