Context

When a free trial ends, trialers experience the purchase flow to upgrade to a paid plan. Our challenge was to simplify the checkout process to help new customers purchase with confidence and ease, and to improve conversion along the way. There was a number of experiments focused on improving usability and task success inside the checkout flow.

Study 1: Pricing Summary Redesign

I was a product designer working on a product team of developers, a product manager and collaborating with the marketing team. I was responsible for wireframing, usability testing / analysis, and the final visual design.

The Problem

As part of our initial discovery into the checkout flow, Support data suggested customers were confused how the final bill was calculated when checking out. Usability testing on the existing receipt determined the structure of the receipt was causing friction, and in many cases, frustration/annoyance. Users didn’t understand what they would pay when choosing yearly (as it was presented as a monthly figure), and they were unable to estimate the discount savings or what their next bill would be.

‍

The Solution

We hypothesized a restructured receipt that cleanly communicated plan details and discounts using subtotals would allow customers to comprehend their bill.

A quick prototype was put together for usability testing with a panel of usertesting.com small business owners. The tasks focused on summing up the total bill, calculating savings, and estimating the following bill. General feedback from testers was encouraged. 

After several rounds of iterations and testing, we had a prototype we felt confident in. We made the design decision to display the "billed today price" most prominently, rearranged the summary and include both subtotals and nested offers to help users quickly understand how their bill was totaled.

‍

Outcomes

While this feature is currently in development, usability testing comparisons between the first and final receipt found users could finish all tasks successfully in the new design, and we saw a great improvement in user attitudes/moods while completing the task, suggesting that the new layout didn't cause any frustration or annoyance when completing the checkout flow.

Study 2: Choose a Plan Grid

I was a senior visual designer working alongside a product team of developers. I was responsible for wireframing, concepts and the final visual design.

The Problem

The team began investigating the user dropoff after the first page of the checkout flow in an effort to understand the reason, and held the assumption the overall complexity of the page was a contributing factor, and that users were simply abandoning the page. We validated this by investigating Support tickets related to purchase and found customers were often confused about plan details. We realized the current design made it so users had to scroll to two totally different places on the page to see all features, and plans were difficult to compare in an apples-to-apples way, making it more difficult for users to choose the best plan for their business needs.

The Design Solution

We hypothesized a grid with the features listed for each plan in one spot would reduce task complexity and allow customers to choose the plan that best suited their business. We produced some quick sketches and selected a concept for refinement after a prioritization exercise with the team. We decided to test out new design for a specific checkout use case in an A/B test to measure the effectiveness of a new design.

Outcomes

We used Google Analytics to measure drop-off on pages, time on the task and the mixture of the plans selected. We saw more diversification of plans chosen which validated users were able to better select the best match for their business (rather than choosing the smallest or medium plan by default). We also found the new layout reduced the overall time on task, which suggests the complexity of the page was improved.