The ShopKeep 'Pricing Page' had long been a central feature of our website's navigation. However, it didn't actually display our prices or package information. Instead, it displayed a headline hinting to the rough amount you could expect to pay (as low as your daily coffee), and a CTA linking to our lead form.
As part of our new brand refresh, we wanted to redesign the Pricing Page to emphasize our transparency and decrease the barrier between the consideration and sign-up stages for users.
1. Redesign the Pricing Page under our new brand guidelines.
2. Display ShopKeep's pricing plans in a concise, informative way without overloading the user with information.
3. Maintain or improve conversion rates compared to our control version.
Prior to our brand refresh, we had tried a variety of Pricing Page designs. We tested a variety of combinations of CTAs, plan details, and messaging. We tested each of these against our long-standing control version that didn't display prices. Unfortunately we weren't able to measure a lift in conversion on any of these test designs.
After researching our competitors pricing pages and reviewing our past conversion data, I came up with 3 initial wireframe concepts. Each concept was centered on displaying our 3 plans. I played with a few iterations on how to display each feature's details, an option to toggle the annual / monthly prices, and various CTA placements.
One of the challenges I faced was how to display every feature we offered along with a description for users interested in more information. Because ShopKeep services so many different types of small businesses, we had a wide range of features we wanted to allow users to explore. This led to a very long list of features, made even longer if we displayed the descriptions. To mitigate overwhelming the user, the winning concept only displayed the most popular features with a 'See More Features' CTA that expanded the list to display the full list. Each feature was then treated with a rollover interaction to display the full description of each item. This approach was modified on mobile, by allowing expansion of each individual plan's features.
A few important components:
- The toggle element to show the price discount when billing annually
- A rollover option to dive deeper into each feature's details
- An expansion of the feature list to compare full plan details
- A sticky header that allowed the plan name and price to be displayed while scrolling
Following the launch of our A/B test, we interviewed 7 small business owners about their experiences with ShopKeep.com. They viewed both our control pricing page (remember the one that didn't show pricing?), and our shiny new test version. We were able to glean some helpful takeaways based on their reactions.
The new pricing page communicated the value of ShopKeep.
After viewing the new pricing page, all participants agreed that ShopKeep is worth the price. A previous internal hypothesis about our pricing page was that showing our package pricing would scare prospects away. We were able to disprove that theory, with all of our users agreeing that ShopKeep is worth the price after seeing our new pricing page.
The content on the control pricing page was distracting.
5/7 participants expressed negative feelings towards the lack of prices on the control page.
Some participants liked the friendly faces and coffee analogy, while others struggled to figure out how much a cup of coffee costs today. Neither related to the actual prices of ShopKeep software.
Users pointed out that if they didn't find the pricing info on our website, they would search elsewhere to find that information.
The new pricing page overcame previous negative sentiments.
We asked test subjects for their reactions to each design. The responses to our test page were much more positive than the reactions to the control experience.
Subjects spent significantly longer studying the test design, a result bolstered by the increased scroll times we’ve seen on the test pricing page page.
The test pricing page improved brand perception.
After seeing the test Pricing Page, participants were twice as likely to say they were “Very Likely” to use ShopKeep within 6 months.
Results & Iterations
We were able to supplement our conversion data with the results of our user interviews. After our initial launch, we saw a higher bounce rate on the test page than on the control. We contributed this to the fact that now that users are actually getting the pricing information they were seeking, they continue to explore the rest of our site and dive deeper into our product pages.
We took a holistic approach to reviewing our conversion data, seeing a sitewide increase in conversion for users that interacted with the test pricing page.
After receiving feedback in our user interviews that customers expected a 'checkout experience' on the pricing page we saw an opportunity to iterate on the lead form and subsequent thank you page, to better emulate this type of experience.
Optimizing the Pricing Page (and finally displaying our prices!) was one of the biggest wins of 2020. We were able to expand our brand refresh to our highest-trafficked pages, promote transparency of our services and features, and generate a sitewide improvement on conversion.