Clear, Concise Pricing
The Story of Designing SpaceCraft’s New Pricing Table
UI patterns exist in every website and web application. If you use SaaS-based products then chances are you’ve seen your fair share of pricing tables. Perhaps you’ve built some for your own customers. Search Dribbble, Pattern Tap, Pinterest, or Google for “Pricing Table Examples” and you’ll get plenty of results to browse the hours of your day away. Companies spend hours and hours tweaking and perfecting their marketing site, making sure their product is being pitched exactly the way they want. They employ all sorts of techniques to entice you to consider them — through visuals, stories, trials, and carefully crafted copy. But eventually the potential customer wants to know:
“What is this going to cost and what will I get for my money?”
— Your Potential Customer
Answering this question appropriately means you have to strip away the glossy distractions and be as clear as possible, because when it comes to considering a transaction, clarity is king.
Identifying the Shortcomings
When working on the new SpaceCraft site design we were continually checking what was working with our previous site, what needed to be thrown away and what needed to be added. The previous pricing table followed a standard pattern: a row of cascading columns highlighting each plan’s price and features. No doubt you’ve seen this pattern before:
One of the key pieces of feedback we had on this approach was that it had far too much repeated content and the real nuggets of information were buried at the bottom of the plan columns. Our plans are additive, so to understand the distinction between each the user had to scroll down to compare the differences which, on smaller screens, meant you did a lot of scrolling up and down.
Our sales team used this page everyday when meeting with potential customers and I would watch them inevitably bounce the screen up and down as they walked through the benefits of each plan. This was distracting and hindered their ability to clearly communicate how each plan breaks down. We knew we needed to fix this in the new design.
Exploring New Layouts
We knew we wanted to maintain the column-based layout approach for our pricing plans. Columns are widely accepted as a strong layout method for not only showing a list of details contained within a single entry, but with also comparing multiple entries side by side. We didn’t feel the need to abandon this battle-tested pattern, but we wanted to improve it for our needs.
We took to the whiteboards and sketched up several approaches. Again, since our plans are additive we knew we needed to figure out a way to clearly show that. Some pricing plans list out what’s included in the bottom level plan and then, for the subsequent plans, include a capping statement saying something like “This plan includes all items in the “basic” plan plus…” and then list out the features for that specific tier. This gets repeated as you move across the columns.
While this works and keeps the feature lists concise, it requires the user to do the mental math required to “see” the full list of features included with the higher level plans. This wasn’t clear enough. We needed a better approach.
Somewhere along the way we had the idea to essentially show the additive nature of the plans by including a “+” symbol between each column. This reinforces the additive nature of our plans but also allows the user to see a full list of features as they moved up the tiers. It was an idea worth exploring.
At the time of exploring visual comps we felt it was important to only show the features comprised within each plan, which led us to this:
The approach above laid an interesting foundation for our new pricing table. It removed the cascading effect our previous pricing table had, thus minimizing the need for the user to bounce up and down the table with their scrollbar. But we felt like we still had room to reclaim, more on that later.
By only showing the features comprised in each plan we gained clarity for each individual plan, but lost clarity overall. The questions posed and call-to-actions in the deselected plan columns were too distracting. Plus, hiding the features in Unlimited and Concierge plans meant the we were requiring the user to click on those in order to see the full breadth of features included with all three plans. Sure we could’ve defaulted to showing the Concierge plan first, thus listing out all of the features, but then the only visual cue the user had that told them they could click to explore the other plans were the plan titles. This wasn’t good enough. We could do better.
We decided to adjust the layout to show all of the features, regardless of which plan was selected in the table. We also ditched the questions and additional buttons and ended up here:
Now all of the plan details are listed all the time and the user can glance across all three without requiring an initial interaction with the table. That helps improve clarity. Plus, we only have one call-to-action now which refines the user’s choices. We liked how the highlighted plan “popped” up from the pricing table, but disliked how the additive component now looked like some sort of weird growth coming off of the plan’s column. Yuck.
Another problem with this design is the call-to-action travels across the page as the user selects the various plans. It’s always best to keep buttons in a single location if at all possible. We saw this potentially becoming a problem for our sales team when they used this table while talking with potential customers. Plus, our site always drives people into a 14-day free trial, so there was no need to have basically three buttons on this table. A single, centered button driving users to get started was a better choice.
We also felt like this table was still too tall. The fact that we were wrapping the plan titles and call-to-actions in a rectangle meant we needed to allot for additional padding. We wanted to reclaim the space being taken up by that padding.
One thing we weren’t doing yet, but knew we needed to add, was a way of designating which plan was “the best”. At SpaceCraft we have a team of design, support and SEO experts that can help our customers get their site up and running. While anyone can sign up and build a site on their own, a lot of our customers opt to work directly with our team to design their site. That means our Concierge plan truly is our most popular. It not only gives you access to all of our features, but it offers a 20% discount on all of our services. This was being lost on our previous pricing table and it was being lost here. We knew we needed to add a couple of highlights to that plan with our future design iterations.
This is where we ended up and the design we went with for our new site:
By moving the call-to-action to a single button below the pricing table and leaving the plan titles outside of the main container, we were able to reclaim a lot of vertical space. This made everything feel tighter, short and simple. We tweaked colors and chose the darken the border of the highlighted plan, giving it more contrast from the rest. We added a couple of colorful design elements to the Concierge plan, which help draw the users eye to our most popular plan. We lost the “weird growth” that the previous design had which put us all at ease.
As we began testing we found that this height performed fantastically on tablets up to TVs. Gone was the vertical scroll we saw on our previous site. The table presents beautifully when our sales team is talking to potential customers and we’ve received great feedback at how easy it is to grok the differences between our plans. Clarity FTW!
As with any new launch we’re still testing, going through feedback and putting what we’ve built through the paces. We will continue to tweak and improve as needed. But while we are proud of everything on our new site, we love how this pricing table came out. It was worth the time it took to exhaustively explore concepts, iterate and mark-up (it’s fully responsive too!). Go try it out for yourself and let us know what you think.