top of page

Redesign payment page

By creating a new design for Duda’s payment page, we wanted to increase pricing clarity and get a delightful user experience for Duda's users.

Background

Duda’s pricing clarity was known to be an issue since 2019. During 2020, after analyzing about 350 support tickets, we saw that in many cases, support agents avoid using Duda's payment page in order to explain pricing clarity issues. Instead, they sent screenshots from Stripe’s* UI (*Stripe is our payment platform).

This led us to the conclusion that crucial info is completely missing from the product and we decided to redesign our payment screen and prioritize it over other projects.
Screenshots from Stripe.jpg
SCREENSHOT FROM STRIPE, SENT FROM DUDA'S SUPPORT AGENT TO A USER

Problem

Duda’s payment page is where users can find all the info regarding their account plan, websites, purchases and charges. We realized that many of our users have difficulty understanding what they are paying for. As a result, they contact our support team. 

Goals

1. Increase pricing clarity on Duda’s payment page to reduce pricing-related CS tickets.
2. Align the pricing page’s visual style to the rest of the product.
111.jpg
CURRENT PAYMENT SCREEN
payment big image.png

Mapping pain points

I mapped out the pain points of the current payments page, based on support tickets and analysis of the UX/UI. After primary mapping, I talked with our support team to understand what are the frequently asked questions by users about our pricing issues, in order to identify possible frictions. In addition, I was interested in how they explain payment issues to our users.
Understanding the pain points of this page requires an in-depth knowledge of Duda's pricing. These are the main issues I have focused on:

a. Lack of clarity with the prices and terminology

Most of the problems with the payment page are due to the complexity of Duda's pricing plans. Since there is no intention to change it, one of the main challenges of the project was to simplify for our users what are they paying for.

A good example of Lack of clarity is Proration for an upgrade. When upgrading your account plan, you see only the charge for the new plan + *proration (*The terminology we use for refund or charge for the time remains for the previous plan). You don't get any breakdown or details about the proration, such as what is the period you get charged/refunded for? what was your previous plan? etc.
current design proration.png
THE INFO REGARDING YOU PREVIOUS PLAN IS MISSING
Another example of lack of clarity with Proration is when you change the monthly site’s billing frequency to annual. In this case, the same site will appear on the table twice: once as an annual, with a regular charge and another as a proration, when the price would be for the period of time that the site was monthly. As appears on the screenshot below, two charges appear in two different places on the table. The reason is that the table is divided into two: monthly and annual charges. This division is confusing when it comes to the same item on different parts of the table.
MONTHLY SITE CHANGED BILLING FTERQUENCY TO ANNUAL.png
MONTHLY SITE CHANGED BILLING FREQUENCY TO ANNUAL

b. Credit for sites included

Screenshot of Duda’s pricing plans.png
SCREENSHOT OF DUDA'S PRICING PLANS
When purchasing an account plan on Duda, you get 1-4 included sites for free. The problem is that it’s not really free. Instead, you pay for them and get refunded, as you can see in the screenshot below. The problem is that users miss the “plan credit” refund and don’t understand why are they being charged for a free site. Sometimes they see the plan credit, but don't know what it is.
SITE CREDIT ON PAYMENT PAGE.png
SITE CREDIT ON PAYMENT PAGE

c. Subscriptions

We do not have a place that displays all user’s subscriptions. In the screenshot below, for example, you are not being charged for your annual account plan. The reason is that the billing is on another month. To find your account plan, you will have to go to the relevant billing month and look for it.
payment screen screenshot.png
PAYMENT PAGE SCREENSHOT

d. Billing day + renewal day + item’s cycle

An account's billing day is set, by the day it was purchased. The billing day is for all his subscriptions, such as sites, apps, etc. If you purchase a site, for example, you'll be charged for it from the day of its purchase, but the billing day is the same as all account subscriptions. Every subscription renewal date will be determined according to its date of purchase (will be renewed automatically every year on this day, assuming it is an annual billing). That means that the billing date and renewal date of an item can be different! Many users have a hard time understanding this.
PAYMENT PAGE SCREENSHOT

e. Change billing frequency & Auto renew

If a user wants to change the site’s billing frequency, he can only do it on the site payment info page. I think that it can be helpful if users can change their billing frequency on the payment page. Also, It’s not intuitive where to find those inside the site payment info age.
SITE PAYMENT INFO PAGE.png
SITE PAYMENT INFO PAGE
payment screen screenshot.png
a. Break down the payment - Since we didn’t have a place where the user can see all his subscriptions, I decided to create a subscription page. A page that will contain all of the subscriptions and paid services, their info, and actions. The subscriptions page will be an addition to the billing page, which is a billing history record. In addition, I thought it would be good to create a separate area for managing the payment method. It seemed logical that it would have an area of its own, as opposed to its current random position on the payment page.
payment page breakdown.png
old payment page.png
arrow.png
New navigation menu.png
OLD PAYMENT PAGE
NEW PAYMENT PAGE
TWO TABLES ON PAYMENT PAGE
b. Proration - make upgrade proration clearer by adding more info, breaking it down to refund+churge, and find the most suitable copy.
c. Undo the division between monthly and annual in the table. Create a breakdown by the item type.
d. Merge the two tables into one table - Today, when you look at the current month on the payments page, two tables appear. One table for paid charges and one for future charges, when the billing day in that month has not yet arrived. It is possible to give an indication about the status of the payment in other ways.
TWO TABLES ON PAYMENT PAGE.png
e. Create a better clarity about site credit by using a better UX and a better copy. Also, give a better indication about how much credit I’m using and how many have not used yet.
f. Search options - Creating searching options and filtration, will help our users find subscriptions and info.

UX improvements I wanted to test:

Equipped with insights, I started to think about the changes and improvements I want to test on the new design.

Work process

Copy iterations
The copy is an essential part of solving our clarity problems. Therefore, it was an ongoing work throughout most phases of the project with our micro-copy writer.
Screenshot from the copy iterations.png
SCREENSHOT FROM THE COPY ITERATIONS
User testing (internal+external)
First, I defined the important issues we need to examine in our new design and the correct way to test whether the solution is good enough. Next, I created a script, in which we walked through our user within the prototype. In every few tests, I made changes in my design, following the conclusions we had. Next, we continued with an updated version for future tests and tested the improved solutions on new users.
The table in which I conducted the user testing process.png
THE TABLE IN WHICH I CONDUCTED THE USER TESTING PROCESS

UX & Design

Following many user testing, copy, and UX iterations, we came up with an updated version of the payment pages.
My subscriptions page
The subscriptions page contains all the account's subscriptions information and actions. Users can search for a specific item or filter by the type of subscription. We also created an inactive subscriptions table, where you can find expired sites and reactivate them.
MY SUBSCRIPTIONS PAGE NEW DESIGN
Auto-Renew off
An alert message will appear when the site’s auto-renew is turned off. In addition, the status will change to an “Auto-Renew off” label. This way, an account owner can better indicate his canceled sites and their expedition date. He can also turn the auto-renew on by clicking the CTA.
Payments page
The payments page contains previous and upcoming payments for all the account subscriptions and services.
PAYMENTS PAGE NEW DESIGN
Proration
One of the project’s biggest challenges was to make the upgrade clearer on the payment page. Those are the changes we made:
a. Added the total price, after proration: new plan+proration=total price. Before, we only had a price for a new plan and the proration amount.
b. Brokedown proration into two: 1. refund for the time remains for the previous plan. 2. Charge for the new plan for the days between the upgrade till the bulling day.
c. Added info about the proration: the number of days, relevant dates, and explanations about each charge/refund.
d. Added green color for the refund, to emphasize it.
e. Added info about the previous plan. Before, we didn’t have any indication about it.
OLD DESIGN proration.png
OLD DESIGN
arrow2.png
NEW DESIGN
Payments method
I created a separate area for managing the payment method. It seemed logical that it would have an area of its own, as opposed to its current random position on the payment page.
Payment Method page.png
PAYMENT METHOD PAGE NEW DESIGN
Making this payment page clearer, more accessible and trustworthy, will hopefully help our users understand Dudda’s pricing better and reduce support tickets. This would be the first step to make Duda’s pricing better.
bottom of page