WordPress.com began offering ways to easily collect payments for services on your site. Users needed to have a clear understanding of how to set up and use the feature, to successfully collect payments from their visitors. As lead designer on this project my responsibilities included scoping, mapping out customer journeys, writing UI copy, and crafting high-fidelity mockups within the constraint of an existing design system.
Problem discovery
A payments solution was a new feature for WordPress.com. The offering was to give our users a way to easily collect payments for services. Customers who are new to Payments needed to have a clear understanding of how to use the feature and successfully collect payments from their visitors.
After some initial discovery work and flow mapping, it became clear this is essentially a mini-onboarding flow. The goal of onboarding is to help set up and educate users. By providing the same kind of guidance, we can create an onboarding flow for this specific feature.
I also thought how a solution could fit into the rest of a user’s WordPress.com experience. An ideal solution would be scalable holistically to extend to other features that would benefit from more onboarding guidance.
Intent capture
After connecting to Stripe, we use intent capture to educate users and help them connect with the feature. Clear examples of use cases help users have all the information they need to make the right selection.
Step-by-step setup
A user is walked through setting up all the details of their product and payment. Microcopy aims to educate rather than making people figure this form out themselves. A progress bar animates across the top to provide feedback with each step.
Confirmation email
As part of the payment settings, users can set up a custom message in the purchase confirmation email. Customers who are making the purchase receive a nice email where they can easily see purchase details and manage any subscriptions. WordPress.com branding is moved to the bottom of the email to reduce any confusion and put the site owner’s message forward.