Vaulted cards
A feature that allows B2B merchants to manually charge a vaulted card for upfront and deferred payments.
✤
2021 ✶ Shopify ✶ Lead designer ✶ Web & mobile
Role
Lead designer
Other contributors
Staff content designer
UX intern
UX timeline
May - Sep 2021
(5 mos)
Platform
Desktop web
Mobile native
Role
Lead designer
Other contributors
Staff content designer
UX intern
UX timeline
May - Sep 2021
(5 mos)
Platform
Desktop web
Mobile native
Vaulted card is a new feature that allows our merchants to manually charge a vaulted card for upfront and deferred payments. After launching payment terms, we anticipated an increase in the volume of pending orders. While this brings more sales to our merchants, this also meant more work chasing down after payments. Our long-term goal is to build the foundation for payment automation and the first step in getting there is making it possible to charge a vaulted card manually.
To build the foundation for payment automation, we first make it possible to charge a vaulted card manually.
Problem
Merchants have to call and ask for their buyer’s credit card information every time they collect payment, or write down the card details somewhere unsecured, like a piece of paper.
Opportunity
Give merchants confidence and convenience when collecting deferred payment on orders with payment terms, preorders, raffles, and try now.
Use cases
Business-to-business (B2B)
- Save merchants time by removing the need to contact the buyer every time they collect payment.
- Vaulted card act as an assurance that the buyer is committed to paying.
- Backup payment method in case cheques and other manual methods are void or invalid.
Direct-to-consumer (D2C)
Pay for orders with subscriptions, preorders, raffles, and try before you buy.
Understand
Planning and stakeholder alignment
I started the process by turning How Might We's to design principles to help guide decision-making and prioritization. After a project timeline was defined, I worked backward and defined our high-level UX target dates. This ensured that we allocate enough time to do research, reviews, validation, and iteration. This also helped with defining when design work is done, something that we lacked on my previous project. Of course, processes are not linear, so in reality, there were some adjustments made.
We already did some research beforehand to uncover common use cases. Next, I wrote down questions to define priorities, dependencies, and product areas impacted by the feature. I also started looking at other apps for reference. Vaulted cards are commonly used in commerce, we didn’t have to reinvent the wheel. Here are some my early explorations:
Soon after, I moved to prototype in Figma in preparation for our stakeholder's review. This meeting was focused on talking about the problem we’re solving, the success metrics, and a general idea of what the solution might look like.
Ideate
First prototype
Adding B2B buyer to draft order
After adding a B2B customer to the order, their assigned terms and vaulted card will be reflected in the customer card. The merchant can continue adding products and decide how they want to collect the payment.
Pay now
For the pay now scenario, the merchant can now see the customer's vaulted cards when clicking the "Collect Payment" dropdown. Gone are the days when they have to input the customer's card details each time.
Pay later
For the pay later scenario, the merchant checks the payment due later and the assigned term is preselected. They can go ahead and review the draft and create a pending order. We then indicate the terms and payment method on the card, and as you can imagine, they don’t have to do anything since on the due date, we’ll just go ahead and charge the card.
Context gathering
After a successful stakeholders review, I was advised to talk to multiple teams to get answers to remaining questions, discover 3P use cases, and make informed decisions. Here’s what I learned:
- After looking at the data, I found out that most b2b buyers only have 1-2 vaulted cards, and experts mentioned about a strong preference for automation once possible.
- For D2C, the vaulted card is tied to the specific order (single-use).
- For B2B, all vaulted cards can be used in any order (multi-use), but the preferred method at Checkout should be indicated. Reordering with the same negotiated terms and method is common practice in B2B and since there’s high trust in this type of relationship, charging the card when payment is due is expected.
- We shouldn’t block merchants from charging the card before the due date. It is a workaround until we support early payment discounts (eg. 2/10 net 30).
- For legal reasons, card vaulting should be explicitly performed by the buyer.
- Payment receipts should be sent each time the card is charged to maintain customer trust and transparency.
Research and iterate
Usability test
Pay now
For upfront payment, since the point of vaulted cards is to save merchants’ time, and the majority will only have 1-2 vaulted cards, it made sense to show the actions upfront. The merchant charges the card and the buyer receives an order confirmation indicating the credit card.
Pay later
For deferred payments, the merchant selects the card that they will charge on the due date. The order indicates the terms and the preferred method, with an option to charge it manually. If the merchant tries to charge it before the due date, we show a warning.
B2B Checkout
For checkout, the buyer sees the negotiated terms and chooses their preferred payment method. The payment information is shown all thru out the experience and after submitting the purchase order, it creates a draft where the merchant can review it before converting it to an order.
Learnings
✽
We weren’t surprised that the first thing merchants were concerned about was legality and consent. This meant that there should be a way for us to reference consent given by the buyer when they vaulted the card.
Perhaps the most interesting learning here was the fact that merchants don't actually prefer automation all of the time. It varies depending on their process and cash flows.
We’re also surprised that merchants care less about the method and more about just getting paid. Maybe it’s not as important as we think it was. Perhaps for manual collection, all they need is to communicate accepted methods.
Merchants with streamlined workflows prefer automatically charging the card on the due date.
“For the most part we have customers that tell us we don’t ever wanna know, just charge us, don’t bother us.”
“[When choosing a vaulted card] I would expect it to just went through to where we don’t have to worry about it whatsoever.... Otherwise everything that we have just done [selecting a vaulted card on drafts] is for nothing.”
Merchants who hand hold every B2B order prefer manual payment collection even if there’s a vaulted card.
“When you get to your small and medium businesses they have a little bit more tap on what’s going on in my business, different financing... Even as a buyer myself, it’s hard to forecast cash flows and I rather decide the payment method closer to the due date”
Merchants are pretty rigid on payment terms but not with payment methods.
“Payment should never be the reason why somebody doesn’t buy from you. Payment is a transactional thing. If people wanna pay by Bitcoin, then they should be able to pay by Bitcoin.”
Sending payment reminders is a common part of the payment collection process.
“We use Sufio and Square to automatically send payment reminders.”
Merchants care about PCI compliance and consent to charge a vaulted card.
“The first thing I think about is PCI compliance.”
“It’s hard to keep track of who actually approves us to charge their card on the due date or not.”
Learnings
✽
We weren’t surprised that the first thing merchants were concerned about was legality and consent. This meant that there should be a way for us to reference consent given by the buyer when they vaulted the card.
Perhaps the most interesting learning here was the fact that merchants don't actually prefer automation all of the time. It varies depending on their process and cash flows.
We’re also surprised that merchants care less about the method and more about just getting paid. Maybe it’s not as important as we think it was. Perhaps for manual collection, all they need is to communicate accepted methods.
Merchants with streamlined workflows prefer automatically charging the card on the due date.
“For the most part we have customers that tell us we don’t ever wanna know, just charge us, don’t bother us.”
“[When choosing a vaulted card] I would expect it to just went through to where we don’t have to worry about it whatsoever.... Otherwise everything that we have just done [selecting a vaulted card on drafts] is for nothing.”
Merchants who hand hold every B2B order prefer manual payment collection even if there’s a vaulted card.
“When you get to your small and medium businesses they have a little bit more tap on what’s going on in my business, different financing... Even as a buyer myself, it’s hard to forecast cash flows and I rather decide the payment method closer to the due date”
Merchants are pretty rigid on payment terms but not with payment methods.
“Payment should never be the reason why somebody doesn’t buy from you. Payment is a transactional thing. If people wanna pay by Bitcoin, then they should be able to pay by Bitcoin.”
Sending payment reminders is a common part of the payment collection process.
“We use Sufio and Square to automatically send payment reminders.”
Merchants care about PCI compliance and consent to charge a vaulted card.
“The first thing I think about is PCI compliance.”
“It’s hard to keep track of who actually approves us to charge their card on the due date or not.”
after further iterations and UX stakeholders presentations...
Final solution
MVP vs Future
Finally, we're ready to enter build after I shared with stakeholders share our long-term vision and how we’re scaling it back to MVP prior to the meeting. This was important because they aren’t close to our day-to-day work and they mostly care about the bigger picture.
MVP
Charge a vaulted card manually on drafts and orders • Payment receipt • User permissions
For MVP, to highlight the immediate value we’re bringing to merchants and to show how the solutions adhere to our design principles.
Long-term vision
B2B companies • Pricing catalogs • B2B vaulted cards • Payment automation • Payment reminders
For long term, this is to show how we expect all moving parts to come together and to ensure nothing breaks in order creation.
Final solution
The MVP
Legally capture buyer’s consent to store card
Before, we considered allowing the merchant to initiate card vaulting from the admin either thru sending an invoice or the pay by credit card, but after talking to the finance and legal team, we soon realize that there are legal requirements and so the safest way to vault card is thru an explicit consent captured in a buyer-initiated flow, like Checkout or buyer portal. The buyer flow was worked on by the B2B checkout team.
Surface the payment actions at the right time and place
Before, we considered rolling up credit card actions into one action, however, since the point of vaulted cards is to save merchants’ time, and knowing that majority will only have 1-2 vaulted cards, it made sense to show the actions upfront.
Labelling
Our content designer suggested shortening the label from 4 dots to 1 dot to save real estate, especially for longer translations.
Expired state
We reused the badge pattern from the Subscriptions team to indicate an expired state. An expired card in this context doesn’t impose any risk nor require immediate action, since payment collection is done manually and merchants can still choose a different method. A neutral badge made more sense than a warning badge. This opinion might change for automated payments.
Make it easy to succeed and harder to fail
We have many systems in place to do that. First, by letting merchants know that they’re attempting to charge before the due date. Second, by sending payment receipts automatically to buyers. After talking to the security team, we decided not to make this template editable to prevent bad actors from misusing it. And then third, by introducing user permissions that will allow merchants to specify which staff members can have access to credit card actions. This was a huge requirement from Plus merchants.
Mobile
I also worked on mobile, which is quite straightforward. We added the credit card actions to the action sheet and displayed a warning banner if the merchant attempts to charge before the due date. Learning from my past mistake, I made sure to understand dev expectations and designed for both iOS and Android.
Ship and support
Design handoff and UX decision log
✶ Business impact
I left Shopify before the feature was shipped, but the work already made an impact:
- Shipped new permissions for credit card actions (requirements from Plus merchants).
- Ensure we’re building the right primitives for charging a vaulted card for terms, preorders, raffles, and try now.
- Build the foundation for the next project: automated payments.
Success metrics: Increase usage of vaulted cards over manually inputting credit card details and decrease in overdue payments
✤ Learnings
- Getting context from one source is not enough so make sure to validate with real users.
- Showing long-term vision and how it scales back to MVP helps with stakeholders' alignment and quick buy-in.
✶ Business impact
I left Shopify before the feature was shipped, but the work already made an impact:
- Shipped new permissions for credit card actions (requirements from Plus merchants).
- Ensure we’re building the right primitives for charging a vaulted card for terms, preorders, raffles, and try now.
- Build the foundation for the next project: automated payments.
Success metrics: Increase usage of vaulted cards over manually inputting credit card details and decrease in overdue payments
✤ Learnings
- Getting context from one source is not enough so make sure to validate with real users.
- Showing long-term vision and how it scales back to MVP helps with stakeholders' alignment and quick buy-in.
✶
Thanks for reading
✶
✶
The end
Meow you doin'?
Let's keep in touch.
Ottawa, Canada
Email: justinewincanete@gmail.com
© Justine Win 2023
Product designer