DigitalOcean
DigitalOcean
DigitalOcean
Introducing Automated Payments for 600k Users
Introducing Automated Payments for 600k Users
Introducing Automated Payments for 600k Users
The project introduces automated PayPal payments for DigitalOcean customers, enhancing convenience for businesses needing timely transactions and international users facing card payment issues. This move aims to keep services uninterrupted and broaden payment accessibility globally.
The project introduces automated PayPal payments for DigitalOcean customers, enhancing convenience for businesses needing timely transactions and international users facing card payment issues. This move aims to keep services uninterrupted and broaden payment accessibility globally.
The project introduces automated PayPal payments for DigitalOcean customers, enhancing convenience for businesses needing timely transactions and international users facing card payment issues. This move aims to keep services uninterrupted and broaden payment accessibility globally.
Year: 2022
Year: 2022
Responsibilities: Discovery, Ideation, Wireframing, Prototyping, Developer-Handoff
Responsibilities: Discovery, Ideation, Wireframing, Prototyping, Developer-Handoff
Team: Jaskaran Sondhi (UX/UI), Michael Constantino (Engineer), Earl Carlson (Design Manager), Ryan Balsick (Product Manager)
Team: Jaskaran Sondhi (UX/UI), Michael Constantino (Engineer), Earl Carlson (Design Manager), Ryan Balsick (Product Manager)
The Challenge
The Challenge
The Challenge
DigitalOcean's limited payment options and one-time manual payment system caused frustration for new and existing users. The dependency on manual payments often resulted in service disruptions due to late or missed payments. Additionally, many new international customers had no way to verify their identity using their credit/debit cards.
DigitalOcean's limited payment options and one-time manual payment system caused frustration for new and existing users. The dependency on manual payments often resulted in service disruptions due to late or missed payments. Additionally, many new international customers had no way to verify their identity using their credit/debit cards.
DigitalOcean's limited payment options and one-time manual payment system caused frustration for new and existing users. The dependency on manual payments often resulted in service disruptions due to late or missed payments. Additionally, many new international customers had no way to verify their identity using their credit/debit cards.
diving into the existing problems
diving into the existing problems
diving into the existing problems
Restricted verification options during sign up
Restricted verification options during sign up
Restricted verification options during sign up
Only two ways to get verified
Only two ways to get verified
Only two ways to get verified
During signup, users were limited to only using their credit/debit cards or making a one-time payment using Paypal.
During signup, users were limited to only using their credit/debit cards or making a one-time payment using Paypal.
During signup, users were limited to only using their credit/debit cards or making a one-time payment using Paypal.
Limited options for international users
Limited options for international users
Limited options for international users
International customers from certain countries, like India, were unable to user their credit/debit cards for international payments due to their bank's limitations.
International customers from certain countries, like India, were unable to user their credit/debit cards for international payments due to their bank's limitations.
International customers from certain countries, like India, were unable to user their credit/debit cards for international payments due to their bank's limitations.
Payment methods for existing users caused frustration
Payment methods for existing users caused frustration
Payment methods for existing users caused frustration
Manual monthly payments
Manual monthly payments
Manual monthly payments
Existing users who did not add a credit card during sign up were forced to make one-time manual payments every month.
Existing users who did not add a credit card during sign up were forced to make one-time manual payments every month.
Existing users who did not add a credit card during sign up were forced to make one-time manual payments every month.
Service disruptions due to missed or late manual payments
Service disruptions due to missed or late manual payments
Service disruptions due to missed or late manual payments
Often time, users would miss the payment date, causing their services to be frozen and incurred late fees.
Often time, users would miss the payment date, causing their services to be frozen and incurred late fees.
Often time, users would miss the payment date, causing their services to be frozen and incurred late fees.
The Solution
The Solution
The Solution
The redesign implemented an automated monthly payment feature using PayPal, providing users with the option to set up recurring payments either during the signup process or post-onboarding. International users could also connect their credit/debit cards to PayPal and use it as a payment method to get billed automatically every month.
The redesign implemented an automated monthly payment feature using PayPal, providing users with the option to set up recurring payments either during the signup process or post-onboarding. International users could also connect their credit/debit cards to PayPal and use it as a payment method to get billed automatically every month.
The redesign implemented an automated monthly payment feature using PayPal, providing users with the option to set up recurring payments either during the signup process or post-onboarding. International users could also connect their credit/debit cards to PayPal and use it as a payment method to get billed automatically every month.
solution 1
solution 1
solution 1
Status banner when a single incident is occurring
Status banner when a single incident is occurring
Status banner when a single incident is occurring
New users can choose PayPal as a verification method during signup and save it as their default monthly payment method so they get billed automatically.
New users can choose PayPal as a verification method during signup and save it as their default monthly payment method so they get billed automatically.
New users can choose PayPal as a verification method during signup and save it as their default monthly payment method so they get billed automatically.
Adding PayPal as a new payment method for existing users
Adding PayPal as a new payment method for existing users
Adding PayPal as a new payment method for existing users
Existing users can easily add PayPal as a payment method from the billing page. International users now have the option of connecting their cards to PayPal and using it as a default monthly payment method.
Existing users can easily add PayPal as a payment method from the billing page. International users now have the option of connecting their cards to PayPal and using it as a default monthly payment method.
Existing users can easily add PayPal as a payment method from the billing page. International users now have the option of connecting their cards to PayPal and using it as a default monthly payment method.
Diving into the process
Diving into the process
Diving into the process
We followed a well planned process to identify key user problems through user interviews, using insights to ideate solutions and test them with users using findings to reiterate and come up with a final solution that solves key user problems.
We followed a well planned process to identify key user problems through user interviews, using insights to ideate solutions and test them with users using findings to reiterate and come up with a final solution that solves key user problems.
We followed a well planned process to identify key user problems through user interviews, using insights to ideate solutions and test them with users using findings to reiterate and come up with a final solution that solves key user problems.
discovery
discovery
discovery
Identifying key touchpoints for payments
Identifying key touchpoints for payments
Identifying key touchpoints for payments
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.
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.
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
touchpoint 01
touchpoint 01
Identity verification during signup for new users
Identity verification during signup for new users
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.
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.
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
touchpoint 02
touchpoint 02
Making a manual payment for existing users
Making a manual payment for existing users
Making a manual 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.
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.
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
Touchpoint 03
Touchpoint 03
Adding a new backup payment method
Adding a new backup payment method
Adding a new backup payment method
Existing users could add a backup payment method from the billing screen and choose PayPal.
Existing users could add a backup payment method from the billing screen and choose PayPal.
Existing users could add a backup payment method from the billing screen and choose PayPal.
Problem Statement
Problem Statement
Problem Statement
New users encounter limited payment options during account verification, and existing users face challenges with manual bill payments, leading to widespread frustration and service interruptions. This situation demands a more user-friendly payment system to ensure continuous and reliable service for businesses and international customers.
New users encounter limited payment options during account verification, and existing users face challenges with manual bill payments, leading to widespread frustration and service interruptions. This situation demands a more user-friendly payment system to ensure continuous and reliable service for businesses and international customers.
New users encounter limited payment options during account verification, and existing users face challenges with manual bill payments, leading to widespread frustration and service interruptions. This situation demands a more user-friendly payment system to ensure continuous and reliable service for businesses and international customers.
Ideation
Ideation
Ideation
Exploring various solutions
Exploring various solutions
Exploring various solutions
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.
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.
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.
Solution for New Users
Solution for New Users
Solution for New Users
Selecting 'Pre-Pay' or 'Recurring' during sign-up
Selecting 'Pre-Pay' or 'Recurring' during sign-up
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.
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.
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.
Solution for New Users
Solution for New Users
Solution for New Users
Opting in to PayPal recurring payments during verification
Opting in to PayPal recurring payments during verification
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.
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.
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.
solution for existing users
solution for existing users
solution for existing users
Adding PayPal recurring payments as a backup
Adding PayPal recurring payments as a backup
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.
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.
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.
wireframes
wireframes
wireframes
Building out the experience
Building out the experience
Building out the experience
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.
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.
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.
PayPal payments for new users during sign up
PayPal payments for new users during sign up
PayPal payments for new users during sign up
Version 01
Version 01
Version 01
Selecting a PayPal payment method
Selecting a PayPal payment method
Selecting a PayPal payment method
My idea here was to allow a new user to choose between Pre-pay and Recurring payments as separated experiences during sign up.
My idea here was to allow a new user to choose between Pre-pay and Recurring payments as separated experiences during sign up.
My idea here was to allow a new user to choose between Pre-pay and Recurring payments as separated experiences during sign up.
Depending on a user's selection, we will show different experiences for making a pre-payment or recurring payment method for future billing.
Depending on a user's selection, we will show different experiences for making a pre-payment or recurring payment method for future billing.
Depending on a user's selection, we will show different experiences for making a pre-payment or recurring payment method for future billing.
Version 02
Version 02
Version 02
Opt-in to PayPal recurring payments
Opt-in to PayPal recurring payments
Opt-in to PayPal recurring payments
Showing a checkbox to opt-in to recurring monthly payments is another idea I explored.
Showing a checkbox to opt-in to recurring monthly payments is another idea I explored.
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.
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.
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.
PayPal payments for new existing users in billing page
PayPal payments for new existing users in billing page
PayPal payments for new existing users in billing page
Version 01
Version 01
Version 01
Add PayPal as a payment method in Billing
Add PayPal as a payment method in Billing
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.
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.
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.
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.
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 02
Version 02
Version 02
Using a prominent banner for PayPal recurring CTA
Using a prominent banner for PayPal recurring CTA
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.
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.
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.
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.
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:
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:
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
Feedback for new users signing up
Feedback for new users signing up
â Version 01
â Version 01
â Version 01
This design was scraped after learning that PayPal does not have different user flows for people choosing pre-pay or recurring payments.
This design was scraped after learning that PayPal does not have different user flows for people choosing pre-pay or recurring payments.
This design was scraped after learning that PayPal does not have different user flows for people choosing pre-pay or recurring payments.
â Version 02
â Version 02
â Version 02
Using a check-box to enable recurring payments would reduce an extra step of choosing pre-pay or recurring and also make it easier for users.
Using a check-box to enable recurring payments would reduce an extra step of choosing pre-pay or recurring and also make it easier for users.
Using a check-box to enable recurring payments would reduce an extra step of choosing pre-pay or recurring and also make it easier for users.
Feedback for existing users
Feedback for existing users
Feedback for existing users
â Version 01
â Version 01
â Version 01
Using just text to introduce automated payments via PayPal was not prominent enough for users to visually see and needed to stand out more.
Using just text to introduce automated payments via PayPal was not prominent enough for users to visually see and needed to stand out more.
Using just text to introduce automated payments via PayPal was not prominent enough for users to visually see and needed to stand out more.
â Version 02
â Version 02
â Version 02
Adding a banner was more prominent on the user's screen and would make it more attention grabbing when users view the billing page.
Adding a banner was more prominent on the user's screen and would make it more attention grabbing when users view the billing page.
Adding a banner was more prominent on the user's screen and would make it more attention grabbing when users view the billing page.
retrospective
retrospective
retrospective
Final thoughts and take aways
Final thoughts and take aways
Final thoughts and take aways
take away 1
take away 1
take away 1
Viewing the experience from the customer's POV
Viewing the experience from the customer's POV
Viewing the experience from the customer's POV
It was crucial for me to get into the shoes of our customers and go through their journey during sign up and post-onboarding to realize the potential restrictions they faced while using the platform.
It was crucial for me to get into the shoes of our customers and go through their journey during sign up and post-onboarding to realize the potential restrictions they faced while using the platform.
It was crucial for me to get into the shoes of our customers and go through their journey during sign up and post-onboarding to realize the potential restrictions they faced while using the platform.
take away 2
take away 2
take away 2
Considering international customers
Considering international customers
Considering international customers
We must take into account the limitations for international customers regarding payments. By digging deep into the customer base, I was able to surface the issues that certain international customers faced with billing.
We must take into account the limitations for international customers regarding payments. By digging deep into the customer base, I was able to surface the issues that certain international customers faced with billing.
We must take into account the limitations for international customers regarding payments. By digging deep into the customer base, I was able to surface the issues that certain international customers faced with billing.