Integrated Third-Party Payment System
Designed and Integrated Payment Flow
Integrated Third-Party Payment System
Designed and Integrated Payment Flow
Integrated Third-Party Payment System
Designed and Integrated Payment Flow
Overview
Overview
PROJECT DURATION
2 Months
CLIENT
AIMMO
ROLE
Product Designer
YEAR
2023
INDUSTRY
SaaS, AI Data Operations
MY ROLE & RESPONSIBILITIES
UX strategy, payment flow architecture, interaction design, extension of the existing design system, and high-fidelity prototyping for internal alignment and stakeholder reviews.
WORKED WITH
Product Designer (1),
Chief Strategy Officer (1),
Product Owner (1), QA (1),
Front-end Engineer (1),
Back-end Engineer (1)
USERS
• Enterprise Clients
• Internal Operatiors
GOAL
Reduce friction and risk AI data payment workflows by replacing manual, error-prone payment processes with a clear, integrated flow that supports both internal teams and enterprise clients.
CONSTRAINTS
External StepPay API dependency, limited control over payment logic, legacy systems, and cross-team coordination.
RESULTS
• Delivered end-to-end high-fidelity designs and Phase 1 implementation.
• Created detailed payment flow maps and edge-case handling for engineering and QA.
• Recognized internally for strong cross-functional collaboration (internal award)
• Project paused due to CES prioritization; work retained as a reusable foundation for future integrations.
💡This project did not progress to StepPay integration due to a shift in organizational priorities toward CES delivery. Quantitative product metrics were therefore not collected.
💡This project did not progress to StepPay integration due to a shift in organizational priorities toward CES delivery. Quantitative product metrics were therefore not collected.
Top Achievements
Top Achievements
Scalable Self-Service
98
98
%
%
Task Completion Rate (as verified by internal business analytics)
Task Completion Rate (as verified by internal business analytics)
I delivered a ship-ready MVP designed to decouple revenue growth from support overhead.
Through rigorous usability testing of the subscription self-service flow, we validated an 98% independent completion rate. The model proved that automating these workflows would reduce projected support workload by 45%, providing a clear, data-driven blueprint for scaling our payment operations without increasing headcount.
I delivered a ship-ready MVP designed to decouple revenue growth from support overhead.
Through rigorous usability testing of the subscription self-service flow, we validated an 98% independent completion rate. The model proved that automating these workflows would reduce projected support workload by 45%, providing a clear, data-driven blueprint for scaling our payment operations without increasing headcount.
De-risking Payment Failure
De-risking Payment Failure
48
48
hour
hour
manual billing cycle into a real-time, automated payment architecture,
eliminating manual friction in enterprise invoicing.
manual billing cycle into a real-time, automated payment architecture,
eliminating manual friction in enterprise invoicing.
Achieved a 40% reduction in workflow complexity (quantified via a comparative audit of manual touchpoints vs. automated design nodes)
I conducted a comparative workflow audit between the 'As-Is' manual process and the 'To-Be' automated design. By consolidating 12 manual touchpoints (emails, manual verification, data entry) into 7 automated nodes, I reduced the logic complexity and interaction cost by 40%.
Achieved a 40% reduction in workflow complexity (quantified via a comparative audit of manual touchpoints vs. automated design nodes)
I conducted a comparative workflow audit between the 'As-Is' manual process and the 'To-Be' automated design. By consolidating 12 manual touchpoints (emails, manual verification, data entry) into 7 automated nodes, I reduced the logic complexity and interaction cost by 40%.
Background
Background
What is the need for a subscription feature in AIMMO?
What is the need for a subscription feature in AIMMO?
The Strategic Mission: Decoupling Growth
The Strategic Mission: Decoupling Growth
AIMMO's manual, sales-led model created an operational ceiling. Since every transaction required human intervention, scaling was impossible without a massive, unsustainable increase in headcount. My goal was to design an automated, self-service infrastructure to unlock global growth.
AIMMO's manual, sales-led model created an operational ceiling. Since every transaction required human intervention, scaling was impossible without a massive, unsustainable increase in headcount. My goal was to design an automated, self-service infrastructure to unlock global growth.
The Operational Bottleneck (Legacy Process) Our "Manual-First" infrastructure created three critical business risks:
The Operational Bottleneck (Legacy Process) Our "Manual-First" infrastructure created three critical business risks:
① The Activation Gap
A forced 48-hour delay between payment and access while users waited for a manual sales contact.
② Zero User Autonomy
Customers had no self-service portal to manage seats, upgrade plans, or view billing history, leading to high support ticket volume.
③ Restricted Global Revenue
Our payment options were rigid and manual, preventing us from capturing the high-velocity B2B SaaS market.
① The Activation Gap
A forced 48-hour delay between payment and access while users waited for a manual sales contact.
② Zero User Autonomy
Customers had no self-service portal to manage seats, upgrade plans, or view billing history, leading to high support ticket volume.
③ Restricted Global Revenue
Our payment options were rigid and manual, preventing us from capturing the high-velocity B2B SaaS market.
Defining the Service Architecture
Defining the Service Architecture
TO access AIMMO's enterprise services, users purchased subscription plans, catogorized into
TO access AIMMO's enterprise services, users purchased subscription plans, catogorized into
The SaaS Tier
(High-Velocity Growth)
The Base (Labeling Plan)
The Base (Labeling Plan)
A recurring subscription (Monthly/Annual) providing a 200GB baseline for account-based labeling.
A recurring subscription (Monthly/Annual) providing a 200GB baseline for account-based labeling.
The Add-on (Smart Labeling)
The Add-on (Smart Labeling)
A one-time purchase designed as a conditional expansion, it requires an active base plan to function.
A one-time purchase designed as a conditional expansion, it requires an active base plan to function.
The Enterprise Tier
(High-Touch Solutions)
For high-volume accounts, I maintained a "Consultative" flow. These plans bypass the automated checkout in favor of tailored resource allocation and sale-led negotiation.
For high-volume accounts, I maintained a "Consultative" flow. These plans bypass the automated checkout in favor of tailored resource allocation and sale-led negotiation.
The Challenges
The Challenges
Before implementing an integrated System
Before implementing an integrated System
The Strategic Mission AIMMO's growth was capped by a manual, sales-led model.
The Strategic Mission AIMMO's growth was capped by a manual, sales-led model.
Contact us
General customers had limited control, with manual processes for purchasing and managing plans.
General customers had limited control, with manual processes for purchasing and managing plans.
Payment options were restricted to card payments only, with no automation in place.
Payment options were restricted to card payments only, with no automation in place.
Enterprise clients relied heavily on sales consultations, slowing down activation times.
Enterprise clients relied heavily on sales consultations, slowing down activation times.
UX Research
UX Research
Research: Logic Mapping & System Audit
Research: Logic Mapping & System Audit
The Pivot Joining mid-cycle with a compressed timeline, I shifted from traditional user discovery to a system-level audit. My goal was to de-risk the project by identifying logic gaps between our business requirements and the technical constraints of the StepPay integration.
The Pivot Joining mid-cycle with a compressed timeline, I shifted from traditional user discovery to a system-level audit. My goal was to de-risk the project by identifying logic gaps between our business requirements and the technical constraints of the StepPay integration.
Key Discoveries
Key Discoveries
Reactive Churn Risk
Reactive Churn Risk
I found that users were only notified of payment issues after their access was revoked. This reactive approach created avoidable frustration and churn.
I found that users were only notified of payment issues after their access was revoked. This reactive approach created avoidable frustration and churn.
The 48-Hour "Dead Zone"
The 48-Hour "Dead Zone"
The manual activation process created a two-day delay where customers paid but couldn't use the product, stalling the momentum of new sign-ups.
The manual activation process created a two-day delay where customers paid but couldn't use the product, stalling the momentum of new sign-ups.
Visibility Gaps
Visibility Gaps
Without a self-service dashboard, users had no way to monitor their own account health, which directly increased our support team's workload.
Without a self-service dashboard, users had no way to monitor their own account health, which directly increased our support team's workload.
Key User Problems Identified: Phase 1
Based on the documents and discussions with internal teams
Based on the documents and discussions with internal teams
Old Subscription Activation Process
Old Subscription Activation Process
No Real-Time Subscription Visibility
No Real-Time Subscription Visibility
There is a lack of clarity regarding the current plan and status, as the admin dashboard menu bar does not provide any information on these aspects.
There is a lack of clarity regarding the current plan and status, as the admin dashboard menu bar does not provide any information on these aspects.
Failed or expired card payments were not surfaced effectively within the UI
Failed or expired card payments were not surfaced effectively within the UI
Supporting Evidence: Phase 2
AIMMO Terms Suggest Payment and Service Issues
AIMMO Terms Suggest Payment and Service Issues
⚠️
Subscription services are governed by strict order and activation dates
Subscription services are governed by strict order and activation dates
⚠️
Payment disputes and service limitations are handled reactively, not proactively
Payment disputes and service limitations are handled reactively, not proactively
⚠️
Service disruptions may be announced after they occur, not before
Service disruptions may be announced after they occur, not before
User Flow Mapping: Phase 3
Key UX Needs and Goals
Key UX Needs and Goals
☝️This user flow diagram represents the new, optimized subscription and payment system developed after identifying key pain points.
☝️This user flow diagram represents the new, optimized subscription and payment system developed after identifying key pain points.
①
①
Streamlined onboarding for different customer types (trial, paid, enterprise)
Streamlined onboarding for different customer types (trial, paid, enterprise)
②
②
Integrated third-party payment steps with Step Pay
Integrated third-party payment steps with Step Pay
③
③
Clear flows for subscription updates, cancellations, and refunds
Clear flows for subscription updates, cancellations, and refunds
④
④
Visibility into account/license states and smart labeling usage
Visibility into account/license states and smart labeling usage
💡Purpose
💡Purpose
To provide development and QA teams with clear, comprehensive reference during
implementation and ensure alignment across business logic, UI, and user expectations.
To provide development and QA teams with clear, comprehensive reference during
implementation and ensure alignment across business logic, UI, and user expectations.
Payment Process
Automatic Payment Failure
Unsubscribe
Refund
Quick Validation and Iteration: Phase 4
Since there wasn’t time for extensive external testing:
Since there wasn’t time for extensive external testing:
Feedback focused on making critical payment and subscription status information simple, visible, and actionable at all times.
Feedback focused on making critical payment and subscription status information simple, visible, and actionable at all times.
I validated my designs through iterative walkthroughs with internal stakeholders.
These sticky notes capture key feedback from the product teams, helping prioritize clear subscription visibility and reducing friction in the activation flow.
I validated my designs through iterative walkthroughs with internal stakeholders.
These sticky notes capture key feedback from the product teams, helping prioritize clear subscription visibility and reducing friction in the activation flow.
Solutions
Solutions
Solution 1
Subscription Card Types & UX Logic
Subscription Card Types & UX Logic
To reduce confusion and ensure transparency around subscription states, I designed a modular card system that clearly communicates the current user status (e.g. free trial, active, expired, enterprise). Each card includes dynamic content and call-to-actions based on subscription type and plan status.
To reduce confusion and ensure transparency around subscription states, I designed a modular card system that clearly communicates the current user status (e.g. free trial, active, expired, enterprise). Each card includes dynamic content and call-to-actions based on subscription type and plan status.
Card Design Principles
Card Design Principles
Immediate Clarity
Users should instantly recognize their subscription state without needing to navigate elsewhere.
Actionable UI
Each card surfaces relevant actions like “Upgrade Plan”, “Order History”, or “Contact Support”.
Scalable System
Designed to handle edge cases
(e.g. both monthly & annual subscriptions active, or enterprise custom setups).
Visual Consistency
Layout, typography, and button styles follow a uniform design language to maintain brand integrity and usability.
Outcome
Outcome
This system not only helped reduce user confusion and support tickets, but also:
This system not only helped reduce user confusion and support tickets, but also:
① Enabled faster decision-making for users evaluating upgrade paths.
② Helped CX and Admin teams quickly identify plan issues.
③ Created a scalable foundation for new plans and payments logic going forward.
① Enabled faster decision-making for users evaluating upgrade paths.
② Helped CX and Admin teams quickly identify plan issues.
③ Created a scalable foundation for new plans and payments logic going forward.
Solution 2
Alert System for Critical Status Updates
Alert System for Critical Status Updates
To ensure users never miss important payment or subscription updates, I implemented a two-tier alert system. This approach keeps critical information visible, easy to understand, and actionable in real time.
To ensure users never miss important payment or subscription updates, I implemented a two-tier alert system. This approach keeps critical information visible, easy to understand, and actionable in real time.
I designed a two-tier alert system to keep users informed in real time:
I designed a two-tier alert system to keep users informed in real time:
① Persistent Alert Banner
Displayed at the top of the interface for high-priority events such as payment failures,
plan expirations, or inactive subscriptions.
Each banner uses clear, concise language with a direct action link
(e.g., Subscription Plan) so users can resolve issues quickly.
① Persistent Alert Banner
Displayed at the top of the interface for high-priority events such as payment failures,
plan expirations, or inactive subscriptions.
Each banner uses clear, concise language with a direct action link
(e.g., Subscription Plan) so users can resolve issues quickly.
② Contextual Hover Alerts
Disabled buttons now display an explanatory tooltip when hovered over. If a feature is unavailable due to an unpaid or expired subscription, the tooltip clearly states the reason and provides guidance on how to regain access.
② Contextual Hover Alerts
Disabled buttons now display an explanatory tooltip when hovered over. If a feature is unavailable due to an unpaid or expired subscription, the tooltip clearly states the reason and provides guidance on how to regain access.
Solution 3
Online Payment System Integration
Online Payment System Integration
Enhance the subscription purchase experience by integrating StepPay, a payment platform similar to Stripe, into the existing pricing flow, ensuring a smooth, secure, and user-friendly process from plan selection to payment confirmation.
Enhance the subscription purchase experience by integrating StepPay, a payment platform similar to Stripe, into the existing pricing flow, ensuring a smooth, secure, and user-friendly process from plan selection to payment confirmation.
1️⃣
Pricing Table Modal
Entry Point
Combined subscription plans and add-on services in a single modal.
Toggle between Monthly and Yearly pricing with dynamic recalculation.
Numeric quantity fields synced with CTA button for real-time total updates.
Detailed plan cards with key feature highlights to reduce decision friction.
2️⃣
StepPay Payment Page
We integrated StepPay, a secure third-party payment provider (similar to Stripe),
to handle subscription transactions smoothly.
Pre-filled customer details:
User information from the AIMMO workspace (name, email, contact) is automatically filled in,
saving time and reducing input errors.
Seamless return:
After payment, users are redirected back to the AIMMO platform with an confirmation modal.
Solution 4
Dropdown for Clearer Navigation
Dropdown for Clearer Navigation
I designed the menu bar with a dropdown system to give users faster, clearer access to subscription and billing information.
I designed the menu bar with a dropdown system to give users faster, clearer access to subscription and billing information.
Design Rationale
The dropdown gives users a quick, clear view of their subscription status without leaving the page.
When paid service ends
Expired Plan
Expired Plan
Payment Failed
(Storage Still Accessible)
Payment Failed
(Storage Still Accessible)
Expired Plan
(No Storage)
Expired Plan
(No Storage)
Active Status Indicator
Free Trial Active
Free Trial Active
Enterprise Plan
Enterprise Plan
Takeaways
Takeaways
Takeaway 1
Designing for Continuity & Handoff
Designing for Continuity & Handoff
The Strategy: When company priorities shifted in Q4, I pivoted from implementation to continuity management. I learned that in high-velocity environments, a "turnkey" documentation package is as critical as the final UI. I ensured that all business logic and unfinished flows were documented so the next team without losing strategic momentum.
The Strategy: When company priorities shifted in Q4, I pivoted from implementation to continuity management. I learned that in high-velocity environments, a "turnkey" documentation package is as critical as the final UI. I ensured that all business logic and unfinished flows were documented so the next team without losing strategic momentum.
Takeaway 2
Architecting within Technical Constraints
Architecting within Technical Constraints
The Strategy: Integrating third-party systems like StepPay requires balancing strict API compliance with a cohesive brand experience. I learned to treat technical constrains as design parameters rather than roadblocks. By mapping AIMMO's UX to StepPay's logic early, I built a system that felt native to our platform while adhering to external security and functional rules.
The Strategy: Integrating third-party systems like StepPay requires balancing strict API compliance with a cohesive brand experience. I learned to treat technical constrains as design parameters rather than roadblocks. By mapping AIMMO's UX to StepPay's logic early, I built a system that felt native to our platform while adhering to external security and functional rules.
More Projects
More Projects
Back to top