My Role
I was responsible for designing key interfaces that introduced automated PayPal payments. My focus was on creating designs for the signup and post-onboarding phases, ensuring users could easily set up and manage their monthly payments, enhancing their experience with this convenient payment option.
Timeline
Tools
Figma and Miro
Process
• Discovery
• Ideation
• Wireframing
• Prototyping
Team
Jaskaran Sondhi (UX/UI)
Problem
Users experienced significant frustration with DigitalOcean's one-time manual payment system. The necessity for manual payments, vital for maintaining uninterrupted service, often resulted in service disruptions due to late or missed payments.
Especially challenging for international customers was dealing with foreign transactions using international credit or debit cards. This situation highlighted the urgent need for an automated, user-friendly payment solution to ensure consistent service and meet diverse payment preferences.
Solution
I led the redesign to implement an automated monthly payment feature using PayPal. This initiative provided users with the option to set up recurring payments either during the signup process or post-onboarding.
This solution aimed at reducing user frustration with the one-time payments, while giving international users an alternative method to pay for their services with PayPal, especially when their credit and debit cards are not applicable for international payments.
End Product
Discovery
I started by identifying key touchpoints where users on DigitalOcean were interacting with payment gateways
I created a dummy account on DigitalOcean to analyze a user's experience first hand and identified three touchpoints where users are introduced to payment options.
Touchpoint 01
Identity verification during signup for new users
When new users are signing up, they can either verify their identity by adding a Credit/Debit card or making a one-time transaction with PayPal.
Touchpoint 02
Making a manual bill payment for existing users
Verified users that have on-boarded can make a one-time payment via PayPal using the 'Make a payment' button in the billing page of the control panel.
Touchpoint 03
Adding a backup payment method for existing users
Verified users can add a backup payment method such as a credit card, debit card, or bank account which will be used if the default payment method does not work.
Ideating solutions
Next, I sketched some ideas based on the existing touchpoints where I could introduce recurring PayPal payments as an option
I did not want to deviate too much from the existing user flows, so I leveraged what DigitalOcean had already implemented as payment options and tried to integrate PayPal recurring payment in these existing experiences.
New Users
Selecting 'Pre-Pay' or 'Recurring' during sign-up
My idea during sign-up was to use the existing identity verification payment gateway. Instead of just offering pre-pay, users will get to choose either pre-pay or recurring payments when selecting PayPal as a payment provider.
New Users
Opting in to PayPal recurring payments during verification
When choosing PayPal as a payment method for verification, users need to make a payment of $5.00 to verify their PayPal accounts.
My idea was to introduce a check box to enable recurring payments and add their PayPal accounts as the default payment method for future billing.
Existing Users
Adding PayPal recurring payments as a backup
Existing users that have verified their identity using a Credit card can add a backup payment method like a second credit card, bank account, or Google Pay.
Since we were introducing recurring payments, I liked the idea of adding PayPal as an option in this experience so users could add PayPal as a backup payment method.
Wireframing and Lo-fidelity Prototyping
I converted my sketches into wireframes and created lo-fidelity prototypes to understand the experience in a user's journey
Once I shared my initial ideas with the product and design teams, I started turning those sketches into wireframes to help me visualize a user's journey through the sign-up and post-onboarding process of adding PayPal recurring payments.
During Sign-up for New Users
Version 1
Selecting a PayPal payment method
My idea here was to allow a user to choose between Pre-pay and Recurring payments as separated experiences.
Depending on a user's selection, we will show different experiences for making a pre-payment or recurring payment method for future billing.
Version 2
Opt-in to PayPal recurring payments
Showing a checkbox to opt-in to recurring monthly payments is another idea I explored.
When a user enables recurring payments, our system would save their PayPal account as the default payment method, which would be used to pay for the services automatically every billing cycle. This would be highly beneficial for international customers since they could verify their accounts by connecting their international credit or debit cards via PayPal.
Post-onboarding for Existing Users
Version 1
Add PayPal as a payment method in Billing
For existing users that are already on-boarded onto DigitalOcean's platform, they could add a backup payment method from the billing page using a variety of payment methods.
I wanted to leverage this existing experience, and add an option to add PayPal recurring payments. Additionally, to inform users of this new feature, I added a CTA specifically for PayPal recurring payments, which would take users straight to the PayPal login page.
Version 2
Using a prominent banner for PayPal recurring CTA
Since we were introducing PayPal recurring payments as a new feature, I wanted to highlight this by adding a banner with a CTA that informs users of this.
By using a prominent, eye-catching banner, it would be easier for users to identify PayPal recurring payments in the billing page, since just using a link like in Version 1 did not stand out for this new feature.
After creating these lo-fidelity prototypes, I turned to the product and design teams for a review and received the following feedback, helping me move in the right direction
Feedback for new users signing up
❌ Version 1 - This design was termed invalid after learning that PayPal does not have different user flows for people choosing pre-pay or recurring payments.
✅ Version 2 - Using a check-box to enable recurring payments would not only reduce an extra step of choosing pre-pay or recurring, but also make it easier for users.
Feedback for existing users
❌ Version 1 - Using a unique CTA for PayPal recurring payments was a nice idea, but did not have the visual impact that would distinguish it from 'Add a backup' link.
✅ Version 2 - A banner to display this new feature was approved since it was visually more distinct. However, it had room to be more visually appealing and standout.
Final Design
I created two experiences for adding PayPal as a recurring payment method for new and existing users
How can we help new users enable PayPal recurring payments when signing up for a new account
On this page, users can see a checkbox that is enabled by default, and allows users to save their PayPal accounts as the default payment method for future bills.
Users that opt out of storing PayPal will see a banner displayed in their Billing page which will allow them to store PayPal as a recurring payment method.
When users opt-in to store their PayPal accounts for future bills, it will be used as the default payment method. However, users can only save one PayPal account at any given time.
How can we help existing users add PayPal recurring payments as a backup payment method
Existing users that do not have PayPal saved as a payment method will see a banner under Payment methods in the billing page. This banner will have a CTA that will allow existing users to easily set up PayPal recurring paymetns.