A review of the checkout process for Apptopia's Flex Plan and a hi-fidelity design to improve clarity, ease of check-out, and conversion rates.
After reviewing the current process and completion rates with the product team, we decided to change a few things.
Visitors to the site most frequently arrived in the checkout flow after clicking "Unlock" on an app page to get more data, but the completion rate was not very high. Checkout completion was much higher when potential customers entered the checkout flow from our pricing page.
Using this information, we decided to add some pricing and data details about the flex plan on this purchase page in the hopes that people would be less confused about what purchasing a flex plan would give them access to.
The earlier version of this checkout was not clear about length or steps, so we included a progress indicator at the top to highlight the short nature of this checkout. The goal here is to let potential customers know that it's a short process, and they still have time to review their order before checkout.
And now for the main event, the order summary. Previously, the checkout experience was jarring and inconsistent in layout. Apps selected for expanded data were seen on the right side of the page, and then the top. To increase consistency and decrease cognitive load, I designed an order summary for the right hand column.
This order summary gives a run-down of the pricing structure as well as the current selection. Additionally, it does not move (or change much at all) in the next step, making it easier for users to focus on the next most important step: billing information.
The final alteration to this checkout exists on the billing information page. Because the order summary now exists on the right side of the page with all relevant price and subscription details, billing information is suddenly the main focus.
If given the chance to test these changes, we would have released one or two small pieces at a time, starting with additional pricing information, then the progress indicator, and finally the order summary. We would have adjusted the process as necessary with more information about drop-off rates.