Aspire x Stripe
Stripe Integration workflow
PRODUCT/ UX-UI
2024-2025
Aspire, a neo-bank product, streamlines payments for SMB's and strives to provide the best experience for their customers, while partnering with a wide variety of payment gateways and wallets that their customers would need. Stripe as a payment wallet in Aspire, was one such crucial integration that faced a lot of CX issues and our clients reported a majority of low scores in the feedback form that pops up after using this feature. So the goal was to optimize this design and reduce overall customer support contact rate!
Went through the existing flow and documented observations, UX pain points and potential solutions.
Viewed 10+ user sessions (Smartlook) to analyse where users get stuck during the Stripe setup and application
Collaborated with the Senior Product Manager (Payments), to understand target release goals and metrics
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, Smartlook (Session analysis)
Aspire's initial Stripe launch received a lot of negative feedback on the UX which had to be improved.
67%
-Percentage of users who rated the feature flow as 1/2 stars out of 5
Through user interviews, we also discovered that end users were confused on the setup process, indicating a need for for visual resources.
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.
Discovering the problem
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
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-
Did you find any difficulties in setting up Stripe with Aspire?
At which step did you feel stuck or confused?
Are you aware of the benefits offered by Aspire x Stripe, rather than just using Stripe directly?
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*
Recognizing these oppurtunities, we aimed to improve this feature and ask:
How might we improve the setup experience of a 3rd party wallet integration in a fintech app, for all types of users?
User stories to guide designs!
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"
Obstacles faced through my experience
Estimating timelines for proposed design assets
While creating new designs, there are always oppurtunities to enhance certain assets to drive the point home. One such case was a visually engaging coupon structure that I proposed and well received by design (img below). However due to the feature roadmap, accounting for a new storybook component and then adding it in code proved to be challenging as we did not have enough chillies (1 chilli= 1 developers bandwidth for 1 month). Hence an alternate easy to develop design was proposed instead.
Understanding Stripe as a payment gateway
Since this feature relied heavily on another product out there, lot of preliminary research went into understadning how Stripe's payout account workflow works and how the money is settled into another app such as Aspire. We also figured out how to save our customers money by adding additional payout currency accounts in stripe that again settle in Aspire.
Ideation and Design
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
Contextual discovery
we noticed that some users are restricted to the invoices page in aspire. to increase visibility, we added setup buttons across all core pages for easy integration
Educating the user
LOT OF CUSTOMERS DID NOT KNOW THE BENEFITS ON USING STRIPE WITH ASPIRE. TO APPEAL TO THEM, A GAMIFIED UI WAS DESIGNED IN THE FORM OF A COUPON THAT THAT MADE THEM FEEL LIKE THEYRE UNLOCKING A DEAL RATHER THAN JUST SETTING UP A GENERIC PAYMENT METHOD
In- app modal video
TO AID THEIR EXPERIENCE AND CATER TO A GOOD UX, I PROPOSED A FEATURE DEMO VIDEO TO BE ADDED AS AN INTERMEDIARY STEP, CLEARLY EXPLAINING THE E2E FLOW, MADE IN CLUSEO.AI
Unlinking Stripe
unlink buttons were provided across different touchpoints, as well as designing for cases where invoices and payment links were using stripe and got disconnected
