OPTIMIZING STRIPE INTEGRATION
FEATURE INTEGRATION
Integrated stripe as a payment method in Aspire Hong Kong and US business accounts, while improving upon the previous UX and solving pain points from the Singapore business accounts
Role
Design QA, Alpha testing, UI Build, DS documentation
COLLABORATORS
Tribe Design Manager, Director of Design, Senior Product Manager (Payments), Senior Visual Designer
DURATION
1 month 20 days
TOOLS
Figma, Confluence
WHAT WERE WE SOLVING?
After launching our Stripe integration for Singapore businesses in Q4 2024, the natural next step was to add Stripe as an integration for Hong Kong and US accounts, our next expansions. However, many Singapore businesses were raising complaints and contacting customer support to understand how to set up Stripe or, if already connected, how to switch their accounts. So before introducing this integration to Hong Kong, the goal was to streamline Stripe setup and unlinking while reducing the customer support contact rate.
DISCOVERY PHASE
To ensure we were solving the right problems, we began by validating the need, defining the scope, and creating a mini roadmap to align with timelines. We then used targeted research methods to quickly uncover key pain points from businesses using this feature and what problems they were facing. The goal was to identify essential capabilities for a live production release to address these UX concerns immediately-
Qualitative interviews- Singapore clients
We asked questions through in-person interviews to our SG clients using Stripe and asked what problems they were facing. A few of the sample questions are given below-
1. Did you find any difficulties in setting up Stripe with Aspire?
2. At which step did you feel stuck or confused?
3. Are you aware of the benefits offered by Aspire x Stripe, rather than just using Stripe directly?
4. What led you to contact customer support instead of resolving it yourself?
B. Survey- Customer support feedback (NPS)
We gathered available customer feedback data from the past 3 months.
Our focus was on feedback rated negatively (detractors) to pinpoint issues experienced by multiple customers.
*Detailed insights coming soon*
USER STORIES
We then turned our findings into simple user stories to address these problems-
As an incorporated business using Aspire, I want to-
Be aware of how Aspire x Stripe works, its benefits, settlement terms, and fees before signing up
Easily setup Stripe regardless of my technical proficiency
Use Stripe as a payment method in all my invoices and payment links, no matter which currency i choose
Be able to change my Stripe account incase I've linked a wrong Stripe account of mine
IDEATION
After gaining clarity on the challenges our users encountered, identifying key pain points, and determining areas of focus, we initiated discussions across the Payments tribe management to define the scope and timeline. User stories were prioritised to build the alpha version which can be deployed asap. We created a fully prototyped version to identify any discovery issues or copy improvements that can be addressed right away. We then tested the designs with our regualr trusted clients in SG to verify if it solves the issue in their opinion
To do this we first listed down the entry points to place setting up Stripe. For this, we proposed-
- 'Suggested for you' actions accessible from the homepage as some users may not navigate to the settings page and enable it from there-Receivables settings page where all payment methods are added.
-Integrations page, which also talks more about the feature and what it offers
-Directly in the invoices and payment links creation tabs- This was done to further increase visibility of the stripe integration, as users would navigate to creating an invoice/payment link and see this nudge just before they start the process.
ENTRY POINTS FOR STRIPE SETUP
Next up was the task of informing the user on how this feature works, as well as advertise all the perks and fees so as to avoid any dark patterns and customer dissatisfaction. This was done through the first modal that pops up once the user clicks enable/set up stripe. I designed a visually engaging coupon structure advertising the fees and settlement time that is offered by Aspire X Stripe. Also clear mapping was done to communicate that these benefits only apply if a user creates a new account in Stripe via Aspire.
ENGAGING UI FOR COMMUNICATING PERKS, FEES
To tackle simplifying stripe setup to get rid of user confusion, lets move on to the next user story
To tackle previous user pain points of not knowing how to setup stripe in Aspire, as well as being confused about general stripe onboarding, resources have now been provided along the user journey, in the form of a hyperlinks and secondary buttons to reduce contact rate-
'See how it works'- Takes the user to an Aspire video resource that walks the user through how to set up stripe.
'See onboarding instructions'- Takes the user to a stripe onboarding video resource before launching the actual onboarding flow of Aspire x Stripe through a Stripe portal
STREAMLINING STRIPE SETUP
This flow was already covered in the Singapore accounts and was received well by clients, with no actionable detractors
UNLINKING ENTRY POINTS
The challenge behind unlinking Stripe lies within analyzing its impacts to the business accounts receivables. When unlinking the current stripe account being used for receivables, two cases may arise-
User unlinks Stripe while invoices/payment links using Stripe as the payment method are still processing.
User unlinks Stripe while invoices/payment links using Stripe as the payment method are already settled.
To design for this, we had to communicate the status of invoices and payment links in their respective pages and ensure proper understanding through design components like tooltips, tags and information banners
post unlinking states- 1. invoices payment processing, invoices payment settled
The payment links used the same design execution as well
BETA LAUNCH AND INSIGHTS
After designing the flow by putting our user front and centre, a voice over video walkthrough was created and shared with the CPO, Director of design and Senior Design manager for alignment. On approval, usability testing was conducted internally and was launched in beta.
A few feedbacks that we got from the beta launch was-
Integrating Stripe into Aspire was relatively easier, kudos to the video that was shown once i started the setting it up
Loving the benefits of Aspire x Stripe with lesser settlement times, great incentive for my business!
Another point of topic that was raised was that- Customers and our team asked for multi-currency payouts through Stripe so users can avoid conversion fees and get paid directly in their chosen currency. We also noticed that users sometimes changed the currency without realizing it was different from their default payout account. To help, we added an alert when the currency changes and a small nudge before sending an invoice or payment link in a different currency. The design below shows how this works.
POPUP NUDGE FOR ADDING A SECONDARY CURRENCY STRIPE PAYOUT ACCOUNT