Context
Sagetap Pay Portal is a comprehensive redesign of the payments experience for two critical user groups: Vendors managing platform fees and credits, and Sages managing their credit wallets. The project’s primary goal was to simplify credit management, reduce accounts receivable risk, and bring clear transparency to all payment interactions.
As Lead Designer, I led the creation of scalable, intuitive interfaces that address pressing business challenges while empowering users through transparency and self-service capabilities. This redesign was critical to improving cash flow, reducing delinquency, and streamlining operations across the platform.
Objectives
- Enable self-service credit purchases and fee payments for both vendors and Sages
- Prevent vendor usage if overdue, driving timely payments
- Centralize payment history and transparency for admins, vendors, and Sages
- Streamline workflows for all stakeholders through notifications, status cues, and guided actions
Design process
Auditing Current Experience
I began by auditing the existing Sage and Vendor payment flows. The Sage platform lacked a dedicated Credit Wallet page, making credit management unclear and frustrating. Vendors, meanwhile, faced a fragmented experience with limited visibility into fees, overdue balances, and payment options.
Understanding these pain points was essential for framing the project scope. Through user interviews and quantitative data, we aligned that the entire payment stories for both user groups needed to be rethought—from login through payment reconciliation—to build trust and ease of use.
Sage platform: Flowchart showing the intended user flow for sages.
Conceptualization & Prototyping
With a comprehensive view, I brainstormed ideas to centralize credit and payment data with clear status indicators and actionable next steps. Early wireframes explored unified dashboards and payment flows featuring blocking overlays for delinquency and bulk purchase incentives.
Prototypes were iterated through multiple rounds of user testing, validating clarity of credit status, ease of purchase, and effectiveness of delinquency messaging. We collaborated closely with stakeholders and engineering to ensure technical feasibility and adherence to business goals.
- From Audit to Action: Defining the Need for New Designs
- The comprehensive audit and research surfaced key insights about the fragmented and unclear payment experiences for both Sages and Vendors on the platform.
- For Sages, the absence of a dedicated Credit Wallet meant managing credits was confusing and scattered across multiple touchpoints, causing frustration and missed opportunities for self-service empowerment.
- For Vendors, the payment experience was fragmented and lacked transparency, with limited visibility into fees, overdue balances, and payment options—leading to delayed payments and operational inefficiencies.
- These findings made one thing clear: the existing flows required a major redesign to centralize credit and payment information, improve transparency, and provide actionable, guided workflows that users could trust and easily navigate.
- With this strong foundation and clarity of purpose, we moved into designing two focused solutions:
- A brand-new Credit Wallet for Sages to manage credits end-to-end
- An intuitive, unified Payment Page for Vendors to view balances, make payments, and resolve delinquencies
- The following sections dive into these final designs, showcasing how we answered the needs identified through our research with elegant, user-centered solutions.
Finalizing Design & Implementation
The final design incorporated a clean, responsive Sage Credit Wallet portal showing real-time balances, purchase history, and status indicators (available, blocked, pending). Vendor payment portal redesign aligned balances, fees, and overdue statuses in a consolidated page with in-app Stripe payments, proactive alerts, and easy self-serve payments.
Sage platform: Credit wallet page
Vendor platform: Credit wallet page
This is the overview where the sage can view credit balances and withdrawal history.
This is the tab is where the sage can set up their payment methods.
The history tab shows earning and withdrawal histories.
A workflow of the credit wallet withdrawal.
Tooltips interaction on hover
Vendor platform: Payment page
Vendor platform: Credit wallet page
Displays the overview of credit usage, available balance, and annual platform fee. Quick actions let vendors top up credits or settle dues immediately.
Displays the overdue alert, allowing users to buy more credits.
An easy-access ledger of all payment and credit transactions for vendor self-service and audits.
Workflow of vendor credit purchases and payment options
Workflow of payment overdue alert.
These projects reflects a user-centered, data-driven redesign that reshaped payment experiences for complex B2B workflows
Key Learnings
- Transparency and clarity are paramount: users want to see exact credit and payment statuses at a glance.
- Clear, contextual actions reduce friction and empower users to resolve outstanding balances or buy credits seamlessly.
- Consistency in language, data visualization, and notifications builds trust and reduces support volume.
- Cross-team collaboration accelerates resolving complex business and technical constraints for a successful launch.
Results
With data-backed design decisions, we:
- Created a clean, unified Sage Credit Wallet page showing real-time balances and purchase flows
- Designed a vendor payment portal with consolidated balance views, overdue alerts, and integrated payment options
- Simplified complex data presentation with tactical, contextual actions surfaced prominently
- Outcomes include:
- Improved credit purchase completion and reduced delinquency on the Sage platform
- 25% increase in self-service vendor payments and a 20% reduction in accounts receivable outstanding balances
- Faster delinquency resolution and improved stakeholder confidence
By focusing on clarity, actionable insights, and seamless self-service, Sagetap Pay Portal strengthened trust, improved operational efficiency, and delivered measurable business outcomes.
More projects
Sagetap
Sagetap: Pay portal design
Explore
Sagetap
Onboarding Redesign: Personalization & Goals
Explore
