Recently we tackled the overdue redesign of the public facing pages of our internal project, Champion Sound, including its Pricing and Sign Up page. With the Pricing and Sign Up page being such a crucial element of some websites, I wanted to share a little bit about the process as well as some of our reasoning and our solutions we arrived at toward the end.

Getting Started

Our main priority was, and still is, increasing conversions. Whose isn’t? We started our process with research. We looked to the common resources and galleries: Smashing Magazine, Pattern Tap, 37 Signals, and the plethora of design galleries. We wanted to see what others had done with their pricing pages. We needed a starting point.

What Others are Doing

▪ Displaying between 3 to 7 plans
▪ Displaying plans both from max-min and min-max (about 50/50 split)
▪ Giving emphasis to or recommending a specific plan
▪ There were multiple ways of displaying the “free” plan (below are 4 popular methods)

▫ At the beginning of the paid plans (In both max-min and min-max listings)
▫ At the end of all plans
▫ Completely separated with different treatment
▫ Giving little mention to it below the plans, hiding it

▪ Price tables with check marks or plan feature lists
▪ Prices mainly separated by column, not row

Our Initial Approach

▪ Make the prices obvious
▪ Recommend a specific plan
▪ Display our plans min-max  (increasing price)
▪ Playing down our “Free” plan option
▪ Use feature lists, not tables of check marks

What We Did and Where We Were At

Design is a process, most of us probably already know that, and it can take some time and numerous drafts. Below is the quick evolution of the Champion Sound pricing table. Starting from where it began and ending to where it is currently.

The Original
This design got us pretty far, but we needed a more cohesive design that worked with the new site’s style. We also felt the information we presented with this chart was not that helpful. We used the mailbox stereos as check marks, but all the plans are the same. The marks do not present anything that useful and they do not have a clear benefit.


First Design
This was the first stab at the new layout. It accomplished what we wanted and followed the guidelines we set for ourselves after doing more research. What this design did successfully was present the free account option in a very subtle way. It recommended a monthly plan (was a bit on the expensive side) and listed our plans from cheapest to most expensive.


What We Have Observed, Noticed and Changed

Switched Listing Plans to Max-Min (Decreasing): While doing research we passed over a few comments about seeing an increase when listing your plans from most expensive to least expensive. So we gave that idea chance. We changed the order we listed our plans, and we are now listing the larger plans first. Listing the plans this way has helped yield a slightly higher paid plan conversion to free plan conversion. 

Linking the Recommended Badge: Our presentation of “Recommended Plan” in a large yellow downward arrow has grabbed enough attention to make people click it. Since they are clicking it, we will soon be linking the yellow badge to select the recommended plan and getting the process of checking out started.

Making a Recommendation: Recommending a plan gives people somewhere to start. Below is a quote from Jason F. of 37 Signals about giving more prominence to one plan over another.

“The thinking goes that more options are OK if you help direct someone to a default choice. But more options without a recommendation just lead to decision paralysis, uncertainly, and buyer’s remorse.”

Free Plan Placement: Hiding the “Free” Plan underneath the rest of the plans is an effective way of significantly cutting down “free” account sign ups. We feared that it was too effective and we were losing people who were wanting to test the system with a free account. We have since given the “Free” plan more prominence, but removed it from the pricing table.

Current Design
In the current design, we kept what we liked from the first design and made changes from what we have learned. We listed the plans from most expensive to cheapest, recommended a cheaper plan and our free plan is now presented separately from the monthly plans. We are still improving this and as stated before, we plan on linking the recommended arrow since it has been receiving a good amount of clicks.


So, there it is. The process we went through with our pricing table on our Pricing and Sign Up page. With our quick and easy study of this page, we have learned a good deal of information that we can now bring into our meetings with prospective and current clients. If you have any tricks and tips that you are willing to share with us, let us know. We are always looking for new approaches.

Reblog this post [with Zemanta]