DoP Deep - Payment journey UX explored
How companies like Dropbox, Notion, Perplexity, Zoom, Spotify and more take payments
🔒DoP Deep goes deeper into the concepts and ideas that are covered in the Weekly Briefing to help you learn lessons from the experiences of top tech companies. If you’d like to upgrade to receive them you can do so below. Or you can find out more about what you get as a paid subscriber here.
Hi product people 👋,
It was recently reported that Uber is experimenting with a new payment feature that allows via bank transfers using Stripe’s Link functionality. And in its conference last week, Stripe revealed that crypto payment methods are back. For product teams, the payment methods and gateways you choose can have a dramatic impact on conversion and retention and so we thought this might be a topic worth diving deeper into.
In this DoP Deep dive, we’re going to explore in detail the payment journeys of top tier companies including attributes like the payment methods they offer, button CTAs, the number of steps in the journey and more.
If you’re working on a payment journey of your own or you’re thinking about some of the ways you might be able to optimise your journey, this should hopefully come in handy.
Coming up:
A deep dive into the payment journeys of top tier products including: LinkedIn, Spotify, Zoom, Notion, Perplexity, Docusign and others
How to design a modern payment experience - lessons and takeaways for product teams looking to optimise their own payment journeys
How new payment methods like Stripe’s bank transfer works and the emergence of new payment methods
All payment UX patterns and journeys in full
How this analysis is structured
For this deep dive, we’ve hand picked a selection of top tier companies including LinkedIn, Notion, Perplexity, Zoom, Spotify and more.
To help you get a snapshot of how each of the payment journeys work, for each company’s payment journey we’ve analysed the following attributes:
Payment methods - what payment methods does each product support?
Payment gateways - do they use Stripe, Ayden or custom infrastructure?
UX patterns - what UX elements / patterns does this journey use? We’ve broken these down into some of the more common elements to help categorize them. More on that below.
Number of steps - the total number of steps involved in the payment journey
Payment button CTA - the CTA used on the button to complete the purchase
How we’ve categorized payment UX patterns
For the UX patterns of the journey specifically, we’ve analysed each of the journeys to understand the most common / important elements that are included in each payment journey.
These elements include things like defaults to annual pricing, the ability to save a card for future use or live inline validation where users are immediately prompted as they type to correct their errors.
Here’s some of the main UI elements / patterns we’ve categorized as part of this deep dive:
Placeholder label - the label displayed within a form input field that disappears when the user begins to type.
Save card for future - the ability to store their card details for quicker transactions in the future.
Padlock icons - some companies use the padlock symbol used to indicate that a transaction is secure, often found next to input fields for sensitive information like credit card details. Any payment journeys that use this are clearly marked.
Errors appear on save - displays error messages when users attempt to submit a form with incorrect or incomplete information.
Defaults to annual - for SaaS products in particular, an option that sets the payment frequency to yearly. If a payment journey defaults to annual, this is marked.
Asterisk for required fields - the use of an asterisk symbol (*) to indicate that a particular input field must be filled out to proceed. Some companies include an asterix on all required fields and some don’t.
Live chat - some companies offer a live chat feature that provides users with the option to chat with a sales representative for assistance during the purchasing process. We’ll look at some research to figure out whether or not this is a good idea.
The full list of all the companies along with each of the full payment user journeys is available at the end of this post.
Company deep dives
Now that you know how the analysis is structured, let’s dig deeper into the first of the companies we’ve chosen and examine how their payment UI works.