Payment flow redesign
The project
Brief and key objectives
- Increase trial conversion and retention by making the payment process smoother, clearer, and by offering more payment methods.
- Add more payment methods such as PayPal.
- Offer different payment types for each country.
- Integrate Stripe's payment flows.
- Modernise the payment screens and flows.
- Improve how we display discounted pricing on the payment flow.
- The payment confirmation screens would not be updated at this stage.
Deliverables
- Flows for post-trial plan purchase
- Flows for plan upgrades
- Flows for managing payment methods
- Flows for paying by invoice
Key tools and skills
- Hotjar recordings and heatmaps
- Wire-framing on Figma
- Designing and prototyping on Figma
- Dual-track agile project working closely with developers
- Multi-device testing
Purchasing a new plan
When users are nearing the end of their trial, they are offered a 10% discount if they purchase a plan before their trial ends. Below is the new flow for purchasing a new plan. The user is initially taken to the below page to confirm their plan selection. The discount is repeated here to increase the sense of urgency in purchasing the plan.
As users are not required to input card details when they begin their trial, when they purchase a plan they are required to input a new payment method. Each country will have different payment options. Below is a UK example.
Plan upgrades
When a user upgrades or downgrades their plan, they will see a comparison of the two plans. If the user has any add-ons, they will also be able to confirm if they would like to keep the add-on, and the price below will reflect this. If the user has any existing add-ons which are included in the new plan (for example, the media requests feature), it will be automatically removed and cannot be purchased as an extra.
The user will proceed to the payment method screen, where their existing payment method will be defaulted. They can choose a different payment method, or add a new one.
Manage payment methods
Users can add, manage and delete their payment methods at any time from their account settings page.
Pay by invoice
Plans are offered on a monthly or annual basis. If a user chooses to purchase an annual plan, they will have the additional option to pay via invoice.
As the invoicing process is not part of Stripe's integration, it was not possible to include this option in the same section as the other payment options. I chose to use a tab design as it would allow the rest of the payment method content to be unchanged, but it would still be a visible option to users. The pay by invoice tab will only ever show to annual purchasers.
Displaying discounts
This project provided a great opportunity to highlight discounts. The non-discounted price will now always be displayed above, reminding the user of the value for money, and encouraging them to complete their purchase.
