Brief: Users struggled to navigate the payment process, finding steps confusing. The experience led to unintentional multiple payments, which in turn led to a high volume of disputes and a break of trust.
Problem
• Disputes' rates were at an all-time high of 0.69%. Stripe, the payment processing platform, had a limit of 0.75% for disputes. Exceeding this could result in termination of contract and subsequent shutdown of a key revenue/strategic initiative for Upside.
• The high dispute rate had capped our rollout to 25% of our user base.
Goal
1. Identify root causes of the high dispute rate throughout the user journey.
2. Address dispute triggers to enable full rollout beyond the current 25% user cap, expanding reach and revenue.
User Research
To identify friction points and improve user experience, the researcher and I conducted an iterative design cycle focused on simplifying the interface. We crafted and analyzed the ALPHA and BRAVO flows for new and existing users. Each flow offered a unique user journey, from selecting offers to completing payments, tailored to user familiarity.
In the ALPHA flow for existing users, a streamlined journey with minimal decision points ensured efficient navigation. Key screens, such as Offer Details and Barcode, kept information clear, reducing potential confusion. The BRAVO flow introduced additional steps, such as Add Card, to guide new users securely through the setup process. This structured onboarding builds trust and supports first-time users, preparing them for future interactions.
We also reviewed the Add Card and Card Added flows to understand how the timing and context of adding payment information impacted user motivation and retention.
Through this testing, we identified specific pain points where users experienced friction or confusion, particularly in the BRAVO flow for new users. These insights informed our design decisions, guiding us on how and where to minimize friction and optimize the overall user journey.
Full-screen takeover with a chevron for the win
Interface Exploration for Payment Flow
To improve the user experience within the payment flow, we explored several design variations, focusing on usability and navigation. Three main designs were tested:
Baseline Design: A straightforward, minimal interface that emphasizes simplicity. Users input the purchase amount directly and select a payment method, making for a quick, streamlined process.
Stepper with X for Navigation: This design introduces a stepper at the top, guiding users through each stage of the transaction. The “X” icon provides a quick way to exit, offering users more control and flexibility during the payment flow.
Full-Screen Bottom Sheet with Chevron Navigation: Here, a full-screen takeover with chevron navigation guides users step-by-step through the payment process, including entering the purchase total and confirming the payment method. This design provides clearer guidance and structure, ideal for ensuring users don’t miss any steps.
Full-Screen Takeover with Chevron Navigation: Similar to the bottom sheet, this variation uses a full-screen takeover, guiding users step-by-step with chevron navigation, providing clear progression cues.
Data showed that over 90% of new users and 20% of existing users claimed offers without being at the location, and based on user research a full-screen takeover with a chevron gave them confidence that their progress would be saved even if they exited the flow.
Merging of key screens
Through testing our previous flow, we discovered that many users misinterpreted the first screen as asking for the amount they had already paid, assuming the next screen was only for card selection rather than in-app payment. This misunderstanding was a major factor contributing to duplicate charges and higher dispute rates.
To address this, I designed a consolidated screen that combined both the amount entry and payment selection steps into a single, streamlined experience. Additionally, I requested the development team to add a dynamic display of the user’s earnings on each purchase, making it immediately visible as an added motivator on the payment screen. This approach enhanced user engagement by highlighting rewards upfront.
Branded barcode rendering
To enhance the barcode’s distinctiveness and branding, we applied style changes by integrating brand logos into the card area and using brand colors for the background. We also included key information within the object, such as the offer’s expiration time.
Label update
For clarity, we renamed the previous "Upside Pay" label to "Pay with app" and changed its color to improve contrast.
To highlight the distinct experience, this label appeared throughout the app in other areas like the Home screen and transaction history.
Dispute Rates
Dispute Costs
Transaction Volume
Results
• 50% reduction in dispute rates: Dispute rates went from 0.69% to 0.33%, and kept the margin since.
• 92% reduction of dispute costs: Dispute costs went from an all-time high in May of $8,800 to $700 per month.
• 251% surge in transaction volume: With the reduction of disputes, we were able to roll out “Pay with app” from 25% to 100% of our user base, resulting in a 251% surge in transaction volume.
