top of page

Purchase flow

Our goal was to maximize CVR and reduce CS tickets related to pricing by increasing pricing clarity

Background

When purchasing an account plan on Duda, you get 1-4 included sites. You pay for the sites and get refunded on the same invoice. When a user publishes an included site, it’a being published automatically, but when a user wants to publish an included site with a store, he needs to pay for the store. As a result, many CS tickets were opened, for users that didn’t understand why do they need to pay for their included site.
CURRENT PURCHASE POPUP.png
CURRENT PURCHASE POPUP
CURRENT STRIPE PAYMENT SCREEN POPUP.png
CURRENT PURCHASE POPUP
payment_lead_pic.png

Adjustments on the current design

As an MVP project, we focused on making small, effective changes:
  1. Added the copy: “Site is included in your plan so you’ll only need to purchase your store”.
  2. Put a strikethrough on the price for site+store and added the price for the store, because I didn't want to have a misunderstanding about the amounts on the invoice.
  3. Changed the terminology “upgrade” to “purchase”, since you're not upgrading your store, you purchase it.
new purchase popup.png
new stripe.png

Presentation & feedbacks

After presenting the problems and our solutions to the product team, we received a bad response. It was clear that those small changes would not make a significant change to solve the problem.

With that in mind, we decided to redefine the scope of the project and turn the purchase flow into a significant redesign project.

Research

I wanted to understand what are the common patterns for purchase flows that users meet  today. I looked at a lot of checkout pages - from companies that have similar product, to companies that have completely different product but showed interesting approaches to checkout pages.
CURRENT PURCHASE POPUP
CHECKOUT PAGES OF OTHER PRODUCTS.png

UX & Design

Equipped with insights and inspiration, I started to map out all the purchases users can make on our platform - account plans, sites, stores, apps, pics, etc. Then, I started creating user flows for all the ways our users are going through to get to the checkout page - may it be visiting the pricing plans page and clicking on CTAs, publish sites with or without a store, adding an app, etc.

Then I thought it would be worthwhile to add a step to the flow, which today appears occasionally - the pricing plans screen. I wanted to make consistency in the purchase flow, so that always in the first stage the user will choose a plan and in the second stage the payment terms.
new flow.png
ACCLUNT PLAN PURCHASE FLOW
Then I sketched out possible layouts that can fit our needs. One of my first decisions was to design for a full screen, instead of the popups we had. 
1.png
2.png
3.png

UX improvements I made on the checkout page:

  1. Change the structure of the purchase flow, so that in the pricing plans screen you choose a plan and in the checkout screen you choose the billing frequency, choose a payment method, see the summary and make the purchase.
  2. Adding a list of top features.
  3. Changed terminology from an upgrade to purchase.
  4. Adding summery contains a list of all purchased items, adding coupons, refunds, discounts, and final prices.
  5. Gathered all the info regarding cancellation policy and security near the CTA in order to optimize CVR.
  6. Added a copy regarding the discount when choosing the annual billing frequency over monthly.
site purchase_Annual selected.png
CHECKOUT PAGE NEW DESIGN

Next steps

After we got into an advanced stage in this project, it was decided to prioritize the "Payment page" project. By defining the goals and changes for the purchase flow, we got a good basis for the payment page. Since it was decided to wait with the execution of this project, we started running tests for a small CVR optimization and received more data, before we changed the whole design of the checkout screens.
bottom of page